UI/UX Case Study: SATURDAYS App
A redesigned eyewear app to be more innovative.
INTRODUCTION
| Project Background |
SATURDAYS is A lifestyle brand that offers a wide selection of designer quality yet affordable eyewear, which is designed in-house to fit and look great. They provide convenient experiences through the app, home try-on service, and lifestyle stores, where customers can also enjoy specialty coffee and freshly baked cookies.
| Project Objective |
To help users on choosing the right glasses and lenses before purchasing.
| Project Solution |
Helping the user to choose the right fit of the glasses based on their face type, and utilizing the phone camera to demonstrate how the special looks like before applying to the glasses.
| Deliverables |
01. Research Sprint
02. Concept Sprint
03. Usability Sprint
04. Handover Sprint
| Duration |
January 2023 — April 2023
| 01. RESEARCH SPRINT |
I. User Interview
The interview consisted of 3 participants, all of them are wearing glasses and currently are a student.
II. Summary of Data
- All of the interviewees spend around 40–60 minutes of time just purchasing their glasses because of queueing reasons.
- 66.7% of the interviewee ever bought a lens with anti-UV for protection while 33.3% bought anti-glare lenses and it depends on the usage of each interviewee.
- 66.7% of the interviewee never bought unusual glasses, while 33.3% ever bought a quite unique style of glasses.
- All of the interviewees feel that wearing new glasses may be refreshing and comfortable due to the changes in prescription from time to time.
- 66.7% of the interviewee ever bought the wrong glasses because it doesn’t really fit them and ended up abandoning them while 33.3% of the interviewee never bought the wrong glasses.
- 66.7% of those surveyed believe that the seller of their glasses doesn’t really advise them on what frame or style will suit them as a result, they must look for examples and make their own judgments because they rarely get feedback from others. However, 33.3% never feel like they have purchased the incorrect pair of glasses because they only use them as sunglasses and not for daily wear.
III. Insights
- None of the participants say receiving much support when purchasing their glasses. Instead, they ended up searching for testimonials and deciding for themselves whether or not they matched them.
- One of the interviewees are concerned that they may not feel comfortable using the functions on their lenses and end up wasting money on new conventional lenses, none of the interviewees actually buy lenses with extra features.
- The majority of the interviewees don’t really know when to replace their glasses because they aren’t sure if they are still functional or not. Some people could possibly have a change in prescription.
IV. Problem Statement
For Carmen, is a college student who always wears glasses for study.
Who prefer using normal lenses on their glasses.
Our product/service is a glasses-shopping app.
That provides AR real-life preview based on your current situation.
Unlike OAKLEY, Our product/solution uses the phone camera to scan the environment and give the user a recommendation on which lenses work best for their glasses.
V. User Persona
Carmen is a 21-year-old diploma student who is currently studying Film Visual Effects in Kuala Lumpur, Malaysia. She struggles with choosing the best fit for her glasses because she doesn’t think that the current glasses suit her.
- Adoption Curve — Early Majority
VI. Appendix
https://docs.google.com/presentation/d/1cXI4hIPmowGT3j0M61lcDCaDtP46C5pHcYnXLMPnfSA/edit?usp=sharing
| 02. CONCEPT SPRINT |
I. New Features Proposal
AR Face Scanner | Utilizing the camera on the phone to analyze the shape & type of the user's face to recommend what are suitable frames for them.
- Customer Value: 5/5
- Flexibility (Tech): 4/5
- Money Value: 4/5
AR Environment Scanner | Utilizing the camera on the phone to analyze the surrounding conditions, users are educated on how the glasses lenses will function before applying them to their glasses.
- Customer Value: 5/5
- Flexibility (Tech): 4/5
- Money Value: 4/5
Lenses Comparison | Utilizing the camera on the phone to visualize the view of each lens, giving the user the opportunity to compare some of the lenses.
- Customer Value: 5/5
- Flexibility (Tech): 4/5
- Money Value: 4/5
II. Sitemap
III. Storymap
IV. Wireframes
V. Concept Testing
The concept test consists of 10 participants. The test is conducted to ensure the idea is acceptable to the user and really did solve the current problems for the target audiences. Users are given a prototype link and a google form to fill in for further feedback.
VI. Testing Report
VII. Findings
All of the users are excited about the apps since they don’t frequently see features like this and they consider it to be a really unique feature because it greatly aids users who are unfamiliar with glasses.
VIII. Appendix
https://docs.google.com/presentation/d/1qrwpPpUb8iHxCljnQOTn1eH_2WPhEA3yGO8WhE-zDzw/edit?usp=sharing
| 03. USABILITY SPRINT |
I. Moodboard
Core Experience | Providing a soft, elegant, minimalistic touch of the brand colors for the looks of SATURDAY's app, to make users want to try out the innovative AR Features, that can help user to purchase their eyewear.
Color Palette | Providing a soft, elegant, minimalistic touch of the brand colors for the looks of SATURDAY’s app, to make users want to try out the innovative AR Features, that can help user to purchase their eyewear.
Fonts / Typography | Using PROXIMA NOVA as the typography, because it comes with the family sizes, where the combination of bold text & light text is giving balances my art style which is minimalistic & elegant. This font will be applied in the title text, subheader & body text.
Icons & Buttons | Using line icons style to fit the overall styles, and solid color buttons to provide a direct CTA.
Photography | Product page will show photography of a model wearing eyewear, and minimalist soft colors.
II. User Flows
III. Usability Testing
This Usability Testing involves 11 responders, 8 of them are conducted through unmoderated mode, while 3 of them are conducted through moderate mode to test out the overall completed app.
IV. Findings
After conducting the test, here’s the report:
All of the users are excited and satisfied with the app, they love the color choices and they got to feel new experiences while using the app.
V. Final UI Screens
| 04. HANDOVER SPRINT |
Style Guide
| CONCLUSION |
https://docs.google.com/presentation/d/1DHanhTnfMyIubLr5t53Xz5DBZygc_I0ql8I6OxK7BE8/edit?usp=sharing
Toolstack
Adobe XD, Adobe Illustrator, Adobe After Effects, Adobe Photoshop, Procreate, Zeplin, Miro.
Final Thoughts
There were many steps taken in the 13 weeks it took to complete this project, starting with identifying an issue and coming up with a creative solution for those who have trouble making their own eyewear decisions. The whole process is pleasant and enjoyable when you can offer a design solution using UI UX. A truly memorable moment is the satisfaction experienced after the project is finished.
Last but not least, I would want to express my gratitude to Mr. Jeremy Phun for helping me navigate the process involving technological challenges and visual design. Also, a big thank you to everyone who took part in the interviews and helped with this project.
