Overview
UX/UI Design
The Challenge
Discovering Where Efficiency and Creativity Intersect
For this conceptual project, my challenge was to create an e-commerce presence for Bay-Made’s current website, while blending efficiency and creativity throughout the customer experience. With limited resources and time, it was my responsibility to ensure the target user could efficiently purchase a product on Bay-Made’s e-commerce site, all while keeping the user inspired throughout the process.
The Assumptions
I was working with a set of assumptions to build the framework for this redesign sprint.
Bay-Made, a small, local boutique shop, has set themselves up to deliver products to customers who purchase online orders.
The target user has been pre-determined as a “Busy Buyer”, where efficiency is key.
They will abandon their purchase if the checkout process takes too long; therefore, they need something simple, quick, and efficient.
The Outcome
A shoppable website with a search function and quick-add feature for an efficient shopping experience.
A streamlined checkout flow for increased transactions.
Role
UX/UI Designer
Timeline
2-week sprint
Team
Katelyn Johnson (solo)
Methods Used
Business Analysis
User Analysis
Heuristics Evaluation
User Flows
Competitive Task Analysis
Feature Inventory Analysis
Competitive Layout Analysis
Comparative Analysis
Feature Prioritization
Information Architecture
Card Sorting
Usability Testing
Site Mapping
Prototyping, Iteration
Understanding user’s needs
Online shoppers want to support their local businesses and artists around the Bay Area, but they want to experience a streamlined process for finding and purchasing Bay-Made’s products.
Understanding Bay-Made’s goals
Bay-Made is ready to expand their brand into the digital world, but they want to ensure their customers are satisfied online just as they are with their in-store experience. They want customers to feel inspired throughout their experience. They want to provide an easy, aesthetically appealing e-commerce experience for their customers.
The Problem
Currently, our target user…
Does not have an efficient way to search for the product they want to buy
Has to sort through irrelevant information to add a product to their cart
Abandons their purchase at checkout because of the inefficient, lengthy process it takes to complete the purchase
Our target user doesn’t have time for this type of shopping experience, so they leave feeling irritated and unsatisfied.
The Solution
I believe…
Optimizing product searching with easy navigation and a search bar
Incorporating “quick-add” and progress bar features
Refining the auto-fill for the checkout process
…will remove any current friction in the shopping experience from start-to-finish.
By improving efficiency for our target user, this will decrease abandoned carts and increase completed payments.
Utilizing e-commerce real estate
Identifying areas of opportunity to incorporate Bay-Made’s products online.
I wanted to understand how Bay-Made’s current home page could better utilize its real estate to establish an e-commerce presence, so I conducted a competitive layout analysis. Keeping the target user in mind, the home page is prime real estate to communicate to users about a variety of topics, but most importantly, how to shop their products.
I created block-level wireframes to compare Bay-Made’s current home page to those of their competitors, who take advantage of their home pages for optimizing shoppable features and other e-commerce elements. Here’s what I found:
Bay-Made
Bay-Made’s current version of their home page isn’t utilizing this space to maximize the user’s efficiency of browsing and shopping for products.
Competitor 1
This e-commerce site utilizes traditional conventions to set up its home page and optimize it for the user’s online shopping experience, providing opportunities for their users to shop for products immediately.
Competitor 2
From this layout, it’s apparent this company utilizes its home page real estate to provide multiple options for its users to engage with the company’s products online. They take advantage of the space given to communicate their brand and services at the user’s first glance.
With the completion of this layout analysis, it became clear that Bay-Made’s current version of their home page provided many opportunities to add e-commerce elements that better catered towards our target user to shop their products online quickly and efficiently. This analysis guided the feature prioritization down the line to ensure specific e-commerce elements, such as a search feature, were being implemented in the design to cater to the users’ needs.
Discovering Bay-Made’s products
Defining information architecture to identify content and confirm its placement throughout the website.
I knew an important feature for our target user would be to have the ability to quickly access content; I decided to take inventory of Bay-Made’s content via their social media platforms to create a shoppable global navigation. With this collected content, I conducted a series of open and closed card-sorting via OptimalSort to define Bay-Made’s products, services, and all other information.
First, I labeled and categorized all products into their respective groups and made these assumptions based off of my own personal mental model:
However, I needed to test my assumptions. I conducted open and closed card-sorting to gain insight into how others label groups and categorize products based on their mental models, and find trends that either confirm or debunk my assumptions.
Results
Dark blue = 67-100% match,
Light blue = 50% match,
No color = 0-49% match
This data set from OptimalSort indicates incredibly strong alignment between the mental models of users across the board, regarding the categorization of products into labels, which were previously validated from the open card-sorting results.
This approach allowed me to adjust my original assumptions by pulling this data from the OptimalSort results and properly organize all content into its respective area, specifically focusing on the global navigation.
Structure
The validation gained from these card-sorting techniques allowed me to continue forward in the design process and begin designing the e-commerce elements in Sketch to visually represent this information.
Design
Site-Mapping for ultimate clarity
Taking the remainder of card sorting data to bring the global navigation all together.
Card-sorting allowed me to not only properly categorize products available for sale, but it also enabled me to confidently create a global navigation that catered to the users mental model. I created a site map via Whimsical to help visualize the taxonomy for Bay-Made’s information architecture and bring it all together for the global navigation.
Structure
Design
Designing the solution.
After completing a series of research methods and establishing a framework in which to move the process forward, I provided myself with enough information to begin validating and designing the solutions.
Creating Wireframes
I began creating Lo-Fi wireframes to design the building blocks of each page. From there, I upped the fidelity to Mid-Fi, with the goal of testing this on users. The last step was designing Hi-Fi wireframes with the proper context to get the full-feel for the redesign.
Guiding the user’s attention
Moving the user through the home page by applying Activated Composition Space methods.
An individual’s eyes naturally read from left to right, and top to bottom. I kept this concept at the forefront of my design decisions for the home page. Keeping our target user in mind, we want to help them gain information quickly by guiding them towards it efficiently, all while keeping the creative elements alive. I combined imagery and information to successfully guide the user’s attention.
Activated composition space
You can see I positioned the “Shop the Favorites” and “Shop Now” button compositionally to guide the user not only to the call-to-action button, but also to the arrows indicating there are more options to choose from.
Optimizing the checkout flow
Incorporating a progress bar into the checkout flow to optimize efficiency navigating through the process.
Knowing my target user will abandon their purchase if the checkout process is too lengthy or unclear, I prioritized this feature in my design solution to ensure the user experiences a streamlined checkout flow. I designed a progress bar that clearly states which step the user is in, as well as allowing them to move freely between the steps if they need to quickly adjust information.
Evolution of the Progress Bar
The final product
Two video walkthroughs of my prototype.
Video 1 - Shopping Experience
This video specifically showcases our target user entering the website and either using the global navigation or the search bar to find the products they’re looking to purchase quickly and efficiently. You can see the Quick Add button being used as well. Keeping in mind our target user isn’t interested in price or product information, we want to get their products into their cart as quickly as possible.
Video 2 - Checkout Flow
This video specifically showcases the redesigned checkout process and its seamless flow utilizing autofill and progress bars. Keeping our target user in mind, I designed this to allow them to easily shuffle between steps if they need to quickly review or adjust information without disrupting their progress.
Usability Test Results
“This feels very aligned with everything that I’m used to.”
“I can tell by the layout that it’s familiar to me and it looks more professional.”
Next steps
If I were to continue this project, I would:
Test high-fi prototypes with more users
Filter feature
Find opportunities to increase white space
Heuristics Re-evaluation
Test the new website against the same set of tasks in a Heuristic Evaluation to clearly identify improvements & areas that still need work
Reflection
This project opened my eyes as a designer by seeing how valuable research and data is to properly validate my design decisions moving forward. I realized how my confidence in my design decisions is truly built off of the target user’s needs, motivations, and behaviors that are discovered through research.
I also felt I really advanced my UI design skills through this project by building out a variety of wireframes (landing page, product page, search results page, checkout flow, confirmation page). I realized that by incorporating white space and the “less is more” approach, I was pleased with the simplicity of my designs.
However, I do also feel that there is more work to be done in terms of increasing simplicity. My hi-fi prototype includes images that aren’t from the brand itself; I feel that by incorporating branded photos that have consistent design guidelines, this would bring the project to another level of cohesion throughout the experience.
Given more time, I would’ve chosen to refine the checkout process on the e-commerce design. The version I created can fulfill the target user’s needs (through the autofill feature), but I would’ve liked to focus more on the checkout process when a user already has an account and is logged in to better visualize how quickly a purchase can be made in just a couple of steps.
Project completed April, 2020.