Finito: iOS App UX/UI Design Case Study

By Adam Morenberg

Finito iOS App UX/UI Design Case Study Hero Image

Introduction

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.

Project Background

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.

UX/UI Design Case Study: The Client and The Problem

Pain Points

Young professionals experience 3 major pain points when they try to accomplish their life goals:

  • Deciding, starting, and maintaining routines takes too much time and attention
  • As their time spent working increases, they "forget" to work on their life goals
  • Small slips feel can like fatal mistakes, leading to a cycle of ever-larger regrets and slips

UX Research

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.”  

Secondary 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!

Percentage of U.S. adults who had visited a health care professional because of severe back or neck pain as of 2017
Click image to enlarge
Click image to enlarge

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.

Click image to enlarge

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.

Affinity Map UX Design Case Study
Click image to enlarge

UX Strategy

UX Strategy and Success Metrics

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. 

Feature Prioritization

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.

UX Design

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.

User Persona - iOS App UX Design Artifact Example

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.

User Journey Map - UX Design Artifact Example

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.

Site Map

Finito iOS Site Map Diagram

User Flow Diagrams

Concept Sketches and Informal User Testing

Photograph of me performing a "hallway usability test" of concept sketches on the building.co roof garden with an Ironhack classmate.

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:

iOS App UX Design Case study pain survey concept sketch
iOS App Concept Sketching Video player

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

UX Design Concept Sketch Goal Tracker app
UX Design Concept Sketch Goal Tracker app push notifications
UX Design Concept Sketch Goal Tracker app goal logging

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.

Low and Mid-Fidelity Prototype Usability Testing Results

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.
iOS App Goal tracking - Home Screen

UI Design

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.

iOS App Style Tile - Atomic Style Design System Artifact Example

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

Low-Fidelity 

Mid-Fidelity

High-Fidelity

Case Study Presentation Deck

Here is the slide deck of this UX/UI design case study that I presented in-person at Ironhack

I’m a UX designer and user experience researcher in Miami-Fort Lauderdale, Florida.