Team:
My role:
Tools:
Deliverables:
Creative Director / UX Designer
UX Designer
Sketch, Squarespace, SquareUp, Typekit, Invision
Style Guide, Wireframes, eCommerce Integration, 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.