Acme

Designing a mobile application to empower and help individuals

with acne

Project Context

The idea for acme stemmed from 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. This is done through 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. 

Timeline: 1.5 months (Oct 2019 - Dec 2019)
Role: This was a solo project for my Interactivity 2 class and was a passion project of mine. I was the sole researcher and designer for Acme. and received guidance from my instructor, Aaron Wright and fellow students. This was my first ever UX/UI project and for this project, I conducted researched and ultimately designed and tested the mobile application on Figma. 
Design Problem: 
How can I use technology to create a platform to alieve the frustration of acne?
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. 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.
Goal: My goal is to alieve the frustration acne entails as well as empower those with acne - digitally.
Design Solution: 
Design 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. 
Acme mockup.png
Research

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
Discover 

User Surveys and Interviews:

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 me 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 meetings). I then synthesized the survey results and answers to main takeaways so I could use it as the main reference for my design of the app. 

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

Key Insights and pain points: 

  1. Acne lowers self-esteem:  After conducting the user surveys and interviews I became aware that most everyone has their self-esteem negatively impacted because of it

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

  3. 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
Define

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. 

Potential Solution:

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
Develop

IA Sitemaps:

A sitemap allows for clear visualization of the app's 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 user flow, that shows the information architecture of the app containing all the pathways within the app. This allows us to see the 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 to the features of the app to meet the needs of the persona.

Peter Gardener

User Flow

Emily Ferguson

User Flow

Sketches:

A quick visualization of the interface of the app allows for an effective 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 of the placement of features.

AlaviZ_2C-page-001 (1).jpg

Low-Fidelity Wireframes

Low-fidelity wireframes allow 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 of how the layout of the app would look like before more details are added such as colour, iconography and text.  

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. 

Key Insights from User Testing

  1. Create a Design System: Create a more consistent design system as the current design and experience feel chunky and not cohesive. By creating a design system, all the elements stay consistent and allow for a better look and experience within the app. 

  2. Clean up elements: Many elements feel out of place and messy. Removing elements such as random black outlines, and create labels for navigation as it's not apparent what the icons do.

  3. Make interface more fun and empowering: Making changes such as adding personalized illustrations, and brighter colours will allow for a pleasant experience for the user. 

Deliver

Style Guide:

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 Mockup:

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. 

Product Design is 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.

Lessons learned