env Digital Studio

Project Overview

Coursera’s Google UX Design certificate included three end-to-end projects, allowing students to practice the design concepts learned in the program. The Hurstlyn Library project was the second of these projects and is a fictional project based on a redesign of a local library’s website.

The problem

The library is struggling to retain new visitors and boost engagement in the local community. They believe this is due to difficulties with the website and a lack of awareness around online resources and special events.

The goal

Revamp the Hurstlyn Library website to encourage more in-person participation and streamline the online reservation process. 

Key skills

  • User research
  • User testing
  • Wireframing
  • Prototyping
  • Logo design and branding
  • Accessibility

The design process

Paper and digital wireframes

When designing the paper wireframes, I wanted to get a bunch of different ideas down on paper. This was a great way to experiment with a variety of modules/widgets before narrowing the design.

Starting from the homepage, I wanted to focus on my two main problem statements: the library schedule and reserving books. These priorities influenced the entire wireframing process.

A wireframe of the homepage layout, including upcoming events and key sections, for the fictional Hurstlyn Library website, designed for the Google UX Design course.
A wireframe of the upcoming events layout, including a list view, calendar view, and filter options, for the fictional Hurstlyn Library website, designed for the Google UX Design course.
A wireframe of the individual event layout, including description and registration options, for the fictional Hurstlyn Library website, designed for the Google UX Design course.
A wireframe of the individual book page, including the description, details, and reservation options, for the fictional Hurstlyn Library website, designed for the Google UX Design course.

Usability studies

Conducting a usability study allows designers to observe people interacting with and providing feedback on their designs. For this project, I conducted two usability studies using the prototype feature in Figma.

Participants were asked to try a small variety of workflows and to share their thoughts on the processes, which influenced changes for the final website design.

Round 1

  • Profile page doesn’t highlight relevant information
  • Refine the mobile menu to improve navigation
  • Prototype event type filters

Round 2

  • Define and prototype “library to go”
  • Calendar view for events is needed
  • Consider multilingual layouts to better serve community

Mockups

Almost all participants provided feedback that the profile page didn’t prioritize the expected information (e.g., books over profile image). The design was refined to facilitate the account overview and checkout process.

Before testing

After testing

To better highlight improved event functionality, I also designed a search and filters, allowing library patrons to refine search results. 

Before testing

After testing

User research indicated that book availability and library hours were pain points. For the single book view, you can easily see how many copies are available and request a mobile “library to go” service.

Before testing

After testing

Takeaways

An image of the homepage design for the fictional Hurstlyn Library website, designed for the Google UX Design course, including a list of upcoming events and two section headings for new releases and children's programming.
An image of the upcoming events page on the fictional Hurstlyn Library website, designed for the Google UX Design course, including a list view, calendar view, and filter options.
An image of the design for an individual event on the fictional Hurstlyn Library website, designed for the Google UX Design course, including an image, event description, and buttons to register and/or add the event to your calendar.
An image of the design for an individual book in the fictional Hurstlyn Library website, designed for the Google UX Design course, including a book description and the ability to reserve or pick up the book using the "Library to go" program.

Impact

The Hurstlyn Library website is currently quite difficult for patrons to navigate and it impacts the library’s engagement with its local community. This modern and simple redesign helps patrons of all ages and experience levels to more easily access free library resources.

What I learned

This project was an excellent exploration of how to take an existing website and brand identity and bring it to the next level. I enjoyed playing within these constraints, while equally helping to envision a more modern future for the local library.