Do Me a Favour Buddy
A B2C mobile app designed to promote generosity, enhance mental health, and build community through challenges and favors.
Overview
Acts of kindness should be easier to carry out.
Do Me a Favour Buddy is an app designed to make performing good deeds easier by connecting individuals willing to help with those in need of acts of kindness through "challenges" and "favours."
Problem
The app currently suffers from inconsistent design choices and a cluttered interface. Given the app's diverse target audience, it is essential to address accessibility concerns. Additionally, the navigation process and the setup of challenges and favors are confusing. Resolving these issues is essential to enhance usability.
Solution
My team and I analyzed existing screens and design systems to pinpoint key areas for improvement. We streamlined design choices to create a consistent look and feel, reduced clutter, and resized inaccessible text. Additionally, we simplified the process for setting up challenges and favors by incorporating intuitive workflows.
Tools
Figma
Figjam
Google Suite​
Process
Review
Research
Design
Developer handoff​
Role
UX/ UI Designer (team of 5)
​
Discovery
Before reviewing the existing screens, we familiarized ourselves with the user stories and the established style guide.
We started by reviewing the client’s wireframes, high-fidelity screens, and style guide, ensuring our redesigns stayed consistent with existing elements. Our team then held a Zoom meeting to discuss materials, evaluate the site, and familiarize ourselves with the user stories, helping us clearly define our deliverables to meet the client's expectations.
We Analyzed old designs to pinpoint areas for improvement and focused on those.
These are the areas we identified:
-
Inconsistent design choices on the home screen not reflected elsewhere in the app.
-
Unnecessary background elements that could be removed to highlight essential tasks.
-
Inaccessible text sizes (10px - 11px) that need resizing for the app's diverse target audience.
-
Lack of a clear way to navigate to the challenges feature.
Research
After identifying areas for improvement, we examined the competition to uncover how we could stand out.
Competitive Analysis
We conducted a competitive analysis to evaluate our client's product against competitors in features and usability. We expanded on the client’s initial report, which included Volunteer Match and Headspace, by researching similar companies. I managed competitive information for Calm, focusing on their minimalist yet soothing design and impressive visual feedback.
Findings:
We learned that DMAFB's competition lacked a focus on connectivity and community building, so we prioritized these aspects. With this insight, we decided to enhance the "favours" and "challenges" features, allowing DMAFB to carve out a vital social networking niche by cultivating meaningful interactions within a local community.
Ideation & Design
Once we crystallized our goals, we launched into the ideation process.
User Flows
We developed three user flows to focus on our objectives. At this stage, the screens for challenges had not yet been created.
My colleague and I developed User Flow #2, with a focus on creating the experience of joining a challenge. I believed this feature would be central to the app's purpose, as it drives user engagement and aligns with the app's core mission of fostering community and personal growth.
​
-
As a user, I want to create a challenge that will help spread kindness.
-
As a user, I want to be able to join a challenge that will help spread kindness.
-
As a user, I want to be able to invite others to a challenge that will help spread kindness.
Mid-Fidelity Wireframes
With pre-existing designs in place, our team leveraged them as a reference to update the layout by developing medium-fidelity wireframes. During this phase, we added components to the style guide for future use in the high-fidelity screens. I created the Search Screen, incorporating elements like a search bar, icon buttons, an avatar, a map, and individual list items.
These are a few of the screens and some of the changes I made:
-
Removed dragon motif and mood tracker. Replaced with challenge of the day.
-
Increased inaccessible text sizes from 10-11px to 14px and above.
-
Changed navigation label from "favours" to "discover."
-
Created a toggle bar for "favours" and "challenges." This is a clearer way to find "challenges."
-
A way to search for people or challenges was implemented.
UI Iterations
Once we finalized our medium-fidelity wireframes, our team began to brainstorm the design for the high-fidelity screens. We each took on the task of designing the new Discover page, a key addition to the main navigation and essential to all user flows. We created five different versions of the Discover page and then voted on our top three designs to show the client.
​
I focused on a clean, user-friendly design with a calming green background to create a welcoming interface. Key elements include a prominent search bar with a filter option, a bold "join" button, and card-style challenge displays, all aimed at making navigation intuitive and engaging. The client chose iteration #1 as it aligned most with their brand.
Iteration #1
Iteration #2
Iteration #3
Style Guide
The main goal in updating the Style Guide was to create a more organized and structured library. Each team member was responsible for categorizing the components they designed. We organized iconography, text styles, and made slight adjustments to the color palette. Poppins was chosen for its modern aesthetic and readability, catering to a wide age range. The color palette retained the client’s original vision, with green symbolizing calm, balance, and harmony, while touches of orange added a complementary highlight, reflecting enthusiasm and warmth.
High-Fidelity
Screens
After finalizing all component sets and the style guide, we proceeded to construct high-fidelity wireframes.
The client preferred avatars over regular photos, envisioning his app centered around avatar imagery. To align with this vision, I integrated avatars and added a white background for better contrast with the avatar component. I also shortened the search bar width to create more space for icon buttons, implemented an evergreen color for the link buttons, and enlarged the map component to facilitate easier zooming with fingers.
These are a selected few of the final screens:
Developer Handoff
All screens were annotated to be delivered to the developers.
I annotated each screen in Flow 3, specifying the spacing between elements as well as the assigned colors and text styles to make it easier for developers to reference. Below is the annotated Discover page, prepared in advance of our final handoff.
Reflection
Key Takeaways
Working within the constraints of an existing design system has been an enjoyable challenge. It pushed me to think creatively and find innovative ways to enhance user experiences while adhering to established guidelines. Although the process was rewarding, it required hard work and numerous iterations to arrive at a solution that was both functional and imaginative. The satisfaction of overcoming these constraints and delivering a refined, user-centric design made the effort truly worthwhile.