Mood Tracking via Chat Interface
Overview
I had the idea of coming up with a journaling app allowing you to capture the way you feel without having to type any words. Doing my initial research, I realized I obviously wasn't the first to have this idea, shocker! They're called mood tracking apps. Well, here we go!
Objective
Create a mood tracking app that combines convenient mood tracking with a community feature allowing users to get in touch with each other.
Duration
5 months
Role
Sole UX and UI designer
Tools
● Adobe XD
● Balsamiq
● Figma
Skills
● User-centered design
● Problem statement (Double Diamond Strategy)
● Competitive analysis
● Research (surveys and interviews)
● User personas
● User journeys
● User flows
● Information architecture/sitemap
● Card sort
● LoFi wireframes
● HiFi wireframes
● Prototyping
● Usability testing
● A/B testing
● Design documentation
Problem Statement
The first phase of the project is all about gathering a solid basis to start from. After doing some online research on other mood tracking apps, I went on to craft a problem statement.
Next step: Take a closer look at what the competition is doing. To find the niche for my app, I did SWOT profiles on two of the biggest of the most successful mood tracking apps: Daylio and iMoodJournal. The key takeaway: There's no mood tracking app on the market combining a delightful user experience with a feature allowing users to get in touch with other users.
Surveys and Interviews
So it was time to move on to the next phase of the design thinking process: We observe. In other words: Let's really get to know our potential users, starting with surveys and interviews. I interviewed three people who had worked with mood tracking apps before, gathering a lot of valuable insights. Thanks again, guys!
User Personas, Journeys and Flows
Based on my findings from phase 1, to get into the user's point of view. To do so, I created two different user personas to design for in the next stages, and added respective user journeys and user flows.
Sitemap
With user research in the bank, I took on the information architecture of MoodMap. Here's the sitemap:
To verify my idea of the sitemap, I conducted a card sort. No discrepancies here.
LoFi Wireframes
To capture my conceptual ideas in an effective way, I went to creating the first LoFi wireframes for my app.
HiFi Wireframes and
First Prototype
First Prototype
Looking at my LoFi wireframes, I realized it wasn't the greatest idea to include checking off daily goals on the mood tracking screen. Not only because they were entered in a different section. Limiting it to three goals a day also seemed too arbitrary. Plus, overall, the mood tracking screen needed some time to be understood.
Wanting to give users the easiest way of tracking their mood possible, the current approach just wasn't smooth enough. Why not use an approach every smart phone user on the planet is familiar with? All hail the chat interface!
With this idea in my back pocket, I went into creating the HiFi wireframes of the first prototype. You can view the complete first prototype here.
Usability Testing
Having finished the first prototype, it was time to find out if potential users liked my approach as much as me – usability testing time! Since the Covid-19 pandemic was still in full swing, I begrudgingly had to go with remote moderated tests instead of witnessing people's reaction in person.
UI Polish and
Second Prototype
Second Prototype
With the results of the usability tests in hand, I gathered some more feedback from my mentor and fellow CareerFoundry students. Together with my newly acquired knowledge about visual design, the appreceived a thorough UI polish. You can see the latest version of the prototype here.
A/B Test
In the feed of the "Community" feature, the Floating Action Button blocked the content below a little bit. So I thought of integrating it in the top navigation. Fits neat and nice here, but is it visible enough? Let the public decide, I say – via A/B test.
UI Style Guide
To make sure MoodMap maintains a consistent design language, I developed a UI Style Guide. If you'd like to view the whole document, please click here.
