.04
Valor
radio_button_unchecked radio_button_unchecked radio_button_unchecked

Gamified Charity Donation Mobile App, that search make the users donation experience more fun and easy. Final Project on for Vancouver Film School Digital Design Diploma Program.

At-a-Glance

During my time in the VFS diploma program, I collaborated with a classmate on the final project, Valor, a mobile app designed to gamify the donation experience. While my focus was on UI and UX, my teammate handled the app's illustration. Valor seeks to transform the act of giving into a fun, shareable, and consistent experience, making donations more accessible and enjoyable for users. The app prompts users to contribute small amounts during everyday transactions, fostering a culture of consistent giving. Inspired by gamified apps like Duolingo, Valor emphasizes the impact of small, regular contributions, addressing the challenges faced by charities, especially during the pandemic. The project aims to bridge the gap between individual donors and charities by making the donation process constant, social, and rewarding.

Project Duration

4.5 months

My Role

Project Manager
Visual Designer
Interactive Designer

Collaboration

Visual Designers
Interactive Designers
Illustrators
UI UX Counsellors

Programs Used

Adobe XD
Illustrator, Photoshop, After Effects, Premier, Audition, FireAlpaca.

The Problem

The Valor project emerged from a critical observation of challenges within the charity sector. Charities heavily rely on individual donations, which, unfortunately, tend to be inconsistent and fluctuate, making it difficult for them to sustain operations, especially during challenging times like the pandemic. Recognizing that between 40 and 80% of charity funding comes from individual donations, the project aimed to address the struggle charities face in attracting new donors and maintaining a steady stream of contributions. On the user front, traditional donation methods often prove cumbersome and lack the social engagement needed to foster a sense of impact. People may want to help, but barriers such as the perceived high donation amounts, trust issues, and the lack of a consistent and enjoyable giving experience hinder their participation.

The Goal

Valor's overarching goal is to revolutionize the donation landscape by making giving consistent, social, and enjoyable. Inspired by gamified apps, it encourages users to share progress, collaborate with friends, and earn rewards. The objective is to eliminate barriers to regular giving, prompting users during transactions to make small yet impactful donations. By emphasizing the power of small, regular contributions, Valor aims to foster a sense of community and accomplishment, bridging the gap between individual donors and charities.

Design Process
.01
.02
.03
.04

The advent of Covid-19 prompted a pivot in our research strategy, transitioning from in-person interviews to online surveys. This adjustment yielded valuable insights, with a collection of 28 responses from individuals aged between 16 to 35 years old. To deepen our comprehension, we conducted extensive online research, delving into data from previous surveys on a broader scale. Seeking insights from the nonprofit sector, we held a productive call with the owner of a local nonprofit, supplemented by online exploration into the resource-gathering strategies and challenges faced by larger nonprofits. Expanding our horizons, we engaged in conversations with smaller nonprofits abroad. Additionally, leveraging a heuristic evaluation and SWOT analysis of existing apps, we fortified our design decisions. This comprehensive approach laid a robust foundation for subsequent design phases, ensuring a nuanced understanding of user perspectives and challenges prevalent in the charity sector.

Transitioning to the Define stage, we employed card sorting as our method, organizing and interpreting the wealth of information gleaned from our extensive research. This step allowed us to distill critical insights into key issues, exerting a direct influence on the trajectory of the app's development. The process facilitated a meticulous organization that streamlined the user experience. Crafting user profiles and persona archetypes became the linchpin of this methodology, ensuring our design decisions were deeply rooted in user needs. This meticulous process served as the compass, defining primary challenges and opportunities that would guide Valor's subsequent development phases.

The Ideate/Conceptualize stage of the Valor project was marked by iterative presentations with mentors and counselors, where visual proposals were tested and refined. Multiple mood boards were crafted, exploring diverse aesthetics and aligning them with the evolving app concepts. Through these rounds, we converged on a vibrant color palette to infuse the brand with a joyful and positive vibe. The balance between playful curves and professional straight lines was struck to create an approachable yet trustworthy visual identity.

Branding

A defining moment in this phase was the birth of the overarching theme: "Turn yourself into a hero!" This central idea not only influenced the tone and voice of the app but also shaped its mission and goals. With the mood board and visual direction established, color selection, typography choices, and the creation of visual elements like the logo, background patterns, badges, and character designs ensued. The goal was to craft a brand that exuded positivity and playfulness while maintaining a level of seriousness to instill trust.

Graphic elements

Notably, inclusivity was a priority in character design, reflecting a commitment to diversity in both color and gender representation. As well as clothing and badges as a incentive to complete goals and continue using the app.

Site Map

The App Design phase involved meticulous planning and visualization. We began by crafting a comprehensive flowchart, mapping out the intricacies of how the Valor app would function. Defining the pages and content each one will have.

Wireframes

The subsequent step was the creation of wireframes, focusing on the anatomy of each screen and the seamless flow between different sections. This initial design exploration allowed us to experiment with the placement of key elements and interactions.

Mockup

A series of feedback sessions with mentors ensued, leading to iterative rounds of refinement. Through this collaborative process, we fine-tuned the screens' appearance and functionality, ensuring alignment with the project goals and user expectations. The wireframes evolved into a polished design ready for the prototyping stage. This meticulous approach laid a solid foundation for the subsequent steps in bringing the Valor app to life.

Results

Thanks to this protect we were awarded the best interactive award of the course. and were priced by our mentors. we ended up creating a small video to present our process and a prototype to be shown during the presentation and reviewed. This meticulous prototyping process served a dual purpose. Not only did it enable our team to refine the app's visual aesthetics and user interactions, but it also allowed our reviewers to gain a comprehensive and accurate visualization of the app's functionality. By prioritizing the main user journey screens, we ensured that the essential components of the Valor app were thoroughly tested and refined before moving on to subsequent design stages.

Prototype

Case Study Video

What I Learned?

The Valor project was a pivotal learning experience, providing profound insights into the intricacies of app creation. As students, navigating through this extensive process allowed us to comprehend the complexities involved in designing and developing a functional and engaging application. The challenges posed by the long-distance situation, despite inducing stress, presented a unique opportunity for growth.
The remote work aspect of the project turned out to be a silver lining, preparing us for the evolving landscape of work. The necessity to collaborate, manage, organize, and communicate virtually not only equipped us with essential skills for the project but also became a valuable preparation for the new reality we find ourselves in. The ability to work creatively from separate rooms demonstrated adaptability and resilience, skills that are particularly relevant in a world where remote work has become more than a possibility—it's a defining feature of our professional landscape. This reflection on the process offers valuable insights not just into app design but also into the broader skills required to navigate the contemporary work environment.