A wellness app that would help a user track their progress and push them to commit to a healthier lifestyle.

I just concluded week 7 of the Ironhack UX/UI Bootcamp, and it's a surreal feeling. (think slow-motion whiplash) While this was another individual challenge, there was a change of pace, instead of our 4-day sprints, we got a whole 2 weeks. Didn't even know what to do with all the extra time. I was feeling a lot more comfortable with the Double Diamond Design process as the steps feel organic. So let me guide you through my process, — Discover, Define, Develop, and Deliver.

DISCOVER

Let's start at the beginning, the Discovery phase, analyzing the challenge and conducting market & user research.

Client Brief

Our client was the National Wellness Institute, an organization founded in 1977 with the mission of providing health promotion and wellness professionals unparalleled resources and services.

They define wellness as an active process through which people become aware of and make choices toward, a more successful existence.

Our Brief was to create a wellness app that would help a user track their progress and push them to commit to a healthier lifestyle.

Skincare Secondary Research

As of May 2020, Mental Health America (MHA) reported 80,000 new cases of anxiety or depression as a result of COVID-19. It comes as no surprise, health professionals believe there has never been a more crucial time to implement a self-care routine. I decided to focus on Skincare as more and more people in my circle have stressed the importance of skincare yet no one seems to have a solid plan (myself included).

Per Statista, in 2019, (yes 2019, 2020 was a bust) the Beauty & Personal Care market realized revenue of US$505 billion worldwide, with Skincare being the biggest segment. The segment accounted for 45% of the revenues. With consumers reporting their interest in high-quality, sustainable, and clean ingredients.

Business Analysis — Lean UX Canvas

So Skincare is on a continuous incline, however, were people making informed decisions or just spending on trends that would be replaced weeks later by the next big trend and as such more spending.

I honestly could get lost in research, I actually really enjoy it. And yea I know I have two weeks this time, but I had a feeling that was an optical illusion so did my best to crawl out of the deep holes of research. I needed to establish what this app was going to be and used the Lean UX Canvas. Which served as a framework to establish what the Business Objective would be, who is the targeted user and what benefits would they gain. Although most artifacts are living documents, the Lean UX Canvas is one I return to often, either to iterate a concept or to refocus on the intended objective. After a few iterations, the Business problem to focus on was to help people expand or create their skincare routine in an informed, approachable, effective, and affordable way.

Business Analysis — Competitive Feature Chart

I first needed to see what skincare apps were out there and the features they currently offer. To my surprise, there aren't as many as I thought.

Not only does using the chart help with establishing who the competition is but also to determine mental models users expect and also uncover areas of opportunity. It is crucial to include indirect competition as more often than not the direct competitors are all within the same red ocean (same contested market space). However, for this challenge, my main takeaway was, in sorts, the opposite, as there didn't seem to be a lot of consistency across the apps, and as such many different areas of opportunity.

Business Analysis — Market Positioning Map

In order to analyze where the competitors’ are positioned within the market, I turned to the Market Positioning Map, which allows you to visually determine blue oceans (uncontested market space). Based on the list of features created with the Comp. Feature chart, I looked to define the axis for the Map which allows you to visually determine blue oceans.

Blue Ocean: a personalized & educational experience

Quantitative Data

Having a better understanding of the market and where there were areas of opportunity, I was now interested in the targeted user and their needs and wants. I started my research by collecting quantitative data in the form of surveys and received 31 responses from Reddit skincare groups. I based my questions on areas of opportunities I uncovered while using the Comp. Feature chart.

Main takeaways here were:

•78% felt that skincare was important to them, yet only 12% knew their skin type

•52% felt lost & overwhelmed when choosing products

•85% unsatisfied with their current skincare routine and felt there was definite room for improvement

Qualitative Data

Having collected the quantitative data, I gained insights of the statistics associated with skincare habits. However, I now needed a more in-depth understanding of the perspectives and behaviors of the user. I approached this by collecting qualitative data in the form of 5 interviews.

The main takeaway here was the strong comparisons with the quantitative data.

ALL feel strongly about skincare yet aren’t very knowledgeable

ALL feel strongly about skincare yet aren’t very knowledgeable

I felt the interviewees had many valuable opinions on this topic but one of the quotes that was an aha moment for me was:

I honestly don’t know if the products I use are actually working for me.

And I think because of that I’m not really consistent in using them.

It made it clear that knowledge and consistency tend to go hand in hand. In order to want to be consistent, you need to feel like you not only know what you are doing but able to track the progress to fuel the motivation.

DEFINE

I felt I had a better grasp of the perspective of the targeted user and was ready to Synthesize insights & determine opportunities for design, and moved on to the define phase.

Affinity Map

Having collected valuable data, I now needed to dissect this data to uncover insights and patterns. I started with the Affinity map, which helps to visually enhance the patterns by placing alike thoughts and perspectives together.

Main takeaway: The recurring theme of lack of knowledge of skin type and routine however ironically strong importance placed on skincare.

Value Proposition Canvas — Customer Profile

I moved on to the Value Proposition Canvas which consists of two parts and in its entirety is used to ensure the product or service we ultimately provide is a good market fit with the customer and adds value to their experience.

The customer profile side is intended to uncover and define the customer or user’s “job to be done” (consisting of functional, emotional, and social) and the associated pains and gains.

I went into more depth on “Jobs to be done” in my last article, E-Commerce: Helping communities support local businesses, but just in case you haven’t had time to read ALL my articles, here’s a quick recap below.

‘Jobs to be done’ as defined by Strategyn “proposes that in order to understand customer needs in a way that makes innovation predictable, companies should stop focusing on the product or the customer and instead focus on the underlying process or “job” the customer is trying to get done.”

A quick example of the jobs to be done, gains, and pains defined were:

JTBD: to buy safe & affordable products (functional), Build Confidence (emotional)

Gains: Improved skin, gain confidence, a personalized routine, consistency, save time & money

Pains: overspending, insecurity, overwhelmed

User Persona

With the insights, patterns, and perspectives into the user's behaviors, uncovered from the collected data, I was ready to create a User Persona. Essentially user personas help to humanize the data that represents the targeted User group. I created inconsistent Izzy and consolidated the data into skincare habits, buying habits, motivations, and frustrations. I made sure to keep the interview quote that most clearly represented my findings.

As-Is Scenario

I used Inconsistent Izzy to brainstorm what she would do/think/ and feel during her current skincare routine from there I was able to find patterns that translated to phases.

Patterns uncovered in phase 1 for example:

Phase 1 — Selecting products

Doing: endless research tries a new product, looks for sample sizes, checks reviews, asks friends

Thinking: hope this product works for me, this is expensive, are these clean ingredients

Feeling: confused, skeptical, apprehensive, stressed, overwhelmed

Journey Map

From the insights gathered in the As-is Scenario as well as user research, I was able to hone in on a specific user journey in order to uncover specific pain points to address that would lead to design opportunities. By breaking it down I was able to consider the context in which a solution would have to work.

Pain Points

  • Unaware of their skin type and what products to use
  • Frustrated with the number of products to choose from
  • Unaware of specific ingredients
  • Doesn’t really track progress
  • Budget concerns

Problem Statements

I converted the pain points into more detailed problem statements…

•Users are unaware of their skin type and what products they should be using

•Users are frustrated by the unclear nature of product ingredients

•Users finds that the cult-favorite products are too expensive

How Might We Statements

Then converted the problem statements into actionable HMW statements…

•How might we provide guidance and recommendations specific to their skin needs?

•How might we bring awareness and education on safe ingredients?

  • How might we help the user find products within their budget?

DEVELOP

I was now ready to diverge again and brainstorm ideas to ultimately develop the MVP by prioritizing features.

I brainstormed solutions for the 3 pain points. Using the HMWs statements as the framework I time-boxed myself and allowed 10 minutes for each HMW and came up with 31 ideas. Areas of focus were Guidance & recommendation, awareness and education, and finally budget.

MoSCoW Method

I was now ready to dissect the ideas in order to prioritize features that would ultimately form the MVP. I applied the MoSCoW method in order to filter the ideas into Must have, Should have, Could have, and won't have. By combining the impact vs effort and Moscow method I was able to visually see the impact an idea would have and how much effort it would take to implement.

Value Proposition Canvas — Products & Services

I now needed to ensure the features we would offer was a good market fit. So I was ready to complete the Value Proposition Canvas by addressing the products and services side to make sure the features would indeed offer gains and relieve pains or frustrations for the user.

Gain Creators: Feel More confident, organized & consistent, educated on skincare

Pain Relievers: relieves stress, frustrations when selecting products, eliminates rushed decisions at the store, inconsistency, overspending

Job Story

To back up the findings further I used the Jobs story framework as that allows you to focus on context instead of assumptions.

First I wanted to get a grasp on what the app’s overall job story is or why the user hires the app.

When selecting skin care products, User wants to make an informed decision

So that they can improve their skin and establish a consistent skincare routine.

Which makes them feel healthy, motivated and confident.

From there I focused on the specific feature story and the user’s intended outcome. By seeing a job in a specific context it allowed me to better determine the solution.

When following a skincare recommendation, User wants to have a personalized experience and a way to track their progress

So that they can improve their skin and feel motivated to be consistent with their routine while also staying within their budget.

Minimum Viable Product

A Skincare App that acts as your personal Skincare assistant!

Main Features

Face Scanner

Allows the user to scan their face, detecting pore size, dark spots, and other problem areas, which helps to define their skin type and a personalized regimen.

Face Diary

A ‘Face diary” where you submit a daily selfie and can insert notes. This will allow the user to track their skin’s progress.

Products Guide

User can enter or search for a favorite product and more affordable alternatives will be listed.

Did we fulfill the Blue Ocean uncovered?

To ensure the app and its key features would be a good market fit I looked back at the Market Positioning map. By providing a personalized regimen with explanations as well as detailed product recommendations the app would cross into the intended blue ocean of a more personalized and educational skincare experience.

User Flow

Now I was ready to start prototyping but first I needed to create a flow outline that would help me map out the User’s Happy Path, a scenario featuring no exceptions or error conditions.

I dividing the flows by feature tasks and onboarding:

•User flow for Onboarding of each feature + skin analysis

•Setting a goal/photo library feature

•Favorite products — affordable alternatives

•Appointment with coach (a requirement for this particular challenge)

DELIVER

Now for the final phase — prototyping, testing, designing, testing (some more testing)and finally creating my MVP!

Lo-fi Prototype

I start with a lo-fi prototype, as it is quick, easy, and inexpensive. It allows you to get the product testable quickly for feedback to then improve and iterate the process.

I then submitted the lo-fi prototype to Maze, a rapid testing platform that allows you to get quick insights and shows you, among other things, how many clicks it took a user to perform the task requested.

The overall results were based on 8 user tests:

•Average Misclick rate: 28%

•Average time (all tasks): 92 seconds

Main Takeaway: Consolidate the Onboarding as one user felt it was too many pages to click through.

Mid-fi Prototype

Based on 8 testers

  • Average Misclick rate: 23%
  • Average time (all tasks): 115 seconds

Main Takeaway: Time Slot Buttons are too small. Overall typography is too small. Consolidate text, where you can, specifically as some pages, are context heavy, however, have a ‘see more’ option.

Visual Competitive Analysis

Visual benchmarking essentially is visual research that helps us start to break down mental models, patterns that work, as well as what we might want to avoid. It also helps to differentiate the brand visually from competitors. Per my research (mainly reviews) users found:

  • Most were too text Heavy (felt overwhelming)
  • Half recommend only certain brands of products (doesn’t inspire trust)
  • One user mentioned that one of the app’s “Scored skin” feature defeats the purpose of someone looking to improve their skin and already has insecurities. (definitely want to avoid that)

Brand Attributes

Brand attributes are characteristics that the audience sees as an inherent part of a brand. Brand attributes allow us to have a way to measure or validate if our designs are aligning with our attributes.

Based on the collected data, users want to feel positive, they want to feel natural and happy in their own skin. The brand needed to embody that and so the Brand attributes are: Joyful, Positive, Fresh, and Natural.

Moodboard

The Moodboard helps to visualize and convey the feel of the brand attributes. It acts as a pillar to your design and guides you throughout the process.

I conducted 5 Desirability tests as well as presented the Moodboard to the class. To conduct a successful Desirability test, we would need to use a controlled vocabulary in order to truly learn the emotional impact of the design. Microsoft developed a reaction card that listed over 60 adjectives that represent a mix of descriptions that people might consider positive or negative.

Most felt the appointed brand attributes were reflected in the Moodboard having listed most of the attributes as well as synonyms.

Style Tile

The Style tile help to push the design in a specific direction and provides a more concrete guide. Style Tiles consist of fonts, colors, and interface elements that communicate the essence of a visual brand.

After conducting 8 desirability tests, the main takeaway was the Logo.

To the left is the original logo, however, a tester believed the name was ‘How’ (which you can't unsee after it's mentioned). I then noticed that the ‘g’ had the same ascender height of the ‘l’ which made it confusing. The logo was then changed to the one on the right with a ‘g’ that had a more balanced ascender height.

Atomic Design Inventory

Now that I needed to move on to the Hi-fi prototype, I built out the Atomic Design Inventory, to assist in creating a consistent design and speed up the process by providing accelerators like components and variants.

HI-FI PROTOTYPE

I hope you are still with me and if so please test out the MVP Hi-fi prototype below:

Glow Skincare App

The intended tasks for this MVP prototype were:

  • Izzy will go through the onboarding of features
  • Izzy will set up a skincare goal
  • Izzy will look up an affordable alternative to a favorite expensive product
  • Finally, Izzy will set up her 1st appointment with the skincare coach.

Success & Failure Metrics

In order to measure the success of the app and its features, you need to implement and define success and failure metrics.

Success Metrics:

  • Increase in both DAU/MAU
  • New users
  • Good reviews
  • App downloads

Failure Metrics:

  • High churn rate
  • High misclick rates
  • Low or decline in DAU/MAU
  • Bad reviews
  • Low app downloads
  • Loading delays

Next Steps…

  • Usability Test the Hi-Fi prototype
  • Work on micro-interactions
  • Conduct additional research on any knowledge gaps
  • Work on remaining Must Haves, Should haves

Key Learnings

Research is King, but so is Usability Testing. I gained a new appreciation for testing during this challenge as it turned into valuable changes to the product. I do need to improve on prioritizing Figma organization to avoid design debt. I think with practice the balance will become easier to keep. I did create more components and variants this time around and was incredible as it definitely sped up the process.

Well, THANK YOU for reading through my design process for the ‘Wellness app’ challenge, I appreciate it and hope you enjoyed the read.

Take care, hope you come back for my final Ironhack Case study.

UX/UI Design Student