UX Designer 

Sketch, Squarespace

SquareUp, Typekit, Invision

Deliverables: 

Style Guide, Wireframes, 

eCommerce, Final Website.

Step 1: Style Guide

The first challenge we faced was creating a brand new style guide for this established company to revamp their website. The second challenge was the timeline which left us with 3 days to put it together. Through collaboration between the Creative Director and myself we were able to narrow down a presentation for the style guide that would accurately show the client our vision. 

Step 2: Information Architecture

The next order of business was to decide upon the layout. To do this, we had to take a good look at the information architecture of the website. How would it flow? Which pages would be included in the main nav versus the footer, what would be included on each page, and how to make it as clear to the user as possible. The method I used was to utilize information trees and prioritization through the eyes of the business owner as well as the eyes of the user. By finding the common ground between these two forces I was able to figure out a streamlined way to organize the information flow. 

step 3: Wireframes

Though we were working strictly in Squarespace for this client in particular so they could easily manage their own website, we still found value in going through the standard UX process of wire framing to ideate. Though constrained by the standard flow and designs of Squarespace themes we were able to use wireframes to create a plan of action for the design of the layout for each individual page. Using these as our Lo-Fi's we were able to move into the next steps with a strong direction. 

Step 4: Theme selection

From the wireframes we had to select a Squarespace theme that included eCommerce as a function. Once we were able to narrow down our themes to a few choices, there was then a discussion between the team to select one we would present to the client. 

Step 5: Design Build

The final steps in this project was to build the website and implement the eCommerce features. 

Step 6: E-commerce addition

Below I feature some e-commerce integrations we added as well as some other features.