GLOWCARE

DESIGNING AN APP TO TRACK SKINCARE PROGRESS

Role

UX Research
Design

Tools

Figma

Duration

3 Weeks

Platform

iOS App

THE STORY

I chose to use this project with Glowcare to highlight my design process in detail. I approach every design process with flexibility based on the unique project challenges, as well as constraints that may arise along the way. This project really tested my ability to set aside my own personal bias and assumptions to better understand users' goals, necessities, and pain points.

The first step in my design process is to get clear on the overall challenge. This involves details and context around the client, their desired features and concerns, as well as timeline, device, resource, or other constraints.

THE CHALLENGE

Glowcare is an early stage start-up in the personal health industry, focused on improving personal skin health by making it easier for people to understand the benefits and best practices for taking care of their skin.

Typically, to start a project, I begin with a stakeholder meeting to outline the challenges and constraints. I like to better understand the business, its goals and mission, and any other relevant information. Client discovery always looks very different. It can range from a 1 hour discussion and involve the direct stakeholder requesting the solution, or it can last over several weeks across multiple meetings.

Because Glowcare is only in the concept stage, I made my own assumptions about the details and context of the challenge. The main desire was to allow users to figure out what products are effective in improving their skin, in a practical and engaging way and without requiring the user to have extensive skincare knowledge. The goal for the app was to create a way to allow users to track their skincare routine - such as organizing products, utilizing photos, and taking notes, all in a fun, elegant, and simple manner.

Due to other initiatives, this project had a 2-week deadline for discovery through delivery. This time frame was made even more constrained due to having no other digital assets, branding, analytics, or other data to leverage. As you’ll see below, this impacted several aspects of my design process.

DISCOVERY

DISCOVERY

User Context - Who are our users?

With the challenge clearly defined, I move onto the user discovery process where I dive deep into getting clear on the users and their contexts. My main focus is to answer 1 critical question:

Are we focused on the right users and the right pain points?

Secondary research

Typically, I like to start this stage with research I can quickly do on my own, such as market research and competitive analyses. I often read through articles, books, watch videos, and pull information from Google and online communities (Facebook groups, Reddit, forums, etc.) to understand the industry and target audience. If I am working on an existing project I also like to look at analytics and any other client data points that might be helpful. From here I am able to articulate questions for future interviews and surveys.

Glowcare already had the idea that the app would revolve around routine tracking. Initially, my secondary research consisted of looking at various online communities to explore current tracking methods. I found that most people were using spreadsheets, journals, or simply keeping mental tabs on progress.

I also like to spend no longer than an hour on competitive analysis starting with a quick audit to understand the workings of competitor products. If time I will also create a comparison chart to see products in relation to one another but I did not feel that was necessary for this project as they all had similar features.

The main competitor apps to Glowcare are Trove Skin, Cloe, and myForte. They are used often and highly rated by users in the community and others in the app stores. I started off by creating a brief audit to understand how each app works and what they have to offer. I also looked through reviews to see why user's may or may not be enjoying the app.

All 3 apps provide features such as photos, product recommendations, and patterned graphs to accentuate improvement (or not). The photo feature was something that the traditional tracking methods (journals, diaries, spreadsheets) were lacking and the reason some switched to apps in the first place. This was a key insight and incorporating photos into my own design would definitely impact the design later on.

I also identified that complex navigation, an overload of options, and inaccurate graph information drove many users away from competitor products. myForte was also exclusive to those who use specific brand products. These insights inspired me to create a simple navigation, avoid option overload, and only use graphs if they were very accurate and easy to read.

Primary research

I always like to conduct at least some form of primary research to understand the target users and validate any assumptions I have made. This research can be a survey, formal 1:1 interview, or focus group. Time and resource constraints impact what I’ll end up using. If things are really constrained, I will most likely do a quick online survey that I will throw out into subject related communities to get results within the hour.

For this project, I created a list of 8 questions to ask in interviews with 6 different skincare users found from the r/SkincareAddiction community on Reddit. Due to the pandemic, these were all done 1-on-1 virtually via a 30-minute Zoom call.

Interviews revealed that not all skincare users care about tracking routines and products. Instead, I found that users could be broken down into 3 main groups: new skincare users, moderate users, and heavy users. Users were put into one of the three categories depending upon how vital their daily routine is to their schedule and how likely they were to go out of their way to improve or change their routine in hopes of reaching their goal.

Defining the types of users

Since I found that both new and moderate users were less likely to put more time and effort into their routine, it made them unlikely to track product effectiveness through journals or apps. Meanwhile, heavy users get into the nitty gritty of skin health and are more inclined to:

  • Create and sustain a skincare routine
  • Be more motivated about their skincare goal
  • Track routine and products through outside sources (notes, apps, photos)

I recommended Glowcare focus on heavy skincare users as their primary audience as they are the most likely to utilize the app compared to their counterparts.

User assumptions & pain points

Now with my target user in mind, I like to get clear on assumptions and pain points. I may leverage either secondary research I’ve done or do additional primary research (if need be). With Glowcare, I used Typeform to do an online survey of 20 heavy skincare users to understand their struggles.

Why do they use skincare in the first place? How do they go about using it to solve their skin related problems? What are the difficulties with their current process?

Based on this additional primary research, I was able to identify the following pain points and make assumptions about skincare users:

After understanding the main pain points, I could make my assumptions about skincare users:

Defining the benefits:
necessity vs nice-to-have

Before moving onto the design phase, I first want to get clear on what the top priority features of the project are. I always create a detailed list that separates possible features into 3 sections:

  • P1 (Must Have): features that are necessary for the app to work and let users accomplish their goal
  • P2 (Nice to Have): features that may be a nice addition but are not necessary for function. These may or may not be included in the design depending on constraints
  • P3 (Future): nice to have features that may add to the design but are beyond constraints. Typically discussed with the client at delivery as suggestions for future features

Features are listed and categorized into each section depending on project constraints and goals:

The main priority of the design is to make it easier for users to determine which products in their routine are effective and how to update and maintain their routine based on this information. It is all about viewing the progress before making decisions to keep or replace products. Thus, features that aid in this idea are categorized into the P1 section and are utilized in the design process.

Defining the main steps of the story

Before moving away from the users, I like to quickly create a user story using my persona just to get a more detailed overview of how someone might actually use the design. It typically includes the high priority features from the feature list:

"Ashley, a beauty blogger and avid skincare user, was born with moderately dry skin. She uses Glowcare as a way to manage her products and figure out which ones are working the best. She recently bought a new product and is testing it out to see if it is helping her skin. Ashley finds the product in the database and adds it to her routine. After washing her face, she checks off that she has completed her routine, fills out the diary, and snaps a picture to record what her skin looked like on that day. Ashley continues to do this for a week and decides to compare what she looks like now versus last week. Looking at the comparisons she finds that her skin is looking and feeling less dry then before, proving that the new product is working well."

DESIGN

DESIGN

Brainstorming designs

Now that I have an idea of the foundation of the app I move onto the design. At the start of the design process, I like to spend about an hour to get some inspiration by referring back to competitor products, designs on websites like Dribbble, and even unrelated products (i.e. the calendar or notes feature on the iPhone for this project). This helps me get the creative juices flowing and sometimes sparks new ideas.

I’ll also do a quick exercise consisting of 8 designs in 8 minutes. The purpose of this is to help me get my ideas onto paper and choose a design as a base to start from. I refer back to the necessary features, nice-to-have’s, and user flow before starting to sketch out some quick ideas.

After getting through all of my sketches I ultimately choose one that best represents the end goal of the project. I’ll later use that sketch to produce some lo-fi wireframes. In this case, thinking back to the cons of competitor apps (overwhelming, difficult navigation), I chose one of the design concepts based on three elements:

  • Simplicity: It must be simple in terms of ease of use as well as minimalist in features and design, but still get the point across. For example, the navigation menu has to be clear and product pages cannot be overloaded with information. The app has to get to the point quickly.
  • Abilitiy to visualize progress: Users have to quickly and clearly see progress. This must align with simplicity, the users should not have to think too hard about if they are moving towards their goal.
  • Alignment with business goals: Goals include design for routine tracking, ability for users to find effective products, building a brand image, and adhering to budget and time constraints (2 weeks).

Lo-Fi wireframes

My preferred weapon of choice to create wireframes from my sketches is Figma. Depending on the scale of the project this process can range from 1 hour up to 1 week or more. Since this project had a short deadline of 2 weeks, wireframes were completed in 3 days.

At this point I like to have a brief meeting with the client to discuss the wireframes and possible changes and/or additions since it is the first visual of the end product, giving me a chance to show them how the product is going to work. Depending on the project constraints (time, budget, etc.) and how the discussion goes, I may go back to the drawing board and create some new ideas and hold another meeting or I may just integrate those tweaks when moving onto high fidelity.

Branding

At this stage I like to incorporate branding and preferably hold a client meeting(s) to get a clear indication of what guidelines are already in place. Does the company have a style guide? Does the design need to involve certain visuals? Is there already a logo?

In the case of Glowcare, the company did not have any branding assets because it was at the very early stages of existence and the brand identity wasn’t fully established yet. So the company really leaned on me to be able to come up with branding ideas. What was clear was the company stood to promote personal health and self-care. I got the idea that their image would reflect a feeling of calm as the time the user spends on the app is about them and self-love. Like taking a personal health day or relaxing at the spa.

I focused on features such as rounded corners and bright, pastel colors that emulates friendliness, welcoming, and peace. Sans serif fonts give off a clean, engaging look that promotes the feel of “forward thinking” or progression.

During the branding stage of my design process, again, depending on time and client needs, I may also create a style tile based off of branding decisions. I find this to be a helpful handoff to the client when I deliver assets and whatever else we’ve agreed upon, but also helps me keep my work organized.

Hi-Fi wireframe & prototype

Similarly to the lo-fi process, the hi-fi design and prototyping process can range from 1 day to over a week. This could also vary depending on the availability of client assets such as photos or logos. I primarily use Figma for
hi-fi designs.

For Glowcare, hi-fi and prototyping interactions took about 5 days. This included not only adding colors and fonts, but also designing icons, pulling product photos, and searching for model photos.

VIEW THE PROTOTYPE

TESTING

TESTING

User Testing:
Relocation of features

When performing usability tests, my preferred method is to do some moderated 1:1 testing starting with introductory questions, the usability test, then follow up interview questions regarding the test itself and pain points. Additional questions might be asked on a participant basis depending upon how each user reacted during testing (if applicable). But testing options always depend on the constraints of the project and any type of testing is better than none. So this phase can incorporate my preferred method or be as quick and simple as showing the design to a friend or colleague for some physical testing and feedback.

For Glowcare’s product, I conducted 1:1 moderated (recorded) usability tests and follow up interviews with 10 users (found through r/SkincareAddiction) on Maze. Tasks were created based on the objectives I wanted the app to accomplish and assumptions I had about the apps usage. For example, one assumption was that users will understand how to navigate the app features. The corresponding tasks included adding diary entries, editing routines, and comparing entries. The follow-up questions touched upon pain points and frustrations during any parts of using the app such as “was there any task in particular that was difficult to follow”.

In this case, testing took about 30 minutes each. Touch hotspots revealed that some users had a tough time with navigation, particularly when it came to accessing and editing their skincare routine within the app. Since routines were a key feature to the design, to address this issue I moved “My Routine” to the navigation menu as seen below.

To keep the menu uncluttered and “simple integrity” of the design, I decided the routine page had to replace another page in the navigation. Diary entries were taken out of the navigation and instead placed right on the homepage in the form of a to-do list. This acts as an immediate call to action to create diary entries, which are later used to compare as a way to measure progress in a user's skin health journey.

In more ideal situations, I might do a second usability test specifically focused on the changes that were made. This would be discussed with stakeholders to decide whether it is worth extending the project to include further usability testing before passing it over to the developers. In the case of Glowcare, due to time constraints it was not conducted.

Next steps:
Delivery

Typically after I test and finalize a prototype, I meet with the client to handover deliverables as well as answer any additional questions they have. Deliverables can take several forms such as a presentation, an audit, or actual design assets.

I also always like to share additional information such as alternate use cases (and recommendations), improvements, or additional features that may help with developing the product or other future endeavors.

For Glowcare, some alternative use cases and questions (along with my recommendations) that I came upon during my research were:

Sometimes just delivering the particular agreed upon features sheds light on closely connected pain points. Creating one feature might identify attention to a separate pain point. This is discussed with the client as possible concerns or future additional features. For Glowcare, some additional feature ideas came up during the design process, but they were not able to be implemented due to time/business constraints. Some of these include:

Occasionally at the end of the delivery stage I’ll stay on longer if a client requests to help the development team and implementation. Otherwise, the discussed deliverables are handed off to the client.

TAKEAWAY

TAKEAWAY

Effective information architecture is nuanced (or harder than I realized)

We all fall into the trap of some things being obvious to us but not others. If I have a clementine, it’s obviously a clementine, right? But what if someone else just calls it an orange? Am I right or are they right? The answer is neither, it is subjective. So in design, how does a designer differentiate opinion from design flaw and ensure a positive user experience?

In this project, navigation was the clementine. During usability testing I found that words used for labeling pages in the menu were not as obvious to others as they were for me. Suddenly when given a task that seemed straight forward, users didn’t know where to go. What it all came down to was a simple word and what it represented to the user. It was easy to change but due to time constraints, I had to assume that the small group during user testing would represent the majority, so I changed words like “discover” to “search”.

It wasn’t necessarily a design flaw on my part, but my opinion of the word to use was the minority. In the future, I would like to make use of more tools such as card sorting and tree testing to discover what makes the most sense to the majority.

Edge cases are real and may affect the majority

This project really emphasized that there are many use cases and scenarios regarding how someone will use a product. Being able to discover those cases and plan ahead to incorporate them can make the difference between a good and bad design. However, there will always be those rare cases that you didn’t plan for: the edge case. Those are the scenarios that quickly get attention in online communities and might label a product as “bad” to some.

For Glowcare, an edge case that popped up was the idea of outside resources, primarily diet, affecting skin. An interviewee discussed how diet was a vital piece of their skin health and later during usability testing it was something that was brought up again when users filled out diary entries. While this is something that only a single person was concerned about at the time, if it were brought up to others it could potentially be a feature that users started thinking about and felt that the app was “lacking”, even if they didn’t originally miss it.

These edge cases are something the product was not designed for or even intended to do, but instead an afterthought of a small group of individuals. During delivery I was able to bring it up to the client as a possible future endeavor. Design is about prioritizing and compromising, and not everyone will be fully satisfied, but it does not mean that ideas go unheard. A good design is one that can plan for these outlier cases as well, and put it on the drawing board for possible later use.