Nuts & Bolts Website: Part 2

The first version of this website that I built was not user-friendly. Thus, Part 2 of building this website focused on being a design project rather than a coding one.


Step 1: Identify the Problems

The first step was to identify the various issues with the existing site. I had 15 users verbalize their thought process as they explored the site, while I watched and took notes. The primary issues were:

  • Language: The titles of the navigation links were confusing to most users. Though the client was very attached to the words "Goods" and "Raw Materials" to evoke a feeling of of old-fashioned elegance, almost all users found these terms vague and confusing. 

Solution: We switched "Goods" and "Raw Materials" to the more commonly-used e-commerce terms "Shop" and "Ingredients."

  • Product Information: Some users said they were expecting to be able to easily tell from our homepage what kinds of products are sold. Not only was "Goods" too vague, it required users to click on it before finding out any information about products. This made new users who didn't know anything about the company feel less inclined to find out more.

Solution: I set up a drop-down menu to list all the categories of products. This drop-down menu appears when users hover over the "Shop" link, meaning users have access to this information directly from the homepage without having to click to a second page.

  • Site Organization: In general, users said they felt confused about the point of the site. The "About Gluten" page was full of heavy text, and, visually coupled with "Goods" and "Raw Materials" at the top of the navigation, made users think that the Nuts & Bolts was primarily about health information, rather than selling a product.

Solution: The client was very attached to the idea of providing information about gluten on the site, but understood that highlighting this in the main navigation was misleading and may not directly lead to more conversions. In the new site, we removed it from the header navigation and placed it in the footer to signify that it contains extraneous (but related) information. 

I also got feedback from other designers about the visual design of the site. For example:

  • The use of the handwritten typography for miscellaneous text and the navigation links is not uniform and doesn't communicate enough importance to the user.
  • The fixed navigation panel on the left is not mobile-responsive.
  • The use of a photo of granola for the background photo made coupled with other photos in the content makes the site feel busy.
  • The width and placement of the content container feels disjointed from the rest of the site.

Step 2: Ideation

Following the solutions above and keeping the necessary design tweaks in mind, I first sketched out some ideas and then made some mock-ups in Photoshop. 

Mock-Up 1:

This solution tried to emphasize the two most important links on the homepage: Shop and Cart. It also aimed to come up with a creative way to feature the circular logo without leaving large empty spaces on either side.

Mock-Up 2:

This solution replaced the main logo with a version that is more horizontal to allow for easier central placement. It also features a  common horizontal navigation that many users are familiar with. 

Step 3: Implement the Solutions

This time around, instead of writing the code from scratch, I decided to search for a pre-made templates that could simply be customized to fit our needs. This would be far more time and energy efficient.

I found the Minimal Theme, a free theme built by Shopify, and found that its basic layout was very similar to Mock-Up 2 above. I customized everything, from the font settings available to the drop-down menus to the layout itself.

 

Result

The final product solved all of the issues identified with version 1 of the website. 

 
 

The client was very pleased with the final result! Personally, I think there is still room for improvement, but I'm happy that the original problems I set out to fix were indeed fixed!