Acloset Onboarding Experience Renewal

Most of our entering users are experiencing the virtual closet for the the first time. How can we rebuild the onboarding experience to effectively introduce the benefits of our product? We classified the users into 3 different groups, and drew out 3 different personas which entering users can empathize with. Each user groups could be benefited with the specific features of our app. Upon from the benefits that are listed out, we renewed our onboarding screens into the structure which each of the persona figures tells a story about how they are using the Acloset app as solutions to their problems.

About the Project

Project Background
Worked with - One another product designer (Jeongin Kim) - A product manager - A larger feedback group consisting of other team members
Time - April of 2021 (for 3 weeks)
Tools and Methods - Procreate App for Sketches - Adobe Illustrator - Prototyped on Figma
Core objective - Make an illustration system for our brand that could be used on and on - Build frictionless onboarding experience that summarizes key features of the Acloset app
Expected outcomes
- Increasing the third-day retention rate of the people who have installed our app by more than 20%
Process Overview
Rough ideation → Storyboard → Design the new onboarding UX Flow → Invent the illustration system → Finalize UX writing → Finalize UI design → Finalize the illustrations

Product Introduction

What is Acloset, and what can users enjoy with this service?
Acloset is a virtual closet app an AI tech startup Looko.inc is focusing on. It is an app which users can visually organize and manage the clothes they own by uploading them to the cloud. Users can further sort their clothes according to their needs, generate outfits with the uploads, and get outfit recommendations within their wardrobe collection. As an early-stage app, the features were mostly targeted towards the users who had clear motivation to use the app as the solution to their fashion habits, and most were users who migrated from similar apps such as Smart Closet and Pureple in search for better usability and functionality.
Instagram Story created and posted to the official account @team.acloset by me
Why our app’s onboarding screens needed a revision
It was about 3 months after the global release of the app when this project sprint was executed. Me and the other designer had been mostly working on designing small-scale new features and UI fixes. The first-week retention rate of our app was far higher than the competitors, but our user testers commented that the initial encounter with the app after the installation was too brief to convey the practical benefits of the app features. Moreover, since Acloset’s key features heavily depended on the contents individual users had uploaded, the blank screen an entering user might see after signing up, had a chance to discourage the entering users. Though adding original contents to the app was planned in a near future, at the moment we needed a more assertive tool to hold the curious users who had downloaded our app.
This was the screen which entering users would see at first (when they skipped adding basic items)
Our team and the CEO decided to propel the idea that came circulated on our casual discussions and set up a two-track project timeline. We were going to devise an illustration system with an established visual grammar to be used for multiple purposes, as well as modifying the existing onboarding screens. When doing so, we would incorporate the new illustration sets into the onboarding experience to introduce our users to the aesthetic language our brand was pursuing.

Redesigning the Onboarding Flow

This is the redesigned onboarding flow.
Before, the entering users swiped through the passively-voiced tutorial images that introduced the key features of the Acloset app. We will place stories of human before the tutorial images to emphasize that this app well understands the pain points of the users and are determined to provide the solution.

Defining User Personas

We defined three user personas, each reflecting the expected user habits. Then we sorted out which features of the app would each persona use as a daily basis. The storyboard will be written based on the needs of each personas.

Storyboarding the User Cases

Every story will be consisting of six panels. First and the second panel are dedicated to showing the dramatic changes in each person’s routine before and after using Acloset. Then comes the three panels that explain which specific features of Acloset would bring benefits to each person. The last panel would be a conclusion which implies how nice their life has changed.
I drafted some rough storyboard sketches to use as a reference for vector illustrations.

Style of Illustration

To invent Acloset’s unique illustration style, we went though rounds of drafting and feedback sessions comprising of other team members. On adobe illustrator, we started drawing human figures engaging in specific activities featured on the storyboard.
1. Ideation and Sketches
Draw detailed human figures? Or personify geometric shapes?
We chose to use human figures because of the advantage of being able to express various movements that would help to deliver our message straightforwardly. We made some more illustrations and tried on different styles of aesthetics.
2. Modularization
We were going to use these illustrations for broader purposes, such as for the promo contents and animations. So we modularized the human figures like wooden mannequins to be modifiable and versatile in most situations. And since our app belonged in a fashion category, we assigned some diversity of design on the clothes too.
3. Graphical experiment
We minimized the organic qualities of strokes and fills and made them geometric to make the figures blend in with our app UI. Graphical experiments and simplifications were tried out.

Final Designs

Illustration System for Figures

Figures should be drawn in vectors.
Solid fill for skin and hair. Gradients are allowed for the clothes.
Pick colors within the Acloset Beige - Serenity Blue - Baby Pink color palette, but limit the number of hues to max 3 for all clothing items in one frame.
Use ovals and polygons

Onboarding Illustrations

These are the finalized illustration sets for the new onboarding flow. Jen, Mia, and Lois each tells their own sequential story.

New Tutorial Slides

We updated the new tutorial images to cover the latest features. The new images were to be incorporated in the onboarding flow and uploaded to the app store as well.
Before
After

The Onboarding Prototype

This is the rough prototype of how redesigned onboarding experience would look be.

Reflection

We should track the changes on the retention rate as the designs are implemented by the developers.
This project was one of the projects I’ve done for Acloset least intervened by the product manager and the engineers. Me and the other designer were solely on charge of deciding the illustration system and the styles. Thus the process could be more experimental and aesthetic-oriented.
We put a lot of effort on the thoughtful illustrations and avoiding the biases to certain group of people. The personas were designed to encompass different characters coming from the Millennial to GenZ. Aesthetic coherence and UI friendliness was also the points which we strived to achieve.
Thank you for reading If you want learn more about my work, don’t hesitate to contact me!