Fawn
Fawn is a mobile app that helps organize their daily spending to promote a healthier lifestyle. This project presents an approach to aid users to efficiently navigate through practical things including personal expenses, lifestyle management, and goal trackers with ease.
Jump to SolutionTeam
Cody Mak, Adrienne Lee
Role
UX/UI Designer
Time
4 weeks
Tools
Figma, Adobe Illustrator, Photoshop
Product Review
Setting Daily Goals and Challenges
Set yourself a goal everyday to promote a healthier lifestyle. From here, you'll see different personal and daily goals.
Track Daily Expenses
See how much you spend everyday to save expenses everyday. You'll be able to track your recent transactions from previous locations.
Organize recurring payments
Rent is hard. This app will help organize any recurring payments altogether. No need to go anywhere else.
Work hard, play hard
We value your health, emotionally and physically. Customize your own exercises or browse through healthier alternatives. Your mind, your choice.
Design Process
A Human-Centered Approach ✨
Research 🤔
Collecting Qualitative and Quantitative Data
User-Research
Google Survey
Tracking lifestyle was unfamiliar territory for me. We began to research statistical data about college students, and how they were able to track their day-to-day tasks. We also conducted our own survey of college students at UC Davis to retrieve sample data about their lifestyles.
Our Goals from the survey:
•Understand the similarities/differences in lifestyles
•Analyze areas in which their lifestyles can be improved
•Distinguish preceding factors that affect their lifestyle
•Observe how frequently they try to maintain a healthy habit
User-Research
Competitive Analysis
We wanted to learn from different competitors that are related to fitness, lifestyle, and expenses applications to understand their strengths and weaknesses more better.
We were able to see how we can make Fawn a better experience for users by understanding the pain points of the competitors.
User-Research
Empathy ❤️
To understand the logistical applications of the app, we used sticky notes to denote our insights and to find a pattern. It helped me understand the concerns/questions from the user’s perspective.
From this empathy map, I tracked down key insights from common patterns that helped me understand the user’s needs. We then separated the insights into three different categories: Lifestyle, Living, & Expenses
click on them
Define the problem
"How do we encourage an organized and healthier lifestyle?
Ideate
Mind-Map
After conducting our research and analyzing results from the survey, we realized that a lot of respondents share difficulties in tracking their lifestyle habits and expenses. We generated our own mind-maps to figure out ways to approach this question.
Ideate
Application Map
We started to map out the different pages and where different interactions would occur.
It started with simple pages leading to different sub interactions that would branch off, focusing on simplicity and logical interactions for a smooth user experience
Ideate
User-Task Flow
We planned out the user flow based on understanding where the hierarchy of information will be presented.
Wireframes & Prototypes ⚙️
Bringing ideas to life
Low & High Fidelity Wireframes
We emphasized a smooth and simple user experience and designed mid-fidelity wireframes that the users would interact with through different pages.
We translated the Mid-Fidelity frames into color and incorporated more UI components on Figma to make the app appear more complete.
Testing
Usability Tests
Think Out Loud
After designing the High-Fidelity wireframes, we moderated how the users navigated through the page and were asked to describe their thoughts/concerns when interacting with the prototype over zoom.
Overview 📍
Method: Moderated Usability Testing (Think Aloud)
Participants: 4
Age Range: Young Adults (19-22)
Average Time: ~10 minutes
Task Completion Rate: 98%
Error-Free Rate: 80%
Testing
Affinity Map
Our usability testing left us with ideas to solve these errors.
We employed the Affinity map to find different patterns that can pinpoint weaknesses in our app. With this, we were able to improve the usability design
Painpoints 🔨
4/4 users experienced difficulties in navigating back because since it was missing the back button
2/4 users felt that the transaction history is invasive because it showed specific locations and money using third-party banking apps to track it
3/4 users did not understand the gray bar as an indicator for “cheat days”
Insights ✨
•Users need to have a more visible & clearer indication of a back button
•Respect privacy and invasiveness
•Include a more intuitive indication for “cheat days”
Recommendations 🧐
•On Figma, use the swipe-down feature to indicate a “back” option in drop-down menus
•Change the transaction UI to be something less revealing and specific
•Instead of a gray bar, we should extend the end-date of the challenge instead
Revise
Priority Revisions
1. Remove Gray bar from the challenge progress bars, and extend the date instead
Our users did not understand the purpose of the gray bar even after the tutorial. We decided that instead of the gray bar, we should extend the end dates by a day instead.
2. Change the transaction history into something that is not specific/invasive
We found that half of the users felt the transaction history was invasive. Since it was split, we wanted to respect the privacy of our users, so we categorized the transactions into broader groups.
Fawn Demo
Track Daily Expenses
We designed the Daily Expenses for users to have an easier way to track their recent transactions
Organize recurring payments
Users can organize their monthly subscriptions or recurring payments more easily
Work hard, play hard
To promote a healthier lifestyle, we designed a customizable feature for users to have a steady workout routine
Design System
Visual and User Interface Design✨
Identity
Branding
We thought about what the application represented. We wanted to signify our app to be a companion or a force of nature that watches over the users.
Our original names included Kudos, Splan, Healthnest, Fawn, and Aether. We chose Fawn as our primary brand because it represents well with well-being and growth.
Identity
Mood Board
Warm oranges and dark blues were our initial colors. However, we figured it would be more inviting to include monochromatic pastels to lighten the mood.
Identity
Logo
As we have our branding finalized, we wanted to focus on the fawn as part of our logo. We wanted to make this app appear ethereal and almost majestic because it represents well with life. We were inspired by stained glass, and designed a logo that best represents Fawn.
Reflection
Next Steps ✨
I am very proud of how this app turned out. It was a moment for me to think about how to turn essential elements into something that is more accessible.
I enjoyed the challenge of including all lifestyle-related things in the app without overwhelming the users. Research and App usability tests were crucial in solidifying this app because it gave a lot of insight on how we should approach this app.
I would love to see this app in development, but also have it iterate through another design process. I would love to implement more features and conduct more app usability tests to add/change certain parts of the app.
Click Below to view the Live Prototype!
.png)
