Reference Center Design
Through the student organization Reach Consulting Group, my team and I were tasked with improving the design of a reference center for a mid-sized education association based in DC. Previously, the site did not adhere to the same branding as the company’s main site and lacked the organizational infrastructure required to accommodate employees using the site.
DURATION
CLIENT
TEAM
10 Weeks,
January - March, 2020
Mid-sized medical association
William Zhang
Meredith Wojewuczki
Olivia Caponecchi
UX Designer
Client Liason, lead communication with client
ROLE
Process
We started our research by analyzing the company's users to better understand how they use the site, how efficiently the site aided their work, and what their perception of the site’s aesthetics was. We interviewed five employees: an administrative specialist, a business development analyst, a constituent engagement specialist, a research analyst, and an employee in IT.
First, we conducted brief user-interviews in which we studied the employees through a typical task that they would complete on the website to understand how accessible and efficient the site is. We also asked a variety of questions on ways to improve the Reference Center and how to make their time on the site more enjoyable. The interviews helped us to learn about the site from the perspective of an employee.
Next, we used card-sorting tests to gather data crucial to improving the Reference Center’s information architecture. Specifically, we gave users a set of “cards”, or elements from the site. They then created and named their own categories (an “open” card-sorting) and grouped every card into a category. We subsequently synthesized the card sorting data by creating categories based on the collective results from every participant.
Card sorting results decided on from the interviews
Findings
Employees noted duplicate navigational elements such as the redundant search bars. There are also numerous extraneous and unorganized tabs that can change if an external link is accessed. Consequently, the sheer number of external links that open into new windows that prompt an additional login increases both the time it takes and the number of clicks for a user to complete a task.
A lack of coherent organization proved to be another pain-point. We found that how employees' card sorted was far different than how the current site is organized.
An incohesive color scheme was another concern the participants voiced. The colors on the site differed from the company’s color scheme. The orange headers felt out of place compared to the colors of the main company's site. Users commonly compared colors to the company’s main website and suggested mimicking its design and implement the same color palette here.
The font-size was noted to be too small, and too much text created a readability problem for users. Extraneous text blocks also hindered users from understanding what the most important information on the page was.
Lo Fidelity Mockup
High Fidelity
Design Decisions
Reducing duplicate links and objects throughout the website will help reduce confusion among users and greatly improve the user experience while using the site.
BEFORE
AFTER
Increasing the size of the font, decreasing the number of text blocks, and adjusting spacing will help improve the user interface. This way users can be quickly aware of what information they need to recognize and use.
BEFORE
AFTER
Following the color scheme of the main site will ensure consistency between the main site and the reference center. We decided to use the same navy blue for navigational tabs but replaced the orange with red.
BEFORE
AFTER
Reflection
Working with such a large, popular company and all their employees was a huge learning opportunity. It was helpful to have more structure and stability with the client we were working with and truly believe the effort we put in will drastically improve workers' efficiency on the site. A lot of the employees we interviewed used the site in different ways, but our team learned the importance of making a redesign that benefited the broad group of workers through synthesis and strategy.
Key Takeaways
Working with NDA's
Understand Users
We centered employee experience in our redesign, as they are the primary users of this internal resource. It was important to ground our redesign in their values and opinions of the interface.
This project was for a large organization, so we were not able to publicize the companies name and some key information from the site. It is essential to respect the privacy of the company and adapt to displaying designs abiding by these guidelines.
Testimony from client
"The consultants worked under extraordinary circumstances, to say the least. Yet despite the COVID-19 pandemic and having to work from different locations, they were resilient—I saw no negative impact on the quality of their work.
The deliverables presented by the consultants showed vast improvements to how our website had looked and been organized. Their work exceeded my expectations. "
