Uncorked.com Website Design

Terlato Wines created Uncorked.com to market and sale wines from vineyards they own or distribute for. The website is built on the latest Enterprise Edition of the Magento open source e-commerce platform.

 

Project Overview

Terlato had an existing e-commerce store for uncorked.com that was built on an older platform. They wanted to find a new e-commerce framework, redesign the website, improve usability, and integrate with their CRM. This project started in June of 2013 and took around 8 months.

UX – Wireframing

Wireframing is a crucial step in the design process. I have experience using Axure for both low/hi fi wireframes as well as interactive prototypes.

UX – Micro Interactions

During the redesign, I looked at different ways of displaying content and providing simple user feedback while taking up minimal space.

Final Comps

After several refinements and maybe 15 different page design iterations, we came to a consensus on the final design. I had to say It was a good day.

Challenge
The challenge with this project was finding the right e-commerce software and ensuring that the design matched the brand personality. Some other wine sites designed a fun and playful site with illustrations. I initially thought that might be an interesting, fun to design approach.

Strategy
I worked closely with their team to research shopping carts and Magento came away as the clear winner. It helped that I had experience working with Magento. I performed demographic research, read alot about the wine industry, maybe drank a little wine for ‘testing’ purposes, and started scribbling down ideas for a layout. After doing research and brainstorming, I better understood their personality. They have beautiful vineyards, great looking bottles. So I wanted to use that as much as I could while also looking for ways to simplify.

Outcome
The new website was launched in time for the Holiday season in 2013 and I continue to do some occasional work to support the marketing team. Uncorked.com had their highest year of sales in 2015 and they continue to grow their customer base. After the first year I recommended they move their hosting to Nexcess, and that move really helped improve site performance.

My Role
My role on this project was as a freelance UX Designer and Front End Developer. I helped them determine the right set of features needed to improve the customer experience over their existing site and improved the design, both aesthetically and functionally. Some of my tasks included: technology research, usability studies, UX wireframing, visual design, graphic design, SEO strategies, template coding, PPC campaign management, and email marketing support.

Design Process Insights

Research
The most important part of any design process is research. Without research, you are throwing darts blind folded and pointing the wrong direction. This research could be user research, market analysis, technological challenges, or competitor research, to name a few. I researched competitors to look at best practices as well as gathering information about the wine industry in general. They did not have specific information on their customers so we researched demographic information to understand their target market.

UX Design
After compiling the research and brainstorming with the client, I began my UX work. Using Axure, I created a clickable prototype so that others on the team could visualize and play around with different UI elements – fake search, dropdowns, clicking links, and many others. In other projects we’ve brought in test customers profiled from our user research and observed how they performed various tasks.

I’ve always felt that giving users minimal design during the UX phase leads to better data. Sometimes design can get in the way during this phase. You are attempting to get honest feedback on how an interface works instead of color or type opinions.

Visual Design
Terlato had some of the usual brand guidelines that needed to be followed: logo, colors, typography. I produced several iterations of designs, some more beautiful than others. The design process took about 4 months on this project.

Technologies Used

  • Magento Enterprise Edition
  • HTML5
  • CSS3
  • jQuery
  • Github
  • PHP
  • Google Analytics / Adwords

Time Spent On…

Strategy / Research
5%
UX Wireframing / Prototypes
10%
Visual Design
30%
Front End Development
30%
Marketing / Advertising Support
25%