Finito: iOS App UX/UI Design Case Study
By Adam Morenberg
Finito is an iOS app that helps busy, young professionals track important life goals.
Finito was my first solo project at Ironhack’s UX/UI design course, and I completed all of the user research, UX strategy, UX design, UI design, and user testing myself.
The National Wellness Institute is a professional organization that sells training and certification to wellness professionals (i.e. life coaches).
Sales of memberships have been slowing, so NWI has decided it’s time to revamp their core offerings to draw in more wellness professionals.
NWI would like to start offering a suite of new mobile wellness apps exclusively to members and their clients.
Executives have organized a design competition to find their first set of apps.
This UX/UI design case study represents my submission.
Young professionals experience 3 major pain points when they try to accomplish their life goals:
Inspired by the popular idea that “sitting is the new smoking”, my initial idea for the project focused on helping professionals who suffer from back and neck pain.
I wanted to help workers increase their physical activity by offering a tool to remind them to stretch and move throughout the day.
I selected this problem space so I could leverage Ironhack’s location in building.co, a bustling co-working space in downtown Miami.
Since building.co workers are similar to my target user, I hoped to gain easy access to potential research participants for “hallway user research.”
After some quick google searches, I validated the prevalence of back pain as a problem that inspires people to act–and spend money.
I learned that adults 18 to 45-years old use apps to track their fitness more often than older adults.
That’s about twice as often as older folks!
Survey Research (n=114)
I wrote a survey to learn more about the back pain experience and asked my social network to respond.
After 12 hours and just 12 completed surveys, I decided that plan wasn’t going to work, so I pivoted–quickly.
I remembered that a classmate mentioned using Amazon’s Mechanical Turk to get survey responses, and opted to use that as my research panel.
Within 2 hours, I reached my sample goal, and I began data analysis immediately.
In my survey, I asked two open-ended questions to learn about self-care behaviors and general category understandings.
After I coded the data, I sliced it by age group and created word clouds.
Analyzing the data that way allowed me to see how different age groups thought about back pain and fitness apps.
18 to 32-year-olds made a good user group to initially target because they:
- Are much more likely to treat their back pain with stretching or changing posture
- Think of stretching tips, exercises, and videos when they think of apps for managing back pain
Older adults represented a larger whitespace opportunity, but 18-32-year-olds were a better cultural fit with a digital wellness product.
Why 18-32 year olds?
They already had familiarity with fitness apps and a mental model of a back pain management app.
Most importantly, older adults were much more likely to say they don’t think of apps for back pain.
Qualitative Interviews (n=5)
To learn more about the needs and pain points around back pain and physical activity, I conducted brief semi-structured in-depth interviews with 5 young professionals at building.co.
I learned what was difficult about regular physical activity:
And I learned about task management habits and fitness app features they liked–and didn’t like:
Affinity Diagramming the User Research Data
Since I had so much data to make sense of, I created an affinity diagram using post-it notes to group the data into categories. Doing that allowed me to see themes emerge.
Designing a UX Strategy with the Lean UX Canvas
Completing the Lean UX Canvas helped me clarify users’ problems, generate solution ideas, and tie them to measurable business outcomes.
But most importantly, it forced me to see the connective thread that ran between my assumptions about the problems, the users, my solution ideas, possible benefits, and metrics of success.
Using the MOSCOW method helped me identify which features were essential to the MVP. It also helped me create a backlog of less-important features that could wait.
User Persona: Post-College Pam
Using what I learned from my user research, I created a user persona called Post-College Pam on RealtimeBoard to clarify young professionals’ main needs, goals and pain points around goal-setting and achievement.
I named her Post-College Pam because she needs a way managing her goals, but she doesn’t have a system in place or any external constraints like a class schedule to keep her organized.
When Pam decides to “start working out”, forgetting a day or getting too busy can lead to outsized feelings of regret, which discourages her from getting back into her routine.
Mapping Pam's User Journey
Using RealtimeBoard, I created a user journey map for Post-College Pam to give myself a coherent narrative of Pam’s actions, needs, and pain points across her typical day. Being able to see her actions and emotions in context allowed me to focus on opportunities for solution designs.
Site Map and Main User Flows
I used RealtimeBoard to organize content into a site map and essential MVP user tasks into user flow diagrams.
RealtimeBoard allowed me to think through different ways of organizing the content and Pam’s “happy path” of interactions with the app.
User Flow Diagrams
Concept Sketches and Informal User Testing
To kickstart the protototyping process, I created some quick concept sketches of key screens, then showed them to a few colleagues from class, gave them a scenario, and asked them to use it.
These early concept sketches included a 1-question pain survey feature and exercise tips and videos, ideas I’d been thinking about since doing the user research:
But all the testers were confused about the purpose of the pain survey, and one even said it was “not really needed”.
And I also reconsidered the physical therapy tips and videos.
Did I really want to build an app that was little more than a blog with YouTube videos?
None of the testers had questioned the necessity of exercise tips and videos, but they are plentiful on the internet.
I realized that designing an app around tips and videos would give me little room to differentiate it in the marketplace.
After that quick round of informal user testing, I scrapped my initial concept and went back to the drawing board.
How I Changed Direction After Learning My Initial Concept Wouldn't Work
Since my initial concepts didn’t work, I knew I needed to re-focus on at least one different user problem.
To find it, I listened to the recordings of my user interviews again.
‘What is causing users pain and frustration?’ I asked myself.
When I reframed my data, I saw that users were forgetting more than just exercise in their daily lives.
Yes, all said they wanted to exercise more. But they also told me about other goals they were forgetting to work on:
- One wanted to read more books and articles.
- Another wanted to meditate more.
- Two of them told me they wanted to make more friends.
So these young professionals had lots of unfulfilled life goals-they just didn’t have many tools for managing and tracking them.
Low and Mid-Fidelity Prototyping
After scrapping my initial exercise reminder app concept, I realized that young professionals would find value in a tool that helped them list, log, and track their life goals.
I sketched a set of low-fidelity wireframes using a simple flow where users can:
- add goals
- edit goals
- receive push notification reminders
- log goals as they complete them
I used Marvel to transform my low-fidelity wireframes into an interactive prototype, then usability tested with 5 users to quickly learn what was working and what needed work.
After testing the low-fidelity prototype, I created mid-fidelity wireframes in Sketch and tested those.
Low-Fidelity Usability Testing Results (n=5 tests)
Usability testing the low fidelity prototype revealed a number of major problems with the design.
On the home screen:
- Users asked for a “subtract” button in case they needed to adjust the number of activities completed when logging them.
- They also requested a profile screen to input their personal information.
On the edit goal screen:
- Users got lost and couldn’t find a back button.
- Some felt they tapped the delete button when touching the small “edit” link.
I didn’t have time to update the low-fidelity prototype and validate my changes, so I integrated those insights into the mid-fidelity prototype.
Mid-Fidelity Usability Testing Results (n=5 tests)
Usability testing the mid-fidelity prototype continued to reveal problems with the design.
On the home screen:
- Users struggled to locate the “add goal” button in the navigation tab because it was too small and blended into the bottom navigation tab, so I designed a large, brightly-colored round button that jutted out of the top of the navigation tab in the high-fidelity prototype.
On the confirmation screen users see after adding a goal:
- I wanted users to feel delight when they added a goal successfully, but no users expressed anything resembling happiness when they reached that screen, so I designed a colorful microinteraction to amplify their feelings of pride in the high-fidelity prototype.
Visual Analysis of Competitors
To kick-off UI design, I reviewed the most popular goal tracking apps. Mostly I wanted to understand any common design themes. But I was also looking for opportunities to borrow elements that were working and visually distinguish Finito from the pack.
Existing goal tracking apps seemed to look either very dark or very light.
While Today App used a photo background, it was difficult to see, and the image of clasped hands didn’t make sense in context. Done App used card-based UI, but was visually uninteristing and Productive App was a sea of black.
Designing the Style Tile / Atomic Design System
I wanted Finito to look distinct, so I decided to borrow elements of Done App’s card-based UI and use a background photo.
Next up was brand and logo design. I love designing logos, but since this design sprint was just a few days, keeping the logo design process lean was essential.
To start, I created a list of all the places the brand name and logo could be used:
- The App Icon
- A landing page
- An app splash page
- Top bar of the app
It needed to be graphic and punchy. And the brand name needed to be short enough to fit on an app icon.
I wanted it to evoke a sense of pride and achievement.
My favorite names make me smile when I say them. That’s why I named my cat Boy George. And I knew this app needed a name that made users smile.
After scouring the thesaurus, it hit me: Finito!
I vaguely remember my mom used to say it when dinner was ready when I was a kid, but I hadn’t heard it in years.
To find the logo mark, I searched the Noun Project and free associated search terms until I came upon the snow-capped mountain and flag image.
The metaphors in that image were perfect!
The mountain symbolized Post-College Pam’s goals and the flag on the mountaintop symbolized her successful achievement.
Desirability Testing the Style Tile
I used the UserBob remote testing platform for lean desirability testing the style tile.
With UserBob, I could display the style tile to testers, give them a prompt, and analyze their open-ended responses.
I showed the style tile to 20 UserBob testers and asked:
- If this style tile was a person, how would you describe its personality? Why?
Users said that the style tile reminded them of a person who was “adventurous”, “a go-getter”, “an explorer”, and “someone who strives, who is persistent in their goals.”
When designing the style tile, I intended to communicate “Happy”, “Creative”, and “Young”–which were on the right track, but too generic.
Users helped me see how important persistence is as a brand personality trait–it speaks to the needs of users who strive for more and keep working toward their goals.
In retrospect, testing taught me what traits would be resonate with Finito users.
Video: Style Tile Desirability Testing
Usability Testing the High-Fidelity Prototype - Forthcoming
At the end of the week-long design sprint, I didn’t have enough time to validate the high-fidelity prototype with usability testing, so I skipped that necessary step.
I am currently testing the high-fidelity prototype and will present the test results in the next day.
"Happy Path" Video: The Main User Flow Through the High-Fidelity Prototype
Explore the Prototypes
Case Study Presentation Deck
Here is the slide deck of this UX/UI design case study that I presented in-person at Ironhack