Onboarding with Flavor:
Designing a delightful onboarding experience for a grocery delivery app
My Role
This was a take home design challenge for a UI animation position. I designed all UI elements and built the prototype.
Timeline: 2 days
Year: 2024
Tools: Figma, Photoshop, LottieFiles, Flaticons (for illustrations and animated icons)
Project Summary
Onboarding is the app's first impression—think of it as meeting a user for the first time. Design it to be memorable, not just a quick setup.
User onboarding guides new users through the app’s core features, helping them get started smoothly. It’s crucial for retention, as a strong first experience can determine whether users stay or leave.
Key elements of in-app onboarding include:
Simple sign-up flow
Turn on location sharing for efficiency
Product tour or key feature highlights
Objective
Design the sign-in and onboarding experience for a grocery delivery app to drive online orders and improve user engagement. Use animation and transitions to encourage users to interact with the app and introduce key features.
Studies show that 86% of customers are more likely to stay loyal to an app when it offers a good onboarding experience and continuous education, while a poor user onboarding can lead to a significant drop-off of 40% to 50% in user sign-ups.
Research
Analyzed popular grocery delivery apps like Instacart, Amazon Fresh, and Walmart Grocery to understand best practices in sign-in and onboarding experiences.
Competitive Analysis
Design and Functionality
Wireframes
Wireframes were created as a starting point with the ability for me to adjust as needed.
High-Fidelity Comps
Design Decisions:
Adopted a clean, minimalist design
Prominent call-to-action button for sign-in and sign-up options
Sign-in screen
Visual Elements:
Brand colors and logo
Modern typography for readability
Intuitive placement of text fields and buttons
Onboarding Experience
Design Decisions:
Implemented a two-screen onboarding flow to introduce key features:
Welcome screen with brand introduction
Feature highlights (e.g., easy ordering, fast delivery)
Ensured easy access tab bar to main features like shop, cart, and orders
Visual Elements:
Brand colors and logo
Modern typography for readability
Intuitive placement of text fields and buttons
Built an interactive prototype in Figma to simulate the user flow from sign-in to the onboarding screens and landing page. The prototype included all interactive elements to demonstrate the seamless transition between screens.
Interactive Prototype
Presentation
Created a presentation deck to showcase the design process, decisions, and final deliverables
Prepared to explain the rationale behind each design choice, the usability testing process, and how feedback was incorporated
Results
Feedback
Positive feedback on the clean, modern design and intuitive user flow
Appreciated the thorough research and user-centric approach
Constructive criticism on minor elements I didn’t have time to implement, such as a “skip” option during onboarding
Backlog and future considerations:
More flushed out design component system
More animation around adding to cart, special marketing deals (animated icons)
Social logins
Conclusion
This design challenge showcased my ability to critically analyze, design, and prototype a user-centered solution for a grocery delivery app. The final deliverables not only met the assignment requirements but also demonstrated a thorough understanding of user needs, design principles, and iterative improvement processes.