Where local art meets the digital world.
Pushing the boundaries: Expanding local art beyond the studio to transform Bay-Made’s website for online shoppers.
Timeline
2-Week Sprint
Team
Katelyn Johnson
(solo)
Tools
Sketch, Invision
OptimalSort
Whimsical
OVERVIEW
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.
Assumptions
I was working with a set of assumptions to build the framework for this redesign sprint.
My conceptual client, Bay-Made, is a small, local boutique shop that has set themselves up to deliver products to customers who purchase online orders.
Additionally, 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.
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.
From there, I defined our user’s 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.
Which determined our design 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
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 methods. 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.
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-cart sorting to define Bay-Made’s products, services, and all other information.
This approach allowed me to properly organize all content into its respective area, specifically focusing on the global navigation. After adjusting the categories from the open card sorting results, I implemented the closed card sorting to gain better insight into the mental models for the way the users categorize each product.
The results were incredibly validating and there was very strong alignment in the mental models of users across the board.
I finalized my multi-step process regarding Information Architecture in an excel document.
The structure of the shoppable dropdown menu:
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.
The Design of the shoppable dropdown menu:
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 to help visualize the taxonomy for Bay-Made’s information architecture and bring it all together for the global navigation.
STRUCTURE
Of the global navigation.
DESIGN
Of the global navigation.
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.
Aesthetically 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
Here are two video walkthroughs of my hi-fi 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.
