Groundwork Coffee

E-Commerce Site
Website Re-Design, Information Architecture organization

UX Designer

Re-establish website consistency and integrity with current branding standards

Revising information architecture and design to reflect an easy navigation while retaining brand identity.

Prioritizing content popular with Groundwork's buyers, focusing on gaining access quicker, without losing sight of Wholesale buyer access.

ROLE:

PROJECT:

CHALLENGE:

SOLUTION:

IA Organization
 

Information Architecture is one aspect of the website that needed the most work. Using post-it notes I worked with two designers to consolidate these page categories and eliminate excess features. We learned that several features the company wanted, did not allow for ease of website navigation.

Research
 

Extrapolating coffee details and discerning the value of features and the vision endorsed by the client. While I gained an education in the complexities of coffee, it did not seem to fit smoothly with the idea of simplicity.

 

For the design schema, we looked at Groundwork's competitors, Blue Bottle and Intelligentsia. Both had an organized and user conscious layout that was not cumbersome to navigate.

Design


Playing with several design layouts as you see to the left, these are inspired from the other competing websites plus some of the capabilities available through HTML5. Instead of a drop-down menu system, I tried a simple menu system with large buttons and left-hand navigation. After several points of feedback, I changed an inset product menu window and resorted to a full screen product menu with an inset product details page, avoiding "tunnel-vision" within the composition. 

GroundWorks.png
GroundWorks.png

press to zoom
Desktop-Menu-Coffee.jpg
Desktop-Menu-Coffee.jpg

press to zoom
GroundWorks2.1.0.png
GroundWorks2.1.0.png

press to zoom
GroundWorks.png
GroundWorks.png

press to zoom
1/4
Prototype


There were several alignment issues that needed to be addressed in the prototype. The approach to its composition was having the 960 grid split, so that it could stack when put into a mobile layout. The visibility of the text lent itself to the ease in navigation with much spatial distribution. The Wholesale button is placed alongside Location to maintain its importance in the e-commerce of Groundwork, based on feedback from the Marketing Manager.