Kiki's Beauty Supply
Establishing a deeper service by adding an e-commerce shopping feature to the website.
Overview
Who is
Kiki's Beauty Supply?
Kiki's Beauty Supply is a small, beauty shop located in the Randolph, Roxbury, and two locations in Dorchester. Their collection is a curation of weaves, wigs, makeup, nails accessories, hair products such as shampoos, conditioner gels etc.
SO WHAT'S THE PROBLEM?
Customers need a way to order beauty supplies online because they want a more convenient and easy way to buy products and see reviews.
Course
General Assembly -
User Experience Design Immersive
My Role
Part of research and development.
Took charge of the style guide & app aesthetics.
Timeline
2 weeks sprint
Tools Used
Optimum Sort, Typeform, Illustrator, Photoshop, Axure
My Approach
I conducted user research and ideated ideas from the results of my research result, implementing them into wireframes. I focused on building out the information architecture for the e-commerce site.
Research
Understanding
the Business
I wanted to understand Kiki's identity more by understanding their in-store atmosphere. I visited the store and spoke to their store representatives as well as some of the customers.
From observing and talking to the customers I discovered that the people who shop there are usually either in a rush or are trying to compare products.
Original Website
Browsing through Kiki's Beauty supply store's current website, it is minimalistic and structured it as a form of a blog. Most of their content is updating the site with current events and new
arrivals in shop.
Competitive
Analysis
I mainly focused on beauty stores that have an established e-commerce site.
I looked at:
-
What functions are important
-
Similarities and differences in functions/content
-
What are the common patterns in e-commerce sites
-
How much did they design for their brand vs. user experience
Survey
I focused on finding participants who have experience shopping at beauty stores in-person and online. I wanted to hear and compare their experiences in both realms.
18 Survey Responses
6 In-person/Phone Interviews
There were consistent comments about the shopping experience in-person versus online. Users have a memorable experience with beauty stores in-person, but overall, find online shopping to be the total opposite.
Interviews
After conducting my 6 interviews (3 in-person & 3 on by phone), I received similar feedback regarding their shopping process online, especially from stores that carry products similar to Kiki’s. I pulled out memorable quotes that would add to the discovery.
Quotes from users:
-
"I enjoy shopping online, it’s easier for me to compare reviews.”
-
"Sometimes, I can never seem to find what I’m looking for (in stores).”
-
“Yes to new products, oh and sales are even better.”
Potential
Target User
Tina Capers
-
Women
-
Age 23 - 50
Scenario:
Always looking for the best product and is constantly comparing reviews online.
She finds herself walking the aisles while viewing product reviews on here phone.
Thoughts & Reflections: RESEARCH
It was hard at first to get information on Kiki's. The employers had no information on the history and were not willing to give me a way to contact the owner.
I had to observe customers in order to build some, if any understanding.
The interviews there after helped me to shape my solution.
Design
Site Map
I built out a site map to understand the information architecture and place the
e-commerce where it logistically makes sense. Card sorting helped me understand how people think.
I used optimum sorting and asked general participants and participants that I interviewed to perform an open card sort test of product items from Kiki's Beauty Supply store. I narrowed down the categories from the open card sort to closed card sort and built the shop navigation from the final results of the closed card sort.
User Flows
Product Discovery & Check Out Process
Repurchase an order feature
Sketches
After, I then created sketches based on my ideas of the user flows.
_edited.jpg)
Style Guide
I added Kiki's logo on to the prototype to give it a recognizable feel and resembelance to the original website.
Prototype
& Testing
My main goal was to see if participants are understanding the flow and structure of the check-out process. I tested in Axure.
4 Usability Testings
2 Iterations
Most design changes were based on small little details that had to do with wording and placement of the buttons/information.
With my wireframes, I created a prototype in Axure.
-
Discover any navigation issues
Based on the findings from my testing, I created a medium fidelity prototype using Axure.
Thoughts & Reflections: DESIGN
I really enjoyed building the prototype in Axure. With the help of my sketches, I really was able to design and build an e-commerce platform for a website that would have benefited from having one.
Evaluate
For future iterations, I want to make this a high-fidelity prototype.
I would definitely rethink the "hero image" on the product page, make it smaller so that the items would have more importance. I would also rework the auto-delivery process to make it easier and somehow more user-friendly and test it.
Added feature to consider: An inventory status. If a product is the last item, creating a way to put it on hold for customers. Then eventually doing a purchase pick up. This in end creating customer retention.