I. Project Summary
For my very first foray into UX Design (in a classroom environment), the task I was given was to improve the usability of an existing website by redesigning it, going through the entire Design Process from start to finish. In my case, I was to work on
honeypacifica.com, the website for a local honey farm in Downey, CA. I would evaluate the current site from a usability perspective, gather the thoughts on a checkout workflow from those who would potentially use the site, create a clickable wireframe prototype, and recommend next steps to iterate on the design, hopefully making the site easier and more enjoyable to use in the process.
II. Research
But before I get too far into my work with Honey Pacifica, let's back up a bit.
On the very first day of the UXDI course I took at General Assembly (shout out to any UXDI-SM-31 students or instructors that may be reading this!), I was given the option of 4 potential websites to work on for my first project. The method I used to help with making my decision was a heuristics evaluation, in particular the "LEMErS" method devised by
Jakob Nielsen. This is what I made as a first pass for this evaluation (note, the final 3 columns are only filled out for honeypacifica.com; this is intentional):
Next was a C&C Analysis. My focus here was to find features and trends from the websites of other purveyors of artisinal, organic products, especially honey:

Finally, I arrived at what is perhaps my favorite part of this whole crazy process: Persona creation. Based on speaking with users regarding their nutrition and online shopping habits, I created a Persona named Rachel that represented the ideals I would design towards.
I also created a journey map that documented a potential user flow with the current iteration of the site.
The user interviews and usability tests also helped me prioritize which features should be put into the revised product.
Given more time/knowledge, there would likely be more items on this chart. But, it definitely gave me some direction to move towards.
At this point, it was time to take the journey map and other research and turn it into a user flow diagram. I created one for the current flow first:
III. Problem Statement
There are many options out there for people looking to buy high quality organic products from small, local businesses. So, this is the problem statement I landed on:
People like Rachel want to make sure they and their families are getting the healthiest options available, as quickly and painlessly as possible.
How might honeypacifica.com assist in this effort?
IV. Design
Having decided that one of the main goals of this project would be to simplify the product catalog, I began by setting up a card sort and performing this both in-person and remotely through Optimal Workshop.
The results I was able to get in the time allotted can be seen below:
The results suggested that an "All Honey" category to encompass the majority of the products might be useful, and then have a handful of sub-categories from there. And it's a good thing, too, because this is what the site map looks like currently...at least part of it:
And this is my suggestion for the revised site map:
I also had a revised user flow diagram to go along with it:
I then started sketching. At the time of the project, I had determined that only a desktop version of the site would be made, so every screen required for the flow was put to paper.
Shortly after making the paper sketches, I turned them into digital wireframes, at medium fidelity. I also used this as the basis for the first prototype.
I put this prototype in front of users, and while the feedback was generally positive there were some items that needed to be corrected to truly meet the goals of the project, including:
- Rearrange the items in the main navigation bar, to improve learnability.
- Move some items between pages (for example, the promo code entry) in order to improve efficiency.
- Prominently include the running total during the checkout.
These suggestions informed a second revision of the site which can be seen in prototype form below.
V. Prototype
You can click
here to find a clickable prototype. Or, watch the video below to see me walk through the flow.
Alternatively, watch the video below to see me walking through the screens of the prototype.
VI. Conclusion
This project taught me a great deal about designing for an e-commerce website, and the best tools you can use to tackle the challenge. I learned about the tools of the UX trade and their value for the designers and the end users.
Given more time, I would have taken the digital wireframes to high fidelity, and continued to perform usability testing on that prototype. Websites are constantly works in progress; creating new revisions of the site repeatedly using the UX process is key for a company's success.