Glamatar
Design the end-to-end experience of a fashion social app that enables virtual try-on.
My Role
Sole UX/UI designer
Timeline
September 2020 - present
Tools
Sketch, Illustrator, Photoshop, InVision, Principle, UserTesting, Zeplin, Paper & pen.
Platform
IOS
Introduction
The Glamatar team noticed a gap between eCommerce shopping and physical try-on experience. So we decided to create a mobile fashion app where users can personalize their 3D avatars and virtually try on clothing from real designers and retailers. Glamatar also provides a fashion platform for users to catch up with the latest trends, express their fashion sense and socialise with friends.
I wore two hats while building this product. As the sole product designer, I created the end-to-end experience using research, user flow, wireframes, prototypes, and visual design. I also collaborated with PM, 3D artists, marketing, and engineering teams on product thinking, prioritizing features and strategic decisions to meet user and business needs.
Challenge
Business goal
Deliver the MVP of a virtual fashion platform using 3D technology combined with the power of social media. The primary business need was to create the MVP for beta testing to get traction with retail customers and end-users.
User goal
Users need to find flattering clothing effortlessly, catch up with the latest trends and socialize with others through fashion.
Solution Preview
1. Virtually try on clothing before buying.
Users can virtually try on clothing from real designers and retailers on their life-like avatars to see if the item fits them. They can also buy clothing they like through direct links to the store’s eCommerce site or share their try-on looks with friends.
2. Explore trends and inspirations that are customized for you.
Users can try on and save head-to-toe outfit ideas that are customized to their interests. The Trends section under Community helps users find paring ideas for their body type, dress for different occasions, and catch up with the latest trends.
3. Support each other with fashion advice.
When unsure about dressing styles, try the Style Gig function. Users can provide or ask for fashion advice from friends and fashion influencers through interacting with avatars. They can also share their garments, just like what friends do in real life.
4. Fun ways to express your fashion sense and showcase your style.
Users can join Style Challenges to express their fashion sense, win rewards and vote for each other’s entrees.
My Process
1/ Research & Understand
Competitor analysis; Market research
How could Glamatar be different?
To familiar myself with trends and features in the market, I tested 14 popular fashion and social apps and read their online reviews, which also provided me insights into how Glamatar could stand out.
🔍Gap discovered:
Many fashion and social apps have user characters in 2D, which is less accurate in representing the user’s body type compared to 3D avatars. They are also not well integrated on the eCommerce side.
Most retailer apps show their clothing wearing by models. Users don’t know how the items will look like on themselves.
Many fashion-related apps don’t provide personalized inspiration nor offer advice from friends and professionals to help users make the right fashion decisions.
User interview
Unveil user needs, pain points and motivations toward fashion.
Following the initial research, we interviewed six users who have experience in fashion and social apps. Our interview questions surrounded users' overall journey of exploring fashion, setting up and interacting with avatars in apps.
🔍Key findings:
Fitting - Users look for clothing that fits their body type, flatter their looks, and represent who they are.
Advise - Users seek second opinions to confirm that an item is right for them.
Inspirations - Users search for fashion inspirations and trends, especially pairing ideas and fashion looks for different occasions.
HMV
Setting goals.
Considering the user problems and the market opportunities, I developed three HMV statements as the biggest challenges to tackle during my design process.
2/ Define
Persona
The three user groups.
By synthesizing user behaviours from interviews, we discovered three different patterns toward fashion. One group of users needed to catch up with trends and showcase their uniqueness. Another group wanted to find fashionable and flattering items without costing too much time. The youngest group looked for fun ways to express their fashion skills among their friends.
I mapped out our findings in three user personas to help direct design decisions.
Click image to enlarge.
MoSCoW method
Prioritize features to keep things focused.
To develop the MVP as efficient as possible for beta testing, I worked with the PM and marketing team to prioritize feature requests basing on how well they address the needs of our personas, and their efficiency in terms of development efforts and scaling the business long term.
User flow
Break down processes that user would use to complete primary tasks in the app.
Then I structured user flows to show how users navigate through the features in higher priority. These flows were created in the “happy path” so I could assess the efficiency of the screens and align the flow structures with the PM.
Onboarding, login, and avatar setup.
Style gig
Store try-on
Style challenge
Click image to enlarge
3/ Design
Ideation; lo-fi wireframes
Narrow down ideas based on usability and scalability.
During the ideation process, we first needed to define the layout of screens related to avatar setup and virtual dressing room because they are the essence of the whole virtual fashion platform.
To do this, I started with hand sketching ideas of these screens then converged them down to three most promising directions in lo-fi wireframes. Since the app context relies heavily on visual components such as avatars and garments, I added placeholder images to the wireframes to bring clarity to product decisions.
Three concepts of avatar setup screens.
After leveraging the pros and cons of each direction with the PM, we decided to go with the first concept because it provides shorter scrolling when scanning the garments and has the most scalable and easy-to-use toolbar.
We also went through ideation process and rapid design iterations in the early stages of the rest of the features and made design decisions based on user needs and business goals.
Style guide
Modern and fashionable UI design.
As individual features gradually came to life, I built a style guide to ensure the design direction meet the client’s goal of positioning the brand as modern and fashionable.
I created icons and illustrations to bring users excitement without distracting them from the rich functionality of the product.
The accent color, magenta, is glamorous yet muted enough to give the avatar details a pop.
The linear strokes and flat endings of the typeface make it very contemporary and easy to read.
4/ Test and Iteration
Prototyping; Research plan; Usability test
Improving through user feedback.
I built a mid-fi prototype of the key features using Sketch and InVision to get more insightful feedback from the usability testing sessions.
Then I created a structured research plan and a usability testing script with five tasks to guide the testing sessions with seven users. We ran the tests via usertesting.com, Zoom and in-person, with Thinking Aloud method to best understand users' thinking.
🎉 Measuring Success
We were happy to see some great results coming through the usability test, we also received many valuable feedback on the functionality, content, and interactivity of the product.
80%
57
71%
Success Rate
Net Promoter Score
described the UI as modern, fashionable, glamorous and fun, which aligned with our brand position.
🔨 Primary iterations based on user feedback.
The test results allowed me to identify usability problems and make big and small iterations within the time and budget. The most primary iterations revolved around the try-on flow and the fashion inspiration functions.
Before: one long flow that contains try-on, capturing avatar look and share.
After (part 1): try-on flow.
After (part 2): capture and share flow.
Final Design
Virtual try-on
Users can virtually try on clothing from real designers and retailers on their life-like avatars. They can also easily buy clothing they like through direct links to the store’s eCommerce site. This feature helped users find clothing that’s flattering on their own body shape, and purchase effortlessly.
Sharing try-on looks with friends.
Users can share their try-on look with friends within Glamatar or to other platforms, which meet their needs of seeking second opinions from friends and express their fashion sense.
Trends
The Trends section under Community helps users try on and save head-to-toe outfit ideas that are customized to their interests.
Style gig
Because users need to look for second opinions to confirm that an item is right for them. I designed the Style gig feature where users can provide or ask for fashion advice from friends and fashion influencers.
Style Challenges
Users can join Style Challenges to express their fashion sense, win rewards and vote for each other’s entrees.
Deliverables
Design Handoffs and quality assurance testing.
All the design work and updates were handed over to the engineering team. I used Zeplin for the updated specs and style guide, and shared design assets such as icons in different sizes through Google Drive. I also provided the most recent mockup through InVision.
The engineering team are currently building the product through TestFlight to test the beta version. I’m collaborating with our PM and engineering team in quality assurance testing to ensure the product functions as expected during development.
The impact
⭐️My design mockup played a significant role in pitching investors and reaching out to retailers. From investors, we received much positive feedback on the app design. We also successfully formed our first collaboration with a high fashion clothing brand, West Coast Leather, to include its store in our app.
⭐️The try-on experience, fashion inspiration function and style challenge feature received lots of love from users during testing. Here are some user quotes:
"I really like the catwalk view. I can see myself trying this feature to see how a dress would look on me in 3D, especially in the pandemic when I'm not able to go inside a store and try on clothing."
“I’m interested in the fashion aspect of this app. To dress up my avatar, get style inspiration, and follow other people interested in fashion just as much as I do. I would constantly use it to try new styles to give me new ideas.”
“Style challenge is a fun way to express my style and showcasing my fashion skills. I like that I can compete and win two free garments and extra points.”
Reflections
Learning 1 - Prioritize and focus on the minimum viable product.
It is tempting to design more attractive, trendy and out of the box features, but we must always focus on solving the main problems for users and business with our timeline and resources in mind. If I were to do this project again, I would work with the PM and marketing team to develop a more detailed strategic plan to launch the MVP to help manage out-of-scope requests and deliver a quality product in time.
Learning 2 - Work with an early-stage startup.
I enjoyed working from the idea stage, the team’s openness to fresh ideas and the engagement with business owners. I’ve also honed many skills to help make effective designs, including studying niches to know the industry, leading design discussions, conveying design values, providing ongoing support to each team, and proactively prioritize and strategize the next steps.
Learning 3 - Wearing multiple hats.
As the sole product designer in the team, I learned that building a product from only ideas to develop an MVP for the market requires the designer to wear more than one hat. This includes helping with branding, marketing, 3D design, strategic decisions, and much more. I learned that overcommunicating and aligning user goals and business goals with each team truly helped smooth the whole process.
Next steps
Work with the visual designer and 3d artists to add subtle animations, fine-tune some of the visual elements and include more retail brands in our app.
During the beta testing, track metrics such as pageviews, task time, completion rate and net promoter score to understand success and elaborate product map. Then iterate by considering test results, interview findings and business goals to improve the initial version.
Add new features such as “chatting with a stylist” and “Recommend a size” into the app. We couldn’t include them in the MVP due to the timeline and the budget we had. But I kept in mind that users mentioned these during the interview, and I’d love to develop them in the future to provide more informed fashion advice for users.
Thank you ❤️