February 7 - February 28 (21-day sprint)
The Brief:
The client, Vines on Pine, is a local bottle shop specializing in wine with a modest selection of spirits and canned cocktails but no beer. They are a respected business in the neighborhood, but suffer from a web page that lacks functionality and is aesthetically dated.
I was tasked with redeveloping a poorly functioning e-commerce site from the ground up. This was a solo project in which I needed to conduct user research and take my synthesis through the ideation process to the delivery of a high-fidelity prototype.
My prototype needed to showcase a task flow that was developed with my persona’s problem statement in mind.
The Research:
I started by entering a phase of discovery. In trying to purchase some wine for in-store pickup, I quickly realized that their information architecture was difficult to follow. This was combined with a search and filter system that felt clunky. Additionally, the web page design was rather stodgy.
Once assumptions had been made, I arrived at some questions that centered around buying adult beverages for pickup or delivery. I was curious about how and why people bought drinks for their homes. Users were pulled from various demographics, and 4 interviews were conducted. Comparative & competitive analysis was also going to be helpful, so I compiled a list of 10 businesses to look at. I conducted some usability testing to get a better idea of how people buy beverages for home consumption. Additionally, I wanted to do a card sort to help me with the data architecture structure.
After conducting the interviews and assessing the competition, a pretty clear picture started to come together:
After I completed my research, I started synthesizing my findings into a persona with the help of affinity mapping. It would seem that people like to buy online when they have something specific in mind. It was a much more utilitarian interaction. The common complaint was that it is hard to get a sense of the product on the internet, which often deters the interviewees from trying something new. They all spoke of wanting to try new things, but they all mentioned that it was hard to trust most of the information they read in online reviews from unknown sources.
The C&C analysis and usability testing showed that most websites do an okay job of allowing people to buy beverages that they are familiar with. Users either searched directly for the brand or used a set of filters to quickly find what they were looking for. It became apparent that few were interested in finding something new, and when asked, they all spoke about being more interested in that experience when shopping in-store. They all felt that taking the risk on something new from a web page was not something that they were comfortable with.
The Creation:
Now that I had all of the data pulled together, it was time to start designing. My first step was to build a new site map based on the data that came out of the card sorting as well as the competitive analysis. The web pages I used for inspiration all did a good job of blending the persona’s needs. I knew there needed to be a more intuitive set of filters combined with categories that provide a clear curatorial direction.
These conclusions helped to define the task flow. My goal was to use clear information architecture and trustworthy descriptions of the products to provide the sense of discovery that interviewees spoke about. It had become clear that users wanted to get excited about new products, but typically, web pages failed to deliver on the promise.
I started to sketch out a clean and minimal design that relied on a simple filter menu on the left side of the product listing page. The home page would get a visual overhaul, and the curated categories would get a refresh to better reflect current purchasing trends.
A chat function that linked you directly to someone in the store would be added to provide a more human touch, but this wouldn't be the only way to get more information. On the PLP, a rollover would provide additional information and functionality, and the PDP would not only have a write-up but also a map and suggestions based on your selection.
It was time to bring my ideas to the wireframes. I started with low fidelity so that I could run some usability tests without the visual cues that the content provides.
The wireframes were done, and it was time to run some usability tests. After conducting a few sessions, some great feedback came through.
I was able to make the changes and then started the process of finalizing my prototype with colors and content.