Case Study: the Kelco Store E-Commerce Redesign
Contextual inquiries with crafty people.
PROJECT BRIEF
The objective: Design a clickable (interactive) prototype around an online shopping experience, based on a sample selection of 100+ products. The design should meet the goals of the users, the business, and the brand, and should be tested by users and follow information architecture heuristic best practices.
Methods and Skills: User interviews, contextual inquiry, competitor analysis, personas, sketching + storyboarding, information architecture, wire framing, site mapping, prototyping with Sketch and InVision, usability testing.
Deliverables: Overview of the research process, competitor analysis, problem and solution statements, personas, storyboard or scenario, sketches and evidence of the ideation process, review of design iterations, wireframes, and an interactive prototype. The design should meet the goals of the users, the business, and the brand, and should be tested by users and follow information architecture heuristic best practices.
Timeframe: Two week design sprint.
Role: Sole researcher and designer.
View a recorded demo of the final interactive prototype:
THE RESEARCH PROCESS
Contextual Inquiry & Competitive Analysis
I conducted contextual inquiries with several self-described crafters, and I did a competitive analysis based on places they mentioned they liked to shop for craft supplies, as well as through a Google search.
While there were many things that users liked about the current site, there were also a number of pain points:
The original Kelco Store home page.
A good example of insight that I received through UX research was that the search bar function worked well on the Kelco site, but the way in which search results were displayed made it difficult for users to read and understand. Doing a competitive analysis to see how Kelco compared to other online craft supply sites helped to demonstrate the importance of UI conventions and information architecture in designing good experiences for users.
SaveOnCrafts, a competitor site's search results:
Kelco's search results page:
IDEATION AND PROTOTYPE DEVELOPMENT
Sketching & Wireframing
I began the ideation phase by using an affinity mapping technique to organize the key research insights, and then it was time to start making rough sketches to solve the problems I had identified.
Early sketches.
I tested a hand-drawn paper prototype with a few users, iterated on my design based on their feedback, and then used Sketch to create a digital prototype.
First digitized prototype.
TESTING & ITERATION
Usability Testing
Of course, one of the most important steps is testing prototypes with actual users. I got important feedback on the sizing of the header on the search results and product pages (I made it a little smaller), the wording of the “suggested items” on the product page (I changed it to “You might also need these for your project” to be more conversational and helpful to the user), and inverting the placement of the video content and the featured items on the home page, placing the video content higher on the page in order to be a greater help and guidance to casual crafters.
A user, testing.
Iterations
An early iteration of the home page
The final iteration of the home page
Early and final iterations of the product search page.
A major change I made based on the results of usability testing was to switch the filtering interface on the product search page from clickable buttons to a check box format. Due to usability conventions, users were confused about the affordances of the buttons (whether or not they were able to select more than one option per category, for example), and check boxes alleviated that problem. This is an excellent example of the importance of taking conventions into account when designing user interfaces and experiences!
Iterations on the product page.
I made significant changes to the information architecture and interface on the product page. At first I had thought that the information about the quantity of pinecones per unit should rightfully be grouped with the information about the price of the unit, but usability testing revealed that people were expecting to see the quantity per unit in the item headline rather than below it.
The final product page.
I enlarged the “Item Description” headline and moved it and the descriptive content to a more prominent location on the page. I also simplified the “Add to Cart” buttons, incorporating the quantity selector button into a single line with the Add to Cart button and turning it into a typeable field rather than a drop menu selector. Finally, I unburdened the interface of the superfluous fill behind the fields, resulting in a cleaner, simpler “Add to Cart” user experience.
Demo of final interactive prototype (made with Sketch & InVision):
FINAL THOUGHTS
This project reinforced the importance of iterated usability testing and how critical it is to designing good experiences for users. Doing the competitive analysis was also tremendously useful in helping me understand the value of knowing usability conventions and seeing how they can be employed or improved upon to help small business thrive in a vast global marketplace.