Product development, interface design, and research for My Skin Routine, a skincare iOS app for creating routines and tracking progress.
Overview
My Skin Routine is a mobile app for skincare enthusiasts who want to create routines, track progress and get information on product ingredients and usage.
Interaction Design Specialization Capstone
The University of San Diego Interaction Design Specialization consists of eight courses, concluding with a Capstone Project that allows students to put their new user experience design and research skills to use by creating a mobile app and testing it. I completed this specialization through Coursera, and developed My Skin Routine as the Capstone project.
OBJECTIVES
-
Create a tool for people to find information about skincare products and to keep track of their usage and progress.
-
Utilize the skills learned throughout the course.
-
Gain experience developing a mobile application from concept to prototype.
-
Practice User Research by testing prototype.
METHODOLOGIES
-
Needfinding
-
Brainstorming & Ideation
-
Ethnographic Study
-
Remote & In-Person Interviews
-
Diary Studies
-
Competitive Analysis
-
Storyboarding & Paper
-
Prototyping
-
Content & Product Strategy
-
UX/UI Design
-
Visual Design System
-
Heuristic Evaluation
-
Task Analysis
-
A/B Testing
TEAM
This was an independent project where I was the sole stakeholder.
My roles included:
-
Content & Product Strategist
-
UX/UI Designer
-
Visual Designer
-
Usability Researcher
TIMELINE
9 WEEKS
Problem Statement
It is difficult for skincare enthusiasts to find comprehensive information on product ingredients and usage from a single source.
Multiple websites would have to be visited to answer questions such as:
-
What does this ingredient do?
-
How do I layer multiple products for effectiveness and safety?
-
Where does this product fit into my routine?
-
Can I use these products together ?
There are forums on Reddit with millions of subscribers and dozens of social media influencers who share their recommendations and even spreadsheets of their routines. It can be overwhelming it can be to find information and to efficiently set up and maintain a skincare routine that works for each unique individual.
The SkincareAddiction subreddit has over 1.2 million followers and is one of the most popular forums for users to ask questions and get information on products and routines.
Popular beauty influencers often share their personal spreadsheets of routines, product recommendations and reviews. Many people like this format because of the flexibility and accessibility.
My Skin Routine Users
My Skin Routine is for all skincare users who want to build detailed routines with multiple products.
There are numerous blogs, videos and community boards with influencers and professionals giving advice or recommendations and answering questions.
-
Personas existed in the real world. Questions and comments on videos and web forums, and by seeing article topics, I was able to identify patterns of problems and solutions other skincare users work through.
-
Users range in age, ethnicity, gender. Anyone who cares about skincare and needs a way to organize it could benefit from the mobile application.
-
I reached out to my community to source observational subjects who fit the key criteria of a skincare user who wants to maintain a schedule and keep track of progress.
KEY CRITERIA
OF USERS
Minimum three skincare products per day
Utilize a routine
Use at least one active product
(serum, toner, exfoliant, masks, spot treatments)
Roles & Responsibilities
As the sole stakeholder, my role was multifaceted.
I observed and identified needs, ideated product concepts, sketched wireframes and prototypes, managed content and product strategy, developed the UX/UI, created the visual system and designed and implemented UX Research. There were course guidelines for deliverables each week as well as a forum for peer help.
-
Needfinding
-
Brainstorming & Ideation
-
Product Content & Strategy
-
Storyboards
-
Paper Prototypes & Wireframes
-
UX/UI & Visual System
-
UX Research
Scope & Constraints
Testing was predetermined by the instructor, which I found helpful because it gave a structured plan to the assignment. We had to design two alternative versions of a task in our app to be A/B tested. Four participants (two each variant) were tested utilizing Usertesting.com. Concluding the project with a final prototype to be included in a video explanation of the project and a Medium.com article.
-
9 Week Timeline
-
No budget
-
A/B testing
-
4 subjects
(3 women/1 man) -
Useringtesting.com
(final prototype) -
InVision
(paper prototypes + wireframes)
This was a nine-week mobile application project with peer reviewed deadlines at the end of each week.
1. Needfinding
Observe the routines of 5 people:
-
Diary study of typical routine AM or PM
-
Timed routine
-
Photo and/or a list of products
-
Observed participants going through routine in real time via FaceTime or web video call or in-person.
-
Follow-up questions: in-depth, semistructured
NEEDS
-
Affordable products
-
Education on ingredients to avoid counteracting with other products and to prevent allergic reactions
-
Streamlined routines that are time-efficient
-
Easy way to track their progress and stay consistent
2. Brainstorming and Ideation
Based on my findings, I developed a point of view that users need an easy way to find information about skincare products and they need to be able to keep track of their usage and progress.
A competitive analysis of the market found products that focused on narrow aspects of skincare, relied too much on algorithms to track results, and were not flexible enough for the user to customize based on their personal habits.
3. Storyboarding
Two storyboards were created to highlight different problems that the application could solve, such as setting up a routine of products or finding information about a product.
Sid uses My Skin Routine to buy a skincare product and find ingredient and usage information.
Jess uses My Skin Routine to set up her skincare routine while avoiding conflicting products.
4. Paper Prototypes
I identified two tasks to build out initial prototypes and potentially run an A/B test on:
ADD PRODUCT task flow
ADD ROUTINE task flow
5. Heuristic Evaluations and Wireframe Prototypes
One week was spent performing heuristic evaluations of the paper prototypes, revising them based on the results, and then converting them into wireframes, which were then reviewed again.
-
The paper prototypes went through a heuristic evaluation by peers, as well as a self-evaluation.
-
Based on the evaluations, wireframe prototypes were made in Adobe XD and peer tested using InVision.
-
The wireframe prototypes went through a round of peer and self heuristic evaluation.
-
The prototypes focus was narrowed to test two variations on one task—adding a product to a routine and deleting it.
6. Plan
A four week development plan for completion was laid out in a spreadsheet and would be updated at the end of each week.
The plan included:
-
tasks to be completed
-
due dates
-
status of completion for each task
-
comments on each task
-
estimated hours for each task
-
actual time spent on each task
-
a section for outside constraints to take into account (work, etc.)
7. Clickable Prototypes and Test Tasks
Designed clickable prototypes in Adobe XD and make two variations of the task of deleting the cleanser from the Routine. Developed user questions and tasks for the A/B test.
Clickable Prototypes
-
A and B variation prototypes were developed in Adobe XD and shared using an interactive link.
Test Tasks
-
Add a cleanser to the AM Routine. Delete the cleanser from the AM Routine using either the A or B variation
TEST A
TEST B
8. A/B Testing
Four participants were tested using an iPhone 7, with the main task of adding a cleanser to the AM Routine and deleting that cleanser. Two variations of delete were A/B tested.
FINAL A/B TEST
-
Screener questions were based on the key criteria for users: skincare users with a routine of three or more products, including treatments or serums.
-
Unmoderated task analysis
-
Videotaped screen and audio
-
Post-task questionnaire
Other insights tested:
-
Is the tutorial at the beginning helpful or confusing?
-
Are the navigation icons clear and in-line with the expectations of users?
-
What is the most common mental model for adding a product to a routine (Routine or Product page)?
4
participants total
(2 per test; 3 women, 1 man)
iphone 7 users
for recruiting and testing
9. Results
Utilizing the Swipe gesture to Delete (in the case Delete Product or Delete Step) was more intuitive than the other option in A/B testing.
The results of testing helped inform the edits for the final prototype:
-
Existing iOS patterns worked best for the majority of people— the swipe function, as well as an explicit “Edit” button to access other functionality, helped users quickly perform the tasks.
-
Made a distinct “Delete Product” and “Delete Step” option, because there seemed to be some confusion in the tests as to whether deleting the Cleanser deleted the step altogether.
-
Other changes implemented include: a built out tutorial, confirmation screens for actions, final visual design, additional sections of the app built out (Journal, Progress, Settings).
Delete Product
Delete Step
It wasn't that easy to delete a product from the routine...took some clicking around.
Wasn't able to find a way to delete items and the intro tutorial didn't really give enough guidance.
What frustrated you most about this app?
Have the cleanser delete button in the routine screen be easier to find. Maybe have the trash can appear if I tap on the cleanser?
Give me guidance on what ingredients not to use during the same routine, autogenerate routines after I add products
If you had a magic wand, how would you improve this app?
10. Publish and Sharing
The last component of the project was publishing and sharing the process and the final prototype. I created a video and wrote an article detailing the purpose of the app and the development.
The requirements :
-
Create a video pitch of the app, showing the problem statement and the final solution.
-
Create a Medium article detailing the process of the project and share the article on social media and with peers.
Final ROUTINE Prototype
Tutorial Prototype
Product Prototype
Journal Prototype
Progress Prototype
Outcomes & Lessons
I discovered how important pilot tests are in the research process to insure accurate results in the main tests. I also gained valuable insight into the demands of content strategy and development, as well as best practices of UX/UI design.
These are some of the lessons I learned and things I would do differently:
-
The technical limitations of the software made it hard for some participants to test the prototype accurately. I would do more dry runs of the tests to ensure that I caught those issues and had time to address them before I waste real tests.
-
Participants had the most success with widely used and recognizable UI patterns and gestures. If I was to design the UI/UX again, I would study those patterns further and implement them where applicable.
-
I would have set up my tasks to allow for easier data collection and quantitative analysis. The tasks I set up were not conducive to that.
-
I would have liked to test more people of different ages and backgrounds to gain a better understanding of how the app can be of use to a wider audience.
Usertesting.com recording
Browser address bar
Top navigation covered
Bottom navigation covered