Acme mockup.png

Acme

A skincare app researched and designed to help alieve the frustration of acne and empowers users through journalling and lifestyle tracking.  

OVERVIEW

Acne is common, complex and negatively impacts people physically and emotionally. Acme is a solution that empowers and brings you closer to your skincare goals. 

Acne is the most common skin condition in the world, estimated to affect 9.4 % of the global population. The causes, severity, and treatment all vary from person to person, making it complex and frustrating - negatively impacting those who have it. 

 

The idea for acme rooted in my own difficult journey with acne. My self-esteem was at an all-time low and I had no idea what to do about it. After talking to those around me, I quickly came to realize - I wasn't the only one feeling this way. Through thorough research, I designed an empowering and engaging mobile solution for tracking and journalling one's acne to relieve the frustration by knowing exactly what is happening on your skin and getting closer to a solution that works for you. 

HIGH LEVEL TIMELINE

2 Months

MAKE OF THE TEAM

Sole UX/UI Designer, researcher and Visual Designer

KEY GOAL

I'm a paragraph. Click here to add your own text and edit me.

INTRODUCTION

Finding the right solution that works for one's acne is a complex and frustrating journey, making one feel hopeless in their own skin. 

Acne is extremely common amongst individuals, yet there is no one single product or solution that works for everyone; this is due to the plethora of factors unique to each person such as their age, demographic and lifestyle habits, truly making the nature of one's acne and their solution unique to each person. 


This makes finding the right product extremely difficult; some treatments take a long time to take effect or the skin might reject the treatment completely, it's hard to tell and it's unsettling to not know if a treatment is working or not, all while depreciating one's self-worth. To begin my design journey to create Acme, I began with the Design Diamond, the thinking process used to really discover the core needs of the product, if it solves the problems of my personas, all in all to just view things from a larger perspective and understand my design ecosystem better. 

Desktop%20-%201_edited.jpg

1. Discover

SURVEYS AND INTERVIEWS

Learning how acne affects people directly - through user interviews and surveys

To begin the design thinking process - I started with researching users through surveys and interviews. Understanding the user is a crucial step when creating an app as it allows for a strong foundation for the app. By understanding the potential users of the app, we can know exactly how to design to solve their problems. 

In order to gain a thorough understanding of the pain points and frustrations people with acne face, I started by sending out a survey and conducted user interviews. This allows for gaining a better understanding of the user and allowed me to know how the design could be catered for the future user. I conducted the survey via Google Forms and conducted the user interviews through video calls (Facetime and Skype meeting). I then synthesized the survey results and answers to main takeaways so I could use it as a main reference for my design of the app. 

  • White LinkedIn Icon
  • Instagram
  • Spotify

© 2020 by Zainab Alavi

User Survey Synthesized

These are the highlights of the survey synthesized

User Survey Synthesized
User Interview Highlights

These are highlights from the user interviews and surveys I conducted in order to gain a better understanding of the users with acne and their experiences with it

THESE WERE SOME MAJOR OF TAKEAWAYS FROM THE USER

Acne lowers self-esteem 

After conducting the user surveys and interviews I became aware that mostly everyone has their self-esteem negatively impacted because of it

Finding the right treatment is a long process

Acne medication that is accessible does not always work, resulting in trial and error which is expensive. The medication that is prescribed is even more expensive and does not always work. 

More people turn to drugstore than visiting a dermatologist

The majority of the interviewees have never visited a dermatologist for their acne and turn to drugstore solutions for their skin due to convenience and affordability. 

SWOT Analysis

Research to learn about the users and better understanding where acne stands in society and technology today

After finding out what the pain points for the users were, I wanted to know what acne solutions already exist in the market, so I could design something that solves the issues of the user but also does not already exist. I chose two potential competitors for my product and built their marketing profile, SWOT profile and conducted a UX analysis of their products. The goal was to identify what type of problems users encounter with competitor products, as well as understand what the users might expect from my product.​ 

SWOT Analysis

SWOT Analysis

PROBLEM

STATEMENT

After generative research, a design problem emerged

Acne is degrading of one's self-esteem and the cure for acne is not definitive. 

After researching the apps that exist for acne, and researching the users, I discovered that all the apps focused on finding a physical cure. However, from the research, acne takes a huge toll mentally. Neither of the apps had a feature that helped empower the user with acne. Additionally, the cure is not definitive so the solution varies between users

2. Define

POTENTIAL 

SOLUTION

After generative research, a design problem emerged

Users need a way to utilize an acne-specialized app to track their skincare to allow for potential solutions for their specific skincare needs as well as boost their self-esteem

As acne is different for everyone and not everyone has access to a board-certified dermatologist to help with their skincare thus a solution backed by science, that will educate the user and help them understand what exactly is happening to their skin results in a potential solution for acne

USER 

PERSONAS

User Personas represent the potential user and allow us to cater the app for the potential user. 

By creating two main user personas, we can gain a further understanding of the person who will use the app. User Personas come in with their own motive to use the app, and thus, the app can help solve the problems they have. 

Persona
Person 3

3. Develop

IA SITEMAP 

A sitemap allows for a clear visualization of the apps features and the navigation between the features

After figuring out the key user features, I created a sitemap that visualizes the features of Acme. It is a map that provides all the pathways within the app. Essentially, it is a master userflow, that shows the information architecture of the app containing all the pathways within the app. This allows for us to see layout of the app before the interface is created to know exactly what screens will be needed for the app. 

USER

FLOWS

Visualizing how a certain user would interact with the app for a more friendly experience for the user

User flows are extremely important as they allow for us to create a more seamless experience for the typical user using the app - as we know exactly what they want and need from the app. By knowing how the typical user for acme would interact with the app, we can cater the features of the app to meet the needs of the persona. 

SKETCHES

A quick visualization of the interface of the app, allows for a an effectivr framework for how the app will look like. 

Now that all the research (for now) had been completed, I began to sketch how the app will look like. Using the IA sitemap, I sketched out each screen and combined all the features. The sketches allow for any ideas to be fleshed out onto paper and is extremely effective in getting a good idea on the placement of features. 

AlaviZ_2C-page-001 (1).jpg

LOW FIDELITY 

WIREFRAMES

Low-fidelity wireframes allows for a tangible visualization of the interface before the features are refined

After drawing the sketches, I created low-fidelity wireframes, which are essentially digital versions of the sketch. I took all the screens and created all the features using simple boxes, shapes and text to give a good example on how the layout of the app would look like before more details are added such as colour, iconography and text.  

TITLE OF THE CALLOUT BLOCK

HIGH FIDELITY 

WIREFRAMES

High-Fidelity wireframes allowed for a more comprehensive look and feel of an app, setting the app up for user-testing 

After the Low-Fidelity wireframes were created, I added colour and copyrighted text to make it seem like a real app. As I mentioned before, this was my first time ever creating an app. When I added the colours, the graphics and the text, it really excited me as I was getting closer to creating an app that I would personally use. At this point, I was not familiar with style guides or consistency, so the look is mostly experimental and based on my own personal preferences, before user testing. 

iPhone X - 19.png
iPhone X - 39.png
iPhone X - 37.png
iPhone X - 28.png

USER-TESTING

Allowing for insightful feedback to evaluate Acme and it's features effectiveness. 

As the overall look and feel of the app had been established including a basic prototype to navigate around the app, it was now time to gain feedback on the app, through user-testing. By asking the user to certain tasks, they can comment on their opinions on the app, whether it is on appearance, effectiveness or experience overall. I believe this information is extremely valuable as it allows you to become aware of aspects one might have not been aware of previously and allow for a better design and experience going forward. 

Feedback from User Testing 

 - Create a more consistent design system

 - The navigation bar is confusing (add text)

- Take out black outline in interface

- Words of affirmation are extremely effective

- Make the interface more fun and user-friendly

4. Define

STYLE GUIDE

An empowering, friendly and consistent design system to match the goals of acme

After user testing, I was able to grasp a better idea of how the interface should look based on how the users would want to feel. Previously, the elements such as button text came off as harsh and inconsistent. By creating a style guide that uses a warm pink colour pallette, and familiar heading texts, I was able to create a style guide that feels warm and empowering, exactly how the user would want to feel when using the app. 

HIGH-FIDELITY

PROTOTYPE

Implementing the style guide and user testing feedback to create a final product 

After creating the style guide and receiving user feedback from the user testing sessions, I was able to apply these changes to the high-fidelity mockup to create the final product. The app feels warm and empowering, but also fun and engaging. Acme becomes an outlet for users to journal how they feel about their skin, allowing for them to feel comfortable in their own kin, but also practical help with their acne through viewing their daily skin routines, becoming more aware of how their treatments work, becoming aware of their own skin type and finally allowing them to seamlessly contact a dermatologist if need be. 

Derm.png
Routine mor.png
Dashboard (1).png
Journal.png

END DESIGN

PRESENTATION

A compelling, fun and interactive video to show the final prototype which showcases all the features of the app

I decided to create a video to showcase all of Acme's features and how to get around the app. It is a simple screen record on Figma of myself interacting with the app. Through this video, you can become aware of the features Acme has to offer and get a better look and feel of the app. 

LESSONS LEARNED

Fun, challenging and self-igniting

Overall, creating Acme was so much more amazing than I ever thought it could be. There is such beauty in being able to solve a problem, especially since this one affects me and millions around the world. Knowing you can literally make someone's life better through a design you created makes me want to continue pursuing this field of design.​ 

Through this journey, I became more familiar with the world of UX/UI design and learned new skills such as User Research and prototyping. Although at times, I felt challenged - I was facing a huge learning curve, such as learning how to use Figma and how to prototype, I learned a lot through online resources and hours of practice. Additionally, I learned a lot about myself as a designer, I discovered a reignited passion for problem-solving, and that I would love to continue taking on any challenges that can positively impact those around me and myself. 

Hey, it's nice to meet you.

This could be the start of something awesome! If you're interested in grabbing a coffee or just looking to chat, feel free to contact me