RINSE | E-commerce
RINSE is a mobile web e-commerce site that provides users access to sustainable eco-friendly Covid-19 customizable kits. Designed for users who are in need of everyday essentials at an affordable price using organically sourced materials.
Team: 1 Designer
Time Frame: 1 Week Sprint
My Role: Lead UX/UI Designer
Tools: Adobe XD, Sketch, Keynote and Miro
Objective: In a one week sprint identify a current user/consumer need in the market today. Create an e-commerce brand or service that can fulfill this need and develop the brand or service in the time allotted.
Framework
The RINSE framework involved a combination of several methodologies. The methodologies included Lean UX, Design thinking (IBM) and Hyper Island
Phase 1: Learn
The learn phase of UX design unpacks the brief, inspires us, and allows us to empathize with users and get to the heart of overlapping needs of the business and user, as a result solving a problem.
Competitive Audit
Survey
A survey can provide great insight to your users, audience, how they feel about your product and provide feature ideas. Demographics, pain points and needs will also be revealed in the survey.
Key Takeaways (We received 114 responses in less than 48 hours)
86% of surveyors w
ould prefer ordering a customizable COVID-19 items kit rather than a prefixed COVID-19 items kit.
61% of surveyors would
be interested in a specifically tailored bag for your COVID-19 essential items.
The 3 highest surveyed considerations when purchasing a product were quality of the product (99%), value of the product (76%) and sustainability of the product (67%).
1:1 Interviews
To gain perspective on potential RINSE consumers it was important to understand where they are currently purchasing Covid-19 preventative items, what essential preventative Covid-19 items they carry on their person on a daily basis and what they would expect to be offered by a brand like RINSE. By conducting 1:1 interviews with several different potential consumers it gave us the insight we needed for future development. Below are several quotes that stood out to us during the 1:1 interview process.
“ To be honest, I am having to find my Covid-19 preventative items online. Going on multiple sites to find the correct items to keep me and my family safe. I have a 5 year old little boy and finding the right options for him has been a little difficult.”
- Brandon Merchant
"When supporting a new brand it is important that the brand aligns with similar beliefs and values that I stand for. I am an environmentally conscious individual that believes sustainability and ethically sourced materials should be a standard met by all consumer goods.”
- Sylvia Robles
The two quotes above showed us two very important needs for potential RINSE consumers. A brand that provides essential Covid-19 preventative items on one designated site, for children and adults and to make sure that our brand aligns with the modern times. Consumers have become more aware of brands and their carbon footprint. Brands that promote their values and use of sustainable/organic materials make the consumers decision to support the brand much easier.
Phase 2: Define
The define phase of UX design identifies the goals, objectives, and strategy for the UXUI. During this phase you detail who your product users are and the journey they embark on and your what.
Persona
Now that we have done our research and learned about the habits of our potential consumers it is time to create our target audience. Personas are archetypical users whose goals and characteristics represent the needs of a larger group of users.
Low Fidelity task Flow - Select Kit
Another cost effective and time saving step is to draw out ideas of each page layout utilizing the concepts we identified in the learn and define phase. Following the Lean UX methodology, we were able to brainstorm through many iterations by listening to user input through testing.
RINSE - Sitemap
We digitized our sketches which became our blueprint of each page, working and iterating on the layout, features and elements.
Phase 3: Design
Taking what we’ve learned and defined, we transformed the ideas and results we received into many iterations of design through sketching, wireframes and mockups. We conducted many rounds of user testing to ensure success.
Sketches
The early stages of designing are always the most exciting. In the low-fi sketches we begin our early sketches of what our final product could possibly look like.
Wireframes
Now that we conceptualized our designs on paper it is time to create our wireframes. Developing multiple versions until we find our final layout.
RINSE Wireframes V4.0
Mood Board
RINSE Elements
The goal for RINSE was to provide users with clean and inviting aesthetic. Utilizing a soft palette to evoke cleanliness and comfort when navigating through our site.
RINSE - Final Mockup Homepage
Design System/Style Guide
Phase 4: Experiment
Test Plan
To ensure that the user flow down the sales funnel was seamless, we needed to solidify and gather measurable results through user testing. We created a plan of action that entailed a series of tasks to understand how our users would navigate through the flow. We also observed and listened to expressions and reactions of our layout design to ensure that it was intuitive and user friendly.
Interaction Design (IXD)
RINSE - Customize Kit Carousel Feature
A carousel feature adds an additional level of interaction for the user to help increase engagement and excitement while customizing their RINSE Kit.
RINSE - Checkout Flow
Following Luke W’s best practices, it was important to make sure there was proper spacing and left alignment on all field labels. Added a breadcrumb nav at the top of each page to provide the user step by step guidance to reduce any confusion during the checkout process.
RINSE - Customize Kit Flow
This interaction shows how the user would select their kit size, complimentary pouch and what it would look like if the user selected an item during this process. When an item is selected it will darken, indicating a selected state.
