UConn Phonebook
The University of Connecticut’s phonebook is widely used by faculty, staff, and students.
However, despite this, the site has not been updated in over ten years.
The web practices and UI are long outdated. There were also several problems that needed to be addressed, such as the confusing navigation, outdated interface, the site not adhering to brand guidelines, and more.
Early Research
I began my research by looking at and studying other phone book sites to observe the general best practices. Because we were starting completely from scratch, we couldn't refer to the initial design.
Furthermore, to understand who we were designing for, I surveyed a handful of students and asked about their input about the current Phonebook website.
I collected the answers and created three user personas to summarize my findings.
Part 1Simplifying Search
In the initial design, the advanced search features are not on the main search page.
This is an unnecessary step to the search process. In addition, several students commented that it was frustrating to re-enter the same information on the homepage to the advanced search page.
Overall, it slows down the search process and breaks the user’s focus and train of thought.
Initial design for the UConn phonebook homepage
Different UI iterations for the advanced search feature
Simplifying Search
Instead of redirecting the user to a new page for the advanced search, it would be more effective to keep everything on the same page. This reduces any confusion and saves the user time.
To access the advanced search feature, the user would just need to click on the drop-down link, and the features will appear on the same page.
Part 2Addressing search concerns
The University phonebook serves as a database for thousands of students, faculty, and staff.
With a database that large, it's inevitable that people share the same names. With the current website design, you have to click on the name on the existing database and go to a new page to get more information.
There are many unnecessary steps to this process, and it makes retrieving someone’s information more complicated.
Initial search results for individuals with the same name
To solve this, I designed an interface that displayed an individual's name, title, and contact info (telephone and email) so the users could quickly retrieve the information they need. This reduces unneeded navigation and clears initial confusion.
Part 3Updating the UI & designing for mobile
The initial visual design and colors are far removed from the University’s branding guidelines.
Furthermore, the website is not mobile-friendly. For a website that primarily functions as a search engine, the size of the search area is not proportionate to its aimed usage.
The goal was to completely redesign the interface so it reflects a modern aesthetic while still following branding guidelines.
Style Guide
To ensure that the new interface and website adhered to the branding guidelines, I created a style tile that defined the site colors, typefaces, typography system, and buttons.
UI Design Exploration & Iterations
Mobile Friendly
When surveying students, I noticed that a majority of them use their smartphones to retrieve information. Especially since it’s convenient and accessible.
A handful of students felt discouraged to use the UConn phonebook because it wasn’t mobile-friendly. Some students even told me that they were more likely to use the phonebook feature on their mobile devices as opposed to their laptops/desktops.
Outcome
After reviewing this with the lead designer and prototyping, we reduced the steps that a user would have to take to find the information they’re looking for.
The updated interface and website properly adhere to the University’s branding guidelines.
Furthermore, when revealing the design to a small sample of students, they stated that they would be much more inclined to use this phonebook instead of the initial phonebook design.
The website redesign is still in production, as the design still requires a bit of fine-tuning. The development will occur when the small team has the allocated resources, funds, and time to fully commit to the project.
When the time comes, there is already an approved, mapped-out solution, which will allow the team to launch the new redesign faster.