West Seattle Tool Library Website

Website redesign for the West Seattle Tool Library

Skills: Front-end Dev, Web Design, UX, Branding

Problem

The West Seattle Tool Library’s website was outdated and did not convey information clearly to new users. Memberships and donations were also difficult for the user to pay for and the manager to keep track of.

Solution

A responsive website where returning users can easily search for available tools and new users can learn more about what the Tool Library has to offer.

Features

  • Four major tasks are focused on “above the fold.” Search Inventory, Inventory, Learn More, and Donate now. The search bar is front and center because this is what most users access first. The hours and information are easy to find at the top right corner of the page. I included a call to action up front so donations seem easy and effortless.
  • Original photography specific to the Tool Library.
  • Multiple call to actions. The first is the donate button at the top, another is to become a member, then another donate button at the bottom. Sections of the homepage then link to other pages of the site, which are far more simple and expand on details.
  • Memberships, though suggested donations, are made into WooCommerce virtual products so that they are easily monitored and accessed.
  • Updated Branding that it is consistent across the board.

User Research

My survey gained almost 100 users of the Tool Library. These are some of the important statistics:

86% had visited the WSTL website before

62% did so to check Tool inventory, while 17% to check hours

For ease of use, about one third gave it a 3 out of 5 (fair). Another third gave it a 4 out of 5.

Interpreting the Research

I was surprised that many found the website fairly easy to use. I was under the impression that the website was not functional, when in fact it the UI was just outdated.

Memberships are by donation only and are through paypal on the website. However, there was no way of the manager to see who donated for a membership or not.

The scope of the project then changed. The priorities became educating new users of what a tool library is, making donations clear and easy, while keeping the inventory and hours front and center for returning users.

Previous Website

Wireframes

Branding and Moodboard

When updating the logo and branding for the WSTL, I came up with three adjectives: Approachable, Grassroots, and Trusted. This tool library, as all tool libraries, is unique and a dear cause to many members of the community. This is why the original photography was such an important element. Assets such as the hand-drawn doodles convey the approachable and grassroots parts of the Tool library. I chose Signika, a humanist sans-serif for the main titling typeface because it is solid and straightforward yet friendly and approachable. Matched with the fresh green color and bold photography, it creates a trusted and fun tone.

AI Wireframe | Coded Wireframe | 1st draft of site

wireframes

mockup_macbook

View Live Site