Seattle Jazz Experience Website Design

Shop Seattle Retail & Website Design

Sleep Masks Product & Surface Design

Snowflakes iOS App Design

StyleBoard App Product Design

 

 

 

3D Work Models and Renders

Annamika iOS App Design

BCBG Textile Design

Bucky eCommerce Website Redesign

Bucky Packaging & Product Design

Butter London Visual Design

Dalbello Wine Label

 

© 2018 Catherine Hubert

Drugstore.com Interactive Design

Hado Labs Digital Product Design

Hearts App Design

Jayne Holsinger Website Design

Lisa Power Salon Website Redesign

Minted.com Visual Design & Art

 

bucky.com

UX/UI Design for eCommerce Website

 

As the Creative Director at Bucky, I designed a custom website with a simplified content management system. Each main category page features a lifestyle photo with select products. Below this, all of the items in the category are accessible. The goal of the design was to keep it as simple and elegant as possible and to convey a relaxed and calming user experience reflective of the product goals.

 

 

The Design Problems

When tasked with redesigning our eCommerce site I collected feedback from customers and the Bucky team and identified the following problems:

  • Overall the site was not visually appealing and did not look trustworthy.
  • The radial selection buttons made it difficult to visualize the products.
  • When items were out of stock, we had an unfriendly error message.
  • It was difficult to find items. The search function didn’t work.
  • The backend content management system was inflexible and required custom programing for simple updates.
  • The site was not optimized for search engines.
  • Too much money was spent on Google Ad words.
  • No wholesale information or ways to purchase wholesale-priced items.
  • Online sales accounted for less than 3% of the total yearly revenue.
  • Payment options were limited and appeared untrustworthy.
  • Checkout process was confusing.

 

Website before the redesign

 

 

 

Process

Initially I wanted to do both the development and design of our eCommerce redesign. I took two classes online through Lynda.com; an eCommerce development course, and a course that explained SEO (search engine optimization).

 

I learned a lot about databases and the structure of eCommerce sites, but when it came down to the payment processing and some of the more advanced features, it became evident that we should hire a developer.

 

I took on the UX/UI designer role and worked directly with the developer. I completed a benchmark study and competitive analysis of other websites, and took detailed notes on effective user interfaces.

 

Site Map

Working with the developer, I created a site map and identified the structure and how the new content management system would work. This new structure was flexible and scalable and addressed all of the pain points of our previous design. The areas in gray were flexible pages that could be updated with an open source HTML editor. The new information architecture also provided exclusive information for wholesale customers.

 

 

 

 

 

Mood Boards

Next, I created several mood boards and visual design options for the new site. The new website should reflect the products with a relaxing and comfortable user experience. It should be easy to find products, with clear and concise navigation, showcasing quality products, with a trustworthy and easy checkout.

 

 

 

High Fidelity Wire Frames

Once the mood and site map were established, I then created high fidelity wireframes in Photoshop. From there the developer worked from the wireframes, previous website, and site map and created a test site.

 

Testing

I did extensive testing in different browsers and operating systems and made sure there were no issues. We kept a excel document to identify a punch list of features and issues that needed to be fixed.

 

 

 

Interactive Prototype

For my portfolio purposes, I created an interactive prototype using Adobe XD. It works fine in Safari but I have noticed that it doesn't work in all versions of Chrome. This is an Adobe thing, and not something I can fix (aside from recreating it in another program). My apologies if you see this error message: There was a problem displaying this prototype. Please try these troubleshooting steps.

 

click to see interactive prototype.

 

 

Outcome

The new user interface was visually appealing, easy to use, and felt trustworthy. The customer service number rarely received calls, customers were able to find items, and check out with ease. The backend CMS made it easy to update items. We created a way to hide out of stock items rather than sending an unfriendly out of stock error message. A separate wholesale portal was created and wholesale accounts could now order online.

 

SEO

Our Alexa rank went from 2,000,000 up to 350,000, increasing our traffic by 471% and eliminating our need for Google Ad Words.

 

Sales

Our online sales went from less than 3% to over 15% of our yearly revenue.

Showing an increase of 400% in one year.

 

 

Hindsight

This website functioned well from 2009 to 2013. It was designed before smart phones were widely in use and was not responsive or adaptive. If I were to redesign it today, I would take that into consideration. I would also make the design more flat, expand out the tabs and make all of the products shown below instead of items only in their individual categories.

 

 

 

Next project →