UI/UX Design
Mobile App
Background
Background
Maintaining a routine or starting a new habit is difficult for everyone. Due to busy lives and other external factors it can be very easy to forget and neglect the building of new beneficial habits. In this case; skincare. Identifying pain points was essential to develop a clear concept.
The goal is to encourage users to maintain a routine schedule by creating a community around skincare habits. By focusing on visual feedback and extrinsic motivation the user is encouraged to upkeep their self care through skincare.
Maintaining a routine or starting a new habit is difficult for everyone. Due to busy lives and other external factors it can be very easy to forget and neglect the building of new beneficial habits. In this case; skincare. Identifying pain points was essential to develop a clear concept.
The goal is to encourage users to maintain a routine schedule by creating a community around skincare habits. By focusing on visual feedback and extrinsic motivation the user is encouraged to upkeep their self care through skincare.
Maintaining a routine or starting a new habit is difficult for everyone. Due to busy lives and other external factors it can be very easy to forget and neglect the building of new beneficial habits. In this case; skincare. Identifying pain points was essential to develop a clear concept.
The goal is to encourage users to maintain a routine schedule by creating a community around skincare habits. By focusing on visual feedback and extrinsic motivation the user is encouraged to upkeep their self care through skincare.
My Role
UX/UI, Brand design, interaction design
Software
Figma, Photoshop, Illustrator, Miro
Methods
Competitor Benchmarking, User interviews, Wireframe, Prototype
The Process
Research
Research
Ideate
Ideate
Design
Design
Research
User Interviews
User Interviews
Starting with some casual conversations with family and friends, I wanted to identify the key roadblocks that prevent people from maintaining healthy habits such as, in this case, a skincare routine. Key points were; a lack of motivation to maintain routines, lack of information. Next a prepared a script for user interviews. I needed to identify how to address these issues in my app design.
I interviewed four users with different backgrounds, knowledge of skincare and skincare habits. Upon reviewing the interviews I noticed some vital shared points; mainly that the users lacked extrinsic motivation to maintain a routine and that the lack of immediate feedback and results were frustrating.
Starting with some casual conversations with family and friends, I wanted to identify the key roadblocks that prevent people from maintaining healthy habits such as, in this case, a skincare routine. Key points were; a lack of motivation to maintain routines, lack of information. Next a prepared a script for user interviews. I needed to identify how to address these issues in my app design.
I interviewed four users with different backgrounds, knowledge of skincare and skincare habits. Upon reviewing the interviews I noticed some vital shared points; mainly that the users lacked extrinsic motivation to maintain a routine and that the lack of immediate feedback and results were frustrating.
Competitor Benchmarking
Competitor Benchmarking
The main method of research for this concept app was to analyse competitors and similar apps. Duolingo was a big source of inspiration as it encourages the user to maintain a healthy routine and allows the user to network and gain motivation from other users.
The main method of research for this concept app was to analyse competitors and similar apps. Duolingo was a big source of inspiration as it encourages the user to maintain a healthy routine and allows the user to network and gain motivation from other users.
Fig. 0 - Duolingo
Fig. 1 - Elevate - Brain Training
Fig. 2 - Babbel
Key Research Insights & Solutions
Prioritise Community
Leaderboards
User Profiles & customisation
Messaging
Explain Skincare Benefits
Breakdown skincare steps
Explain ingredients and their benefits
Best context to use products
Offer Onboarding
Explain how best to use the app
Intake user preferences
Show tutorials and give feedback
Prioritise Community
Leaderboards
User Profiles & customisation
Messaging
Explain Skincare Benefits
Breakdown skincare steps
Explain ingredients and their benefits
Best context to use products
Offer Onboarding
Explain how best to use the app
Intake user preferences
Show tutorials and give feedback
Define
Problem Statement
Problem Statement
Problem Statement
Maintaining a routine or starting a new habit is difficult for everyone. Due to busy lives and other external factors it can be very easy to forget and neglect the building of new beneficial habits. In this case; skincare.
Maintaining a routine or starting a new habit is difficult for everyone. Due to busy lives and other external factors it can be very easy to forget and neglect the building of new beneficial habits. In this case; skincare.
Maintaining a routine or starting a new habit is difficult for everyone. Due to busy lives and other external factors it can be very easy to forget and neglect the building of new beneficial habits. In this case; skincare.
Ideate
Wireframes
Wireframes
I sketched some ideas on paper in order to visualise what the app should look like. It was important to keep the linear sequence of events in mind. The main user flow goes from; onboarding, homepage and then routine. Other user flows included the leaderboard section, settings and profile page. I also worked on some brand design to get a feel of how i wanted the app to look.
I sketched some ideas on paper in order to visualise what the app should look like. It was important to keep the linear sequence of events in mind. The main user flow goes from; onboarding, homepage and then routine. Other user flows included the leaderboard section, settings and profile pages. I also worked on some brand design to get a feel of how i wanted the app to look.
Fig. 3 - Onboarding & Home Page sketches
Fig. 4 - Transitions and logo sketches
Fig. 5 - Leaderboard, profile and settings pages
Fig. 5 - Leaderboard, profile and settings
The main design concept i wanted to focus on was a sense of progression. By adding the sequence of the routine on the home page, the user can see the completed steps giving a sense of motivation to keep their streak going.
The main design concept i wanted to focus on was a sense of progression. By adding the sequence of the routine on the home page, the user can see the completed steps giving a sense of motivation to keep their streak going.
Design
Prototype
Prototype
The next step was to begin work on the prototype. By refining the sketches, I had a concrete plan of how the app would look and how users would flow through each step. Colours were kept light and bright to evoke a feeling of freshness. Transitions between screens were kept smooth and minimal in order for progress to feel seamless. Movement was an important aspect to keep in mind as it would give the illusion of users working their way from step to step, giving a tangible sense of progression.
The next step was to begin work on the prototype. By refining the sketches, I had a concrete plan of how the app would look and how users would flow through each step. Colours were kept light and bright to evoke a feeling of freshness. Transitions between screens were kept smooth and minimal in order for progress to feel seamless. Movement was an important aspect to keep in mind as it would give the illusion of users working their way from step to step, giving a tangible sense of progression.
Fig. 6 - Full interactive prototype, feel free to test it out!
Figma link for the interactive prototype
Reflection
Key Takeaways
Key Takeaways
This project was complex to develop as I created everything from scratch. However it made the whole process so rewarding. The main focus of the FreshFaced app is to explore mobile app design.
The "gamification" offered by mobile apps is very unique and encourages users to participate: By fostering a sense of community and giving feedback when their skincare routine is completed. By doing so the user can more easily grow healthy habits. We already see this with Apps like Duolingo and Elevate - Brain Training.
Onboarding is essential for feature rich apps: With Freshfaced the complex and disparate user flows neccesitate onboarding, it's important to guide the user, and intake certain data such as skincare type; to optimise the app for distinct users. Freshfaced would also be classified as a productivity app where users have to set goals and preferences before getting started.
Figma is an incredibly powerful tool and this project helped immensely in growing my skills with the software
This project was complex to develop as I created everything from scratch. However it made the whole process so rewarding. The main focus of the FreshFaced app is to explore mobile app design.
The "gamification" offered by mobile apps is very unique and encourages users to participate: By fostering a sense of community and giving feedback when their skincare routine is completed. By doing so the user can more easily grow healthy habits. We already see this with Apps like Duolingo and Elevate - Brain Training.
Onboarding is essential for feature rich apps: With Freshfaced the complex and disparate user flows neccesitate onboarding, it's important to guide the user, and intake certain data such as skincare type; to optimise the app for distinct users. Freshfaced would also be classified as a productivity app where users have to set goals and preferences before getting started.
Figma is an incredibly powerful tool and this project helped immensely in growing my skills with the software
What’s Next?
This is a project I plan to continue iteration on, to further develop the concept. The next steps for the project include;
Usability testing: I would love to develop the app more, with usability in mind. Through usability testing I could identify pain points, single out specific flaws and get direct comparisions to competitors from potential users.
Web version: Developing a web version of the app is also something I'm planning. Web apps require different parameters compared to mobile apps and translating from mobile to web versions would be a fun challenge!
This is a project I plan to continue iteration on, to further develop the concept. The next steps for the project include;
Usability testing: I would love to develop the app more, with usability in mind. Through usability testing I could identify pain points, single out specific flaws and get direct comparisions to competitors from potential users.
Web version: Developing a web version of the app is also something I'm planning. Web apps require different parameters compared to mobile apps and translating from mobile to web versions would be a fun challenge!