renai
Creating an MVP E-Commerce Website With Google AI (Gemini) Integration to Streamline the Skincare Shopping Experience
Creating an MVP E-Commerce Website With Google AI (Gemini) Integration to Streamline the Skincare Shopping Experience
Context
Context
Driven II Develop presented a hackathon to build a website and e-commerce platform that included the following features:
• Content Management System (CMS): Easily update and manage website content without technical knowledge.
• Shopping Cart Functionality: Enable customers to browse products, add them to a cart, and complete the purchase process.
Driven II Develop presented a hackathon to build a website and e-commerce platform that included the following features:
• Content Management System (CMS): Easily update and manage website content without technical knowledge.
• Shopping Cart Functionality: Enable customers to browse products, add them to a cart, and complete the purchase process.
Problem | Navigating the Skincare Shopping Maze…
Problem | Navigating the Skincare Shopping Maze…
Imagine you are looking for a skincare product for your skin type and skin concern,
but you're overwhelmed by countless options and unsure which one is best.
This confusion often leads to frustration and ineffective choices.
Imagine you are looking for a skincare product for your skin type and skin concern, but you're overwhelmed by countless options and unsure which one is best.
This confusion often leads to frustration and ineffective choices.
Imagine you are looking for a skincare product for your skin type and skin concern,
but you're overwhelmed by countless options and unsure which one is best.
This confusion often leads to frustration and ineffective choices.
Project Overview
Project Overview
Timeline
6 weeks
Timeline
6 weeks
Timeline
6 weeks
Team
Name
1 Project Manager + 2 UX Researchers + 3 UX Designers + 5 Developers
1 Project Manager + 2 UX Researchers + 3 UX Designers + 5 Developers
Role
Ux Designer
Role
Ux Designer
Role
Ux Designer
Tools
Figma
Tools
Figma
Tools
Figma
↓ Keep Scrolling to See the Design Process ↓
Keep Scrolling to See the Design Process
Research | Uncovering Skincare Online Shopping
Struggles
Research | Uncovering Skincare Online Shopping Struggles
The research team aimed to uncover users':
• Skincare concerns
• Routines
• Product preferences
• Trust in AI for recommendations
The research team aimed to uncover users':
• Skincare concerns
• Routines
• Product preferences
• Trust in AI for recommendations
Research Insight
Research Insight
Users seek effective, affordable skincare from trusted sources
Users seek effective, affordable skincare from trusted sources
Data-driven Decisions
Data-driven Decisions
Leveraging Google's AI, Gemini
Leveraging Google's AI, Gemini
User Personas
User Personas
To better understand Renne’s audience, we created two user archetypes that guided our design decisions and ensured the experience addressed diverse needs and preferences.
To better understand Renne’s audience, we created two user archetypes that guided our design decisions and ensured the experience addressed diverse needs and preferences.
The Efficiency Seeker
The Efficiency Seeker
Always on the move, he values convenience and quick, personalized skincare solutions, embracing AI to save time and simplify choices.
Always on the move, he values convenience and quick, personalized skincare solutions, embracing AI to save time and simplify choices.
The Cautious Researcher
The Cautious Researcher
Tech-savvy and detail-oriented, she has sensitive skin and relies on reviews, comparisons, and social media to find safe, effective products.
Tech-savvy and detail-oriented, she has sensitive skin and relies on reviews, comparisons, and social media to find safe, effective products.
User Stories
Since we were in the initial phase, the team wanted to prioritize the following features:
Onboarding with a Skincare Quiz
Utilize renai's AI, Renne: Help members add/remove products from their subscription
Landing & Product Page
Guest & member checkout
We developed user stories to encompass the most common journeys on an e-commerce platform, ensuring that Renne's functionality would be seamlessly integrated into the user experience from the outset.
As a user I want to:
The checkout process user flow
User Flow
User Flow
Visualizing User Steps, key user flows were created. I personally took ownership of mapping the user flows for checkout and product discovery, ensuring that Renne’s AI recommendations integrated seamlessly. My contributions shaped the navigation and checkout experience.
Low-Fidelity Exploration
Low-Fidelity Exploration
Sketches
Sketches
My team and I brainstormed concepts based on discovery insights and current trends, and sketched ideas for the landing page and Renai’s AI, Renne.
We debated whether to place the chatbot on a separate page or integrate it into the search bar, ultimately choosing the search bar for its accessibility and ease of use.
My team and I brainstormed concepts based on discovery insights and current trends, and sketched ideas for the landing page and Renai’s AI, Renne.
We debated whether to place the chatbot on a separate page or integrate it into the search bar, ultimately choosing the search bar for its accessibility and ease of use.
Product discovery wireframe
Product discovery wireframe
Wireframes
Wireframes
We finalized the mid-fidelity wireframes for the user flows created in the previous stage, and I took ownership of transferring two key flows, the product discovery and checkout process, into medium-fidelity wireframes.
We finalized the mid-fidelity wireframes for the user flows created in the previous stage, and I took ownership of transferring two key flows, the product discovery and checkout process, into medium-fidelity wireframes.
Product discovery wireframe
Checkout wireframe
Landing page wireframe
Landing page wireframe
Landing page with shopping cart wireframe
Design
Design
Branding & Style Guide
Branding & Style Guide
After finalizing our medium-fidelity wireframes, we shifted our focus to establishing our brand identity by defining our color palette, logo, typography, and component library. Some parts of it can be seen below:
After finalizing our medium-fidelity wireframes, we shifted our focus to establishing our brand identity by defining our color palette, logo, typography, and component library. Some parts of it can be seen below:
High-Fidelity Design
High-Fidelity Design
Once the foundation of our design system was established, I began incorporating brand colors and typography into our final designs. To better refine our design language, we created two Design of the landing page.
Once the foundation of our design system was established, I began incorporating brand colors and typography into our final designs. To better refine our design language, we created two Design of the landing page.
Design Exploration 1
Design Exploration 1
This design explores a futuristic and minimalist aesthetic for a skincare e-commerce website leveraging AI technology. The design aims to reflect both the sophistication of AI and the user-friendliness of a simple interface, creating a seamless shopping experience for skincare customers.
This design explores a futuristic and minimalist aesthetic for a skincare e-commerce website leveraging AI technology. The design aims to reflect both the sophistication of AI and the user-friendliness of a simple interface, creating a seamless shopping experience for skincare customers.
Design Exploration 2
Design Exploration 2
As renai is a third-party retail application, our team focused on featuring promotions, interactive product cards, blog articles, and additional features.
We incorporated subtle prompts to encourage users to engage with our AI function, Renne, while empowering them with the choice to opt in or out.
As renai is a third-party retail application, our team focused on featuring promotions, interactive product cards, blog articles, and additional features.
We incorporated subtle prompts to encourage users to engage with our AI function, Renne, while empowering them with the choice to opt in or out.
Final Direction
Final Direction
Following team discussions, we combined design elements from both designs, which merges the familiarity of a third-party eCommerce platform with the innovative features of an AI-driven platform.
Exploring our creativity, We created this curved page indicator.
Following team discussions, we combined design elements from both designs, which merges the familiarity of a third-party eCommerce platform with the innovative features of an AI-driven platform.
Exploring our creativity, We created this curved page indicator.
Design Iteration
Design Iteration
After consulting with developers, we learned that implementing the curved page indicator wasn’t technically feasible. This prompted another iteration, and we chose to use a simpler, more practical page indicator instead.
After consulting with developers, we learned that implementing the curved page indicator wasn’t technically feasible. This prompted another iteration, and we chose to use a simpler, more practical page indicator instead.
Final Solution
Final Solution
Renai is a skincare eCommerce platform where users can purchase, compare, and subscribe to products. Its AI feature provides personalized skincare advice, routines, and subscription management.
Jump to 9:30 of the video below to see the prototype in action.
Renai is a skincare eCommerce platform where users can purchase, compare, and subscribe to products. Its AI feature provides personalized skincare advice, routines, and subscription management.
Jump to 9:30 of the video below to see the prototype in action.
Reflection & Takeaways
Reflection & Takeaways
Developers' Early Engagement:
Recognizing that not every design translates perfectly into code, I learned the value of close collaboration with developers from the outset. This early engagement ensures designs remain technically feasible and streamlines both the design and development process.Time Management:
Reflecting on our project, I recognize the need for more effective time management. Prioritizing tasks and incorporating prototyping and usability testing would have further strengthened our final product.
Developers' Early Engagement:
Recognizing that not every design translates perfectly into code, I learned the value of close collaboration with developers from the outset. This early engagement ensures designs remain technically feasible and streamlines both the design and development process.Time Management:
Reflecting on our project, I recognize the need for more effective time management. Prioritizing tasks and incorporating prototyping and usability testing would have further strengthened our final product.
Thank You for Reading My Case Study!
Thank You for Reading My Case Study!
Want to work with me? Feel free to contact me!
Email: faranak.vn@gmail.com
LinkedIn: https://www.linkedin.com/in/faranak-vn/
* All illustrations were sourced from Storyset.com and were modified by me
Want to work with me? Feel free to contact me!
Email: faranak.vn@gmail.com
LinkedIn: https://www.linkedin.com/in/faranak-vn/
* All illustrations were sourced from Storyset.com and were modified by me