Beehive Clothing Store
E-Commerce Redesign
Objective: Redesigning Beehive Boutiques Website for them will achieve increased sales, and convenience for customers to support local businesses. Ultimately improve the online shopping experience allowing customers to be successful and become repeat customers.
Role: UX Researcher
Tools Used: Figma, Adobe XD, Miro,
Role: UX Researcher
I began my research process with gathering information from users on how they interacted with the website in its current state.
​
Noting the key features users struggled with and why.
​
From there I drafted the teams interview questions.
Interview Process
​
We began interviewing people in our key demographic. Young women that enjoyed relatively upscale boutique style online shopping from the age 18-28.
​
While creating the interview questions, I kept in mind everything we needed to learn about the user and what would assist them in achieving our ultimate goal of improving the conversion rate for Beehive's E-Commerce.
​
Once our interviews were completed, we selected the questions that gave us the most feedback and created a survey to gather quantitative data.
Brainstorming, Empathy Map, and User Persona
Once the interviews were completed. I created a prioritization matrix to narrow in on the factors that would best benefit our customers and our client.
​
Followed by the creation of an empathy map. Categorizing the users pain points and joys, resulting in the creation of our User Persona. Developing from there a user scenario that laid out how our user were struggling with some of the key features on the site.
Card Sorting and Site Map
Once we identified and humanized our user we began the process of restructoring the website. I chose to begin with card sorting and site mapping.
​
Establishing the starting point for each deliverable to guide the team smoothly to our next step of establishing the user flow.
Available cards to sort from the original header and footer
Sorted Cards for the new header and footer menus
Final SiteMap
User Flow and Wireframe
For this project I chose to use the sitemap as the initial guide for the user flow.
​
Finally creating a user flow for a new feature BeeHive wanted to promote. The feature allows user on to create their own custom fashion boxes to be delivered directly to their home without users every having to go to a store.
During our research we discovered this feature was difficult for users to execute. They were unable to access the 'survey' mentioned in the sites instructions. Which users felt quote "was the most important part of a customized fashion box, my ability to indeed customize it." For our clients at BeeHive it was crucial to redesign the navigation of this feature.
UI Style Guide
The theme of Bee Hive as a fashion brand is very clear so we created mood boards around the theme already in place for the boutique.
​
From there we gathered Fonts, Hex Codes, and Images that best represented the brand and would translate well to our users.
Mood Board
UI Style Guide
Original BeeHive Homepage
(Before)
First UI Iteration of redesigned Home Page
(After)
Usability Testing
Once the UI was applied to our original wireframes. I created our clickable prototype for the team to use during usability testing.
​
My top three goals for usability testing were, is the user able to locate the fashion box on the home page? Are they able to get to the survey while creating the fashion box? Were they able to add the fashion box to their cart?
First Iteration
(Before Testing)
Final Iteration
(After Testing)
Final Iterations
Upon the completion of our usability testing. I finalized all interactions and updated the clickable prototype and made the site responsive.
​
Below are final iterations for web and the mobile redesign of the local Austin boutique BeeHive.
