Scalable Ecommerce Store for a Growing Small Business
Project Summary
RoxyCess Creations is a small business selling trendy accessories at local vendor markets. I collaborated with the brand owner to design an e-commerce experience focused on creating trust among new website visitors by prioritizing information architecture and creating a seamless checkout experience.
My role
I was the Sole UX/UI Designer throughout the project cycle. I planned the roadmap, created the user flow, gathered research, and created the wireframes and prototypes. Additionally, I collaborated with the brand owner to brainstorm ideas and problem-solve for challenges.
The Challenge
How can I create a convenient and trustworthy experience for new and existing customers of RoxyCess Creations? Although there’s high demand for people wanting to support small businesses, those who primarily shop online don’t know where to go and have reservations about shopping with unknown retailers online.
The demographic for this project was Gen Z and young Millennials. The main requirements were building trust and creating a checkout experience. Users need to see product reviews, meet the founder behind the brand, and discover products– all while having a seamless and secure checkout experience.
Solution
I prioritized the information architecture and incorporated areas where I could build trust with new users by highlighting the founder’s story and product reviews. Once I had enough data on the users’ pain points and defined the goals, I created a prototype of the home, product page, and checkout flow while reflecting the brand’s approachable values.
Project Scope
Design an ecommerce responsive website
Client
RoxyCess Creations
Tools
Figma
Project Duration
November - December
4 Weeks
Empathize
Starting with Research
The SBA defines a small business as having less than 1500 employees. According to the U.S. Small Business Administration, the vast majority of businesses in the US are small businesses. In fact, there are 33.2 million small businesses in the United States.
According to a recent survey by GoBankingRates, one of the top reasons why people want to support local small businesses is the desire to support local communities, which shows there’s high demand for shopping small.
Competitive Analysis
To better understand the landscape of the handmade drinkware space, I began researching my client's competitors by selecting brands that had similar products and were also small businesses.
Feature Competitive Analysis
The most common features among the competitors were a colorful website and an eye-catching hero image on the home page. Some of the features lacking were a Shop All tab and a cohesive background for their product pictures.
Visual Competitive Analysis
My next step was creating the Visual Competitive Analysis with two of my client’s strongest competitors. Some of their strengths were colorful website design and clear product descriptions, while their weaknesses were inconsistent picture sizing and a missing About page.
Lean UX
I began strategizing the business problem and continued ideating on ways to bring value to new and existing users. One of the challenges was showcasing the variety of products my client offers while finding opportunities to build trust with new visitors. One way I found to build trust was to share the story of the brand founder to connect with visitors and increase conversion rates, and design an approachable experience for our Gen Z and young Millennial users.
User Interviews
What do users want and need? What are their online shopping habits?
After seeing the competition in the handmade drinkware space and narrowing down my goals, I wanted to understand users’ pain points and motivations surrounding their online shopping habits and what they like about their favorite retailers.
Analyzing The Data: Affinity Diagram
Themes & Insights
How could I create trust among new website visitors and design a seamless checkout experience?
User Persona
Who are our users?
I created my user persona, Olivia Meza, a young millennial who wants to shop locally more often. She values design and brand aesthetics, and some of her pain points are poorly organized websites and low-quality products. I kept my user persona in mind as I continue with my design process.
Define & Ideate
User Journey Map
I created a User Journey Map because I wanted to understand how the user persona would behave and discover my client’s brand.
I wanted to show the future state of Olivia’s journey from discovering Roxycess Creations at her local vendor market to later ordering online. I've also included the different design opportunities at these stages where we could take advantage, such as ways to highlight our founder’s story and her background with the vendor market community. I learned through the user interviews how important it is to have an organized website and prioritize ways to legitimatize my client’s brand to build trust.
Business & User Goals
How can we reach business and user goals?
After meeting with my client, we discussed the goals for her business and iterated on the Problem and Hypothesis Statement together. We decided to highlight the demand from Gen Z and Young Millenials to support small businesses due to my client’s experience with her young customers constantly asking her if they can shop her products online.
With a better understanding of how to approach our business problem and how to serve our users, I created the MVP Statement to begin working on how to deliver the features that would fulfill our problem statement.
Problem & Hypothesis Statement
MVP Statement
Information Architecture: Site Map
How can I best organize the website for new and returning users?
On the Home page, users can discover my client’s products by navigating through the various collection pages I designed to increase opportunities for conversion. For new users looking to browse, the Best Sellers and Shop All tabs are a convenient way to discover their products. I also created an About and Events page where users can learn about the founder and her engagement with the local vendor market community.
Although I wasn't able to finish designing all the pages I wanted due to time constraints, this site map can serve as a guide for future iterations and for my client to maintain her website organized.
Design
Low Fidelity Wireframes
Organizing and Prioritizing Information
After gathering all the necessary data, I created a Low Fidelity Wireframe to show how I would organize the website and started sketching the checkout flow for my prototype.
Testing Results
I tested the wireframes with the same users I interviewed and received the following feedback:
Add a “Create an Account” feature at checkout.
Change the header to one hero image.
Include an “Add to Cart” button under each product on the Shop All tab to increase conversion and accelerate the checkout.
Mid Fidelity Wireframes
I created the Mid-Fidelity Wireframes to include the feedback I received on the Low-Fidelity Wireframes. I began iterating on the Home page and added collections like Shop All and Best Sellers for new users to navigate the website and discover new products. I then focused on the Product Page and brainstormed where to add the reviews and increase trust. Then I shifted my focus to the checkout flow as I wanted to make a "Create an Account" feature for users interested in signing up for an account.
Testing Results
When I tested the Mid-Fidelity Wireframes, my goal was for users to complete the checkout flow. About 80% of users were confused by the layout of the Guest Checkout feature and were unsure what to do when they first encountered it.
This feedback guided me to change this section by creating two separate boxes (as opposed to one at the beginning). Additionally, I separated the Guest Checkout from the rest of the instructions. This change visually improved the checkout experience, and I received positive feedback when I tested it.
Moodboard
What do we want our users to feel as they browse the RoxyCess Creations website?
Since my client’s best-selling products are her glass cups, I thought it would be fitting to incorporate a “french coffee shop” aesthetic into her website. I began drawing inspiration from pastries and iced coffee and created a mood board that felt playful and inviting.
UI Kit
I started designing a style tile for my client and showed her the typeface, colors, and some of the elements I had created for her brand. She gave me feedback on the product page, and I later iterated on some of the product description elements. I redesigned the existing logo as the old one was difficult to read, and I wanted something that would better fit the brand's new aesthetic.
We wanted the UI to be fun and colorful, and overall approachable. My client was happy with the results and gave me positive feedback.
High Fidelity Wireframes
Designing with Details
Features
How could I create features to build trust and increase conversion among new users?
Prioritized the Navigation Menu
I prioritized the information architecture on the header to make sure new website visitors didn’t feel overwhelmed with too many choices. To increase discovery, I chose to highlight categories like “Best Sellers” and “Shop All”. To build trust, I created an Events page and an About Me page for users to discover the founder’s story and her involvement with the community.
Incorporated Product Reviews
60% of the users I interviewed said reviews influenced their decision to make a purchase. Due to this finding, I added a preview of the reviews on the “Shop All” tab to incentivize discovery and included full-length reviews on the product page to increase conversion rates.
Incentivized Users to Create an Account At Checkout
Designed a checkout experience that incentivizes users to create an account. This feature aims for existing customers to checkout faster and to have them sign up for promotional emails where they can receive news about upcoming launches and promotions.
Prototype
Prototype
& Reflections
Reflections
Learnings & Next Steps
Based on the data, I found that although people want to shop from small businesses more often, they need to be able to shop from a well-organized website and be able to feel like they can trust the brand they’re shopping for-especially if it’s the first time they’re shopping there. This is why I prioritized information architecture and iterated on ways to build features that would build trust among new visitors.
If I had more time, I would’ve liked to fully design the About Me and Events page to elevate my client’s inspirational story and her involvement with the community. I would also like to design the account tab to show past orders, and a way to edit the account’s information.
