Acloset Onboarding Experience Renewal

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

- Increasing the third-day retention rate of the people who have installed our app by more than 20%

Rough ideation → Storyboard → Design the new onboarding UX Flow → Invent the illustration system → Finalize UX writing → Finalize UI design → Finalize the illustrations

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

Email Me hyj5138@gmail.com