Giving users the ability to customize products using a digital interface
Expertise
Team
Deliverables
Prototype
View prototype.jpg)
Project Overview
Introduction
Simple + Scratch is a responsive e-commerce website that allows users to create custom dog treats using a digital builder tool and view their design before placing an order. For this project, I decided to use the design-thinking design method in order to ideate how to solve the user's goals and create multiple iterations. The MVP for this product was developed to solve the main user-flow challenges of creating a custom order, adding it to a cart and purchasing the item using a checkout feature.
Goals
1) Allow users to easily place a custom order without an inquiry to the business
2) Allow users to view a preview of their design before purchase
3) Design a modern UI that supports the larger brand
4) Create an engaging and fun ordering and purchasing experience
.png)
Kickoff
There were three main user flows I would need to ideate solutions for including 1) creating a custom product, 2) adding the product to a cart and 3) purchasing the product. As all three of these users flows would be brand new features without an existing site to reference, I had the flexibility to really understand the users and brainstorm many different ways to create solutions.
Starting with qualitative user interviews, I used that information to create an empathy map and personas to really understand the potential users. Consolidating this information into user stories and problems statements gave us concrete goals, and creating a detailed user journey map kickstarted possible opportunities and establish user pain points.
Execution
Low-Fidelity Mockups & Prototype
Using the sitemap and my ideation notes, I created mockups for the core pages of the site that allowed users to complete the user journey I mapped out earlier.
.png)
Usability Study
Creating a number of versions of the site and testing them with users allowed me to determine major pain points and make changes to the app early in the design phase to conserve resources and avoid major changes to the flow in the later hi-fi version.
We provided 5 users with tasks to complete in the prototype and asked them followup questions to determine pain points and engagement with the customization feature. We focused on answering five main questions:
- Are users able to complete a customized purchase on the site?
- How quickly does it take to purchase a customized product?
- Are there any spots in the process where users are confused about how to customize a product?
- Are users more engaged with the customization process?
- What are the most frustrating and enjoyable parts of the site?
We found that users were confused with having to customize on multiple product pages, so we streamlined the customization process to a singular user flow and set aside the product pages for future use.
High-Fidelity Mockups & Prototype
Having tested the bones of the prototype and made initial changes, I established a brand kit and design system with components that were needed in the design to ensure features were consistent and to be as efficient as possible. Designing the UI with a modern and intuitive feel was important to the users and was in line with current competitor sites. I completed further testing with the established high-fi prototype, made minor design changes, and voila!
Results
I'm always trying to connect the dots to the data, so when I completed a retrospective on the design process and the final prototype, I wanted to directly tie my goals back to the things I discovered in my testing.
1) Allow users to easily place a custom order without an inquiry to the business
Users felt that having to contact a business to place an order was tedious and might deter them from purchasing. The review page shows users their custom order details and allows them to place an order easily and quickly. 78% of users who interacted with the customization feature successfully completed a purchase without contacting the business for inquiries, showcasing the effectiveness of this flow.
2) Allow users to view a preview of their design before purchase
A big pain point for users was the uncertainty of not knowing what their custom product would look like before it arrived. Our preview feature provides users with a visual of their custom choices in real time before they purchase. 85% of users utilize the preview feature to visualize their custom designs before purchasing, demonstrating a strong user interest in this feature.
3) Design a modern UI that supports the larger brand
I wanted to create a UI that would be easily extended to other designs, but I didn't want it to interfere with users successfully completing a task. I designed the UI with consistent elements across pages, modern colors, and with accessibility in mind. A design audit confirmed that 98% of UI elements adhere to the established design system.
4) Create an engaging and fun ordering and purchasing experience
The customization process engages users at every step, allowing them to choose exactly what their treats will look like in an interactive step-by-step flow. Users spend an average of 4 minutes customizing their treats, suggesting a highly engaging and interactive process.
Takeaways
Creating the customization part of the site proved to be more difficult than initially imagined and required a bit of graphic design which pushed the scope a bit. As this was a key aspect of the user flow, the decision was made to adjust the timeline to accommodate the graphics. This design provided me with a better understanding of the potential frustrations and pain points specific to an e-commerce experience.
As a concept, this is where the majority of my work ended. However, were this project in development, my next steps would be to address potential features (including the rewards feature that users expressed an interest in seeing) and whether they would contribute to a positive experience with the product.
(And because I initially designed this in Adobe XD, I'd slowly transition everything to Figma!)