Estelita’s Library Website Redesign

estelitas hero.png
 

overview

Estelita’s Library

Estelita’s Library is a justice-focused community space with books about social justice, liberation movements, and ethnic studies. They own an online bookstore and a physical library in South Seattle. All the books at the library are free to the public.
Currently, Estelita’s has two separate websites for their online bookstore and library space, but the transition between the two is very clunky. Their current library site is also outdated and the organization is difficult to navigate.

Objective
Redesign a responsive marketing website for the library space that not only informs the user of the mission and upcoming events, but also is visually captivating and futuristic

Solution
A logically designed interface with the online bookstore embedded in the library website for a smoother, more streamlined user experience.

research

Target Audience
I began the design process by conducting primary and secondary research in order to better understand the users of Estelita’s and the mission of the library itself. Through user interviews and talking to my clients, I developed the following target audience landscape:

  • People living in the greater Seattle area

  • People who already visit Estelita’s

  • Diverse range of minority groups

  • Ages 5-65

User Interviews
I interviewed 6 participants about their existing interactions with Estelita’s, thoughts and feelings surrounding the current website, and experiences with online shopping.

CONCLUSIONS

  • Participants were frustrated with their inability to find desired information on the website

  • Participants were confused by the difference between the library and online bookstore

  • Participants would rather online shop than visit the physical library

USER PAIN POINTS

  • Organization/layout of information on the website

  • Clunkiness between two websites

  • Aesthetically unappealing

Persona
I combined my earlier research with data received from my clients in order to create a persona representative of the target market.

information architecture

Based on my research insights and persona, I began to categorize and structure the information based on what was the most useful, usable, and user-friendly.

User Stories
I chose a few user stories that I felt were most important towards my minimum viable product (MVP). I prioritized these based on my primary research on what the users felt was most important to be able to accomplish while on the website. These were the following:

  • Griffin wants to go onto Estelita’s to find books about his favorite social justice movement

  • Griffin wants to see when the next event hosted at Estelita’s Library will take place

  • Griffin decides to donate to Estelita’s

User Flow
I identified the four major paths users could take to achieve the ultimate goals of the user stories described above.

User Flow.jpg

wireframes

Wireframe Sketches
I came up with a few early sketches for the homepage to determine which components worked best together.

Low Fidelity Wireframes
I then adapted elements from my previous sketches to create my first version of wireframes.

iteration

Usability Testing
To evaluate the efficacy of the wireframe pages, I conducted usability tests on 10 participants. In order to eliminate bias regarding previous exposure to the website, these 10 participants were all seeing Estelita’s website for the first time.

TASKS TESTED:

  • Ability to locate bookstore

  • Ability to make a donation on the website

  • Ability to find the date of the next event

  • Ability to find the hours of operation

  • Ability to find Estelita’s on social media

AREAS OF IMPROVEMENT:
The main areas for improvement were that people felt confused about the connection between the online bookstore and the library, the organization of information felt scattered, and the copy sounded unnatural.

Interactive Wireframes
After my first round of iteration and taking into account the feedback I received, my interactive wireframes look like this:

branding

Before constructing my final prototype, I explored different styles and fonts and created a UI Kit in accordance with atomic design principles.

UI Kit

High Fidelity Prototype

I then took inspiration from my UI toolkit and created a high fidelity mockup.

Next Steps
Design is never finished, so my next steps would be:

  • Additional testing on current community members of Estelita’s to maximize foot traffic in the physical library and online bookstore

  • Include responsiveness to website layout

  • Develop tablet and mobile versions

 

Tools Used

Figma, Miro
___________

My Role
Research, UX, UI
___________

Deliverables

  • User persona

  • User flow

  • Sketches

  • Wireframes

  • Prototype