Designing a user onboarding flow for an app

Client:

Beauty Swap-meet

Industry:

Beauty | Online trading | Consumer goods

Role:

UX designer | UI designer | UX writer

Output:

Content inventory | Wire frames | Visual design | Mobile first design

Tools:

Figma

Proto-

type

Context:

Beauty Swap-Meet is a product devised for the purpose of this case study.

The app connects beauty and skincare enthusiasts in a local area to each other, providing them with the ability to trade and exchange their surplus, opened, and slightly used beauty products with others who are interested in trying new items.

Users will be prompted to build personalized profile with information about their beauty preferences, skin type, and specific product categories of interest so that Beauty Swap-Meet can make better suggestions and match them with products that align with their preferences.

Design an onboarding flow that allows users to easily understand, sign up, input their preferences and start using Beauty Swap-Meet.

Principles:

User-Centric Approach
Place the user at the center of every decision and design element. Prioritize their needs, preferences, and usability throughout the onboarding process.
Simplicity and Clarity
Embrace a minimalist design approach that emphasizes clarity and simplicity.
Personalization
Provide opportunities for users to input their beauty preferences, skin type, and product categories to ensure personalized recommendations.
Engagement and Delight
Create moments of delight throughout the onboarding journey. Use micro-interactions, animations, and visuals to make the experience enjoyable and memorable.
Seamless Flow
Design a seamless and intuitive flow that guides users step by step, minimizing friction and confusion. Each step should logically lead to the next, ensuring a smooth transition from sign-up to using the app.
Community Building
Encourage users to connect and collaborate, enhancing the social aspect of Beauty Swap-Meet.
Ethical Beauty
Align with ethical and sustainable practices by encouraging users to swap and exchange products rather than discarding them. Promote responsible consumption and waste reduction.

Scope:

Create an onboarding flow, user registration and account personalization screens for a Beauty Swap-meet.

The onboarding flow will be divided into clear and sequential steps. Each step will guide users through the process, ensuring they understand how to engage with the app and make the most of its features.

Users will be able to easily sign up using their email accounts with a straightforward registration process designed to reduce friction.

Users will have the option to create personalized profiles by inputting their beauty preferences, skin type, and product categories of interest. This information will be used to tailor product recommendations.

Information architecture, content and visual design :

The onboarding screens were carefully sequenced to create a logical and cohesive flow. Users are introduced to the app's concept, guided through personalization steps, and encouraged to take action. I achieved this by implementing of the following design strategies:

Loading Screen with Product Logo
The onboarding experience starts with a loading screen showing the BeautySwap App's logo. Displaying the logo during loading sets the tone and strengthens the brand identity.
Content Chunking
Concepts are thoughtfully deconstructed into manageable content "chunks." Each screen centers on a distinct value proposition or action, preventing cognitive overload and facilitating users' comprehension of the app and its service.
Visual Cues and Progress Indicators
Visual cues offer users a sense of progress during their onboarding and registration. A progress indicators inform users of their current step and the remaining ones, enhancing their sense of orientation and navigation.
Call to action buttons show in as inactive when there is task completion pending. As users fill in form fields, these CTAs transition to active states, signaling the availability of the next step and offering a sense of accomplishment.
As users interact with the circular buttons they undergo a transformation into a selected state. This change immediately confirms the user's choice has been registered and acknowledged by the app.
Strategic Placement of Calls to Action (CTAs)
Throughout the journey, CTAs are strategically positioned to prompt users to act in response to the information they've encountered. These CTAs are placed intuitively and contextually, making them inviting and relevant.
Visual Design
Each screen's visual elements were crafted to aesthetics and branding guidelines. Unique beauty product illustrations on each screen add visual allure while preserving a cohesive visual identity.

Click through the onboarding experience

Click through the account registration experience

Click through the personalization experience

Prototyping:

Using Figma's prototyping tools, I built an interactive prototype to simulate the user's experience. This allowed me to test the flow's coherence and identify any usability issues.

Final thoughts:

While the current design offers users a visually clear and concise selection of options, the constraint of accommodating only a certain number of options within the personalization screens button configuration may limit the breadth of choices available to users.

If I were to revise that part of the design I might consider expandable menus or a scrolling interface to accommodate more personalization options.