Site Redesign

Improving the reference center website for the library of a mid-sized educational association based in Washington, D.C.

Redacted redesign of the reference center's front page.

Timeline:

8 weeks, Feb 2020 - Apr 2020

Roles:

Lead Designer, Project Manager

Tools:

Figma, Optimal Workshop, Miro

Team:

Elizabeth Bigham, Olivia Caponecchi, Meredith Wojewuczki, William Zhang

Description:

This project was during my second semester as a member of Reach Consulting Group, Michigan's undergraduate tech consulting club. While servicing our client, I set up the process and timelines for my team, and had the opportunity to teach my team tool usage, client communication, and user-centered design methodologies.

Context

Client

Our client is the library of a mid-sized educational association based in Washington, D.C. They requested recommendations to improve the "organization and presentation of information to make their online reference center "user-friendly, relevant, and visually appealing".

Audience

The reference center is an internal platform for the client's employees. The users we talked to used the site primarily to get books or research articles to fulfill their role's responsibilities.

Problem

After talking to users, we discovered that the reference center is visually-dated and unorganized. Internal employees often resorted to other tools or communicated directly with colleagues at the reference center to fulfill their needs.

Acquiring Data

Interviews

We began by interviewing users that the client provided us with. We asked users to walk us through a typical task within the reference center, and worked to understand the following:

  1. ⦿  What is the user's role, and what is their interaction with the reference center?
  2. ⦿  How efficient is the reference center for users?
  3. ⦿  What is the user's perception of the reference center's aesthetics?

These questions helped us get to know our users and learn about their their relationship with the reference center. In addition to cultivating empathy for our users, we also began to understand their typical workflows, pain-points, and functional needs.

Card Sorting

After having conversations with our users, we realized that we needed more specific and concrete data about user preferences for the reference center's organization of information and navigation. I decided to conduct "open" card sorting sessions where users are given the opportunity to created their own categories. This improved the quality and depth of our insights before we began starting preliminary designs.

Insights

Navigation

  1. ⦿  Duplicate navigational elements and unorganized tabs changed if an external link was opened, throwing off users
  2. ⦿  External links that opened in new windows increased both the time it took and the number of clicks for a user to complete a task
  3. ⦿  Different navigational patterns prevented users from understanding, learning, and predicting an element's functionality

Organization

  1. ⦿  Each category of elements seemed unorganized and unintuitive to users
  2. ⦿  Labels for elements did not properly represent aspects of the site because of a lack of consistency
  3. ⦿   Extraneous text blocks of the same size and style hindered users' from understanding the most important information on each page

Aesthetics

  1. ⦿  The reference center's color scheme differed from the company’s color scheme, which stood out and felt out of place to users.
  2. ⦿   Accessibility problems such as the tiny font-size and large quantities of text created readability problems

Design Decisions

Initial Sketches

Our team began with preliminary sketches that helped us prepare for creating our high fidelity mockups. After sketching, we began to brainstorm design decisions to integrate into our final designs.

Addressing Accessibility

Increasing the size of the font will improve readability and scannability, helping users become quickly aware of what information they need to recognize and use.

Improving Navigation and Organization

Reducing duplicate links, adjusting spacing, and condensing objects throughout the website will help to reduce clutter for users and improve their navigational experience. We also took the synthesized data from card-sorting to re-organize the categories of the center.

Adjusting Aesthetics

We adopted a color scheme that matched the organization, making the experience for users more comfortable and familiar.

Key Takeaways

Initiative

Excited to contribute towards such an important dashboard, I quickly became lost in the public health terminology, software requirements, and fast-paced interactions. I realized working on the team required continuous, iterative, but patient efforts to make meaningful contributions.

Taking initiative, asking the correct questions, and being open to learning from more experienced faculty and graduate students allowed me to grow as they mentored me and shared proper design and research practices.

Perspective

At the end of the day as designers, I helped design the dashboard to satisfy public health needs. Often times, public health experts expressed opinions that differed from our initial design decisions.

Rather than viewing these differences as roadblocks in our design process, I viewed the feedback as expert advice and a unique perspective when designing. Having regular conversations through daily stand-ups, weekly meetings, and slack messages allowed me to keep learning, empathesizing, and understanding our stakeholders.

Users

Advocating for dashboard users by defending designs was the most crucial takeaway from this project. Throughout this entire design process, our design team regularly interacted with users and sought out concrete data to justify design decisions.

Constantly giving users a voice at the table and synthesizing their feedback into robust and accessible designs is not only a philosophy that our team followed, but a mindset that I have forever adopted as a designer.