Nectar
Responsive Web and Mobile Design
Nectar believes that a good night’s sleep is the foundation for a better life. To make it even easier for their shoppers to customize their sleep experience I partnered with them to create a “Build Your Own Bundle” flow, providing customers with a convenient and personalized purchasing experience.
Project Overview
Timeframe
6 weeks
Information Architecture, Market Research, Responsive UX/UI Design, Prototyping
Contribution
Contracted UX/UI Designer working with Co-Founder, Creative Director, and Developers for Resident Home.
Team
Nectar is an award-winning online mattress company that believes anyone can become a morning person with the proper night’s sleep. They offer a collection of game-changing mattresses and bedroom essentials focused on quality materials at affordable prices.
About Nectar
Design a bundle flow that lets the user add items site wide, unlocking deals along the way and creating the perfect sleep set up tailored to their preferences. This user-friendly flow not only drives revenue for Nectar but also creates a more convenient, cost-effective shopping experience for the customer.
Design Challenge
The Current Experience
Inconvenient User Flow: The user has to toggle between each different category while shopping.
Pain Point
No way to visualize the combination of multiple selected products.
Limited bundling/upgrade options that don’t provide much information to the user.
Simplify the shopping experience by allowing customers to select and purchase multiple products in one transaction, rather than having to navigate to different pages.
Solution
A bundle flow would allow users to see what their items would look like in real time as they add/remove products.
Improve the customer experience by creating a more thoughtful purchasing flow that lets the user make informed decisions.
A More Personalized Way To Shop
UX Strategy & User Journey Mapping
In order to create a truly impactful and innovative bundle flow I started by considering what the entire customer journey, from initial consideration to final purchase, would look like. By taking this holistic approach, I wanted to create a flow that was intuitive and drove customer satisfaction and convenience. This step is essential in ensuring that the proposed design meets the needs of the customer and supports the business's goals.
Visual Design
Working Within An Existing Design System
It was important to work within Nectar’s existing design system in order to create a feature that felt aligned with the brand and consistent across all platforms. I collaborated closely with their creative director to make sure the new bundle flow provided a recognizable visual identity that was scalable and cohesive.
Design Exploration
Early Mid-Fi Iterations
One major design challenge was figuring out how to create a fluid experience that offered flexibility across a variety of Nectar’s products while considering the constraints of scalability. The feature had to be responsive across multiple devices and visually clean so as not to overwhelm the user.
Below are a few pros and cons for some early iterations that were used to inspire the final design.
Final Designs
Desktop & Mobile
Below is a feature walkthrough for the finalized designs for mobile and desktop. Certain key features are expounded upon in order to highlight the strategy behind the design decision and how it impacts the overall user experience.
Specific pagination elements were carefully considered during the design phase to signify where the user is in the bundling flow. Breaking the flow down into multiple steps creates a simplified/organized shopping experience for the customer while also adding helpful anchor points for users to jump to as needed.
A seamless multi-step approach
Responsive imagery helps customers visualize their purchase. This allows them to make more informed choices and tastefully adds a feeling of personalization to the experience.
Responsive imagery that updates as you shop
Each product card can be expanded to display more information about the item. Users can use this feature to quick shop, look through a gallery of images, customize colors, and more. This was a carefully considered part of the design that helps customers make more informed decisions without needing to exit the main user flow.
Helping customers make more informed decisions
As a user is perusing through products it can be easy for them to forget what’s already been added to their cart. All too often the shopping flow forces users to leave their current journey and hop over to a completely separate page in order to see the items in their cart. For this experience it was important to create a purchasing flow that felt completely seamless and fluid, which is why the addition of an expandable docked cart was so important. With one click, users can double check the items they’ve previously added and view their current total/savings without losing their place in the bundle flow.
Your shopping cart at your fingertips
Next Steps
One critical element to look forward to with this project is user testing. As the flow is developed and pushed live I’ll be able to collect user data and use those insights to improve usability and the overall user experience. Testing not only helps to identify pain points and usability issues that might have initially been missed but it also helps me understand the users and their priorities.
User Testing
Reflection
This project challenged me to think creatively about space-saving solutions, working within an existing design system, and higher-level information architecture structure. A big thank you to the entire Resident team and I can’t wait to continue iterating on this flow and improving its usability for their customers.
Tools: Figma, Adobe Photoshop, Principle
Lifestyle and product imagery provided by Nectar