Nuts & Bolts Website: Part 1

This is Version 1 of the Nuts & Bolts website. My first foray into building a website/e-commerce template from scratch, this was a coding project more than a design one.

Founded in 2013, Nuts & Bolts Brooklyn is a small business selling baked goods. Still in its start up phase, my friend, the chef and co-owner, needed a website, and I offered to build one. 


Step 1: Define 

Objective: Build an e-commerce website to showcase Nuts & Bolts products using the Shopify platform. The website should allow customers to buy products online.

Who: The client is Nuts & Bolts, but the users are anyone who uses the site. Their target audience was people in New York City who consider themselves healthy eaters, probably between the ages of 25-45. 

Step 2: Discover

  • What information is necessary (to the client, to the users)?
    • The client wanted an ingredients page in addition to the usual e-commerce site pages (products, shopping cart, blog, about/contact page). 
    • The most important information for users is product information (name, description, ingredients, price, how to purchase).
  • What look/feel do we want for the site?
    • After speaking with the client, the following adjectives were agreed upon: Reliable, old-school, sturdy, simple, elegant, minimal, homemade, handwritten. 
  • What other features are necessary?
    • Mobile-responsiveness
    • Customer accounts
  • What CMS should we use?
    • After looking at several e-commerce sites, we decided on Shopify.
  • What languages will be needed to build the site?
    • HTML, CSS, and Liquid (Shopify's language)

Step 3: Layout

To start designing the site, I outlined all the necessary site elements: the logo, main navigation links, and various pages. From there, I could start to rearrange them in a way that made sense, in a way that would be feasible for me to build, and in a way that highlighted the most important part of the website: the shop.

I then sketched out some potential layouts.

I sketched out various ways to lay out the information on the site. 

Step 4: Build

To build the site, I learned HTML, CSS, and Liquid, the Shopify language. To help myself understand how files and content needed to be organized, I drew some diagrams.

Here's a screenshot of what the final files were organized:

Screen Shot 2014-01-31 at 4.12.50 PM.png

The code ended up being pretty simple once I understood how to make my HTML Liquid-friendly.

Result

The final product was not stunning by any stretch of the imagination. However, it functioned within the Shopify framework and from this coding project I gained a solid understanding of the structure of Liquid templates.

The final product: Not very pretty or user-friendly, but it functioned within the Shopify framework, and I learned a lot.

My instincts were that some of our cosmetic decisions for this design (such as naming the shop page "Goods," something the client had been adamant about, and the odd width of the content container) were not user-friendly.

I spoke to about 15 users to get their feedback of the site, and found my hypothesis to be true.

From there, I decided to approach it as a design project, rather than a coding one.