Giving users the ability to customize products using a digital interface
Expertise
Team
Deliverables
Figma File
View File.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.
Research
User Interviews
I interviewed 6 users who might represent our target audience and had an interest or history of purchasing dog treats. It was important for me to include users of different genders, races, technological abilities and those with physical disabilities in order to actively represent a wide variety of perspectives. I wanted to understand why people purchase treats, their biggest pain points in that process, and if/why personalization is important. I asked the same 5 questions remotely via video chat to the participants. The qualitative aspect of asking questions in real time allowed me to ask follow-up questions and gain a deeper understanding of the participant’s motivations. This was important as this was a fresh build of a brand new concept.
“It's more personal, its not just a thing it’s your thing, it means something, of course the dog doesn’t care but in your mind you feel like you’re doing this special thing for the animal you love”
“I ordered something personalized and it didn’t look like how I expected when I got it. That was pretty frustrating.”
Empathy Map
Organizing the interviews into an empathy map allowed me to identify themes that consistently arose in our interviews. I recognized two common themes: an emotional attachment to feeling ‘special’ and understanding the quality of the treats.
Personas
Creating two hypothetical users that represented the user’s biggest pain points and goals allowed us to compartmentalize the biggest problems to solve as well as have a guiding light so that our solutions remain focused on our users.
User Stories and Problem Statements
I developed two user stories that tied their goals to the benefit they would receive from having that goal solved. Creating two problem statements gave us tangible problems to solve.
Competitive Audit
I wanted to find companies that offered a similar customized treats to see what features already existed in the marketplace and determine potential pain points that we could solve with our product. I also wanted to find indirect competitors that served the same audience but with a different item.
Ideation
User Journey
In order to establish what the users might do in order to attain their goals, I mapped the user flow in a unique way by mirroring user emotions and actions with potential features. It was important that I establish the emotional experience of the users as much as their tangible actions. This was a new product and so I wanted to put myself in their shoes and observe how they might react to certain features or at certain stages of the purchasing process. These dips and peaks in emotion told me where to focus my attention when creating my designs.
Information Architecture
Having established the main touch points and user actions, we used that with the possible solutions to map out what pages the site would need to include to allow for those user actions. I used a hierarchal model to establish main navigation and the core pages.
Ideation
With a list of potential features and having a good understanding of our users goals and pain points, I moved into the brainstorming phase and started ideating on solutions. I created a list of How Might We questions to ensure I wasn’t trapping myself in a box and considered a variety of ideas.
HMW create a place for Thiago to feel special within the app?
HMW make the customization process the most efficient part of the experience?
HMW make opening a boring cardboard box the most exciting thing ever?
I moved into idea generation by quickly sketching out a number of possible features based on those questions.
.jpg)
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!)