University of Nevada, Reno Main Website

Overview

The University of Nevada, Reno website provides resources and information to prospective students, parents, and faculty & staff. The website is on a content management system which helps department marketing specialists maintain their content and ensures accessibility of new web components.

Problem

In 2017 the university needed to redesign their website due to inaccessible content on more than 15,000 pages and allow marketing specialists to easily update their own department pages.

Role

My role was to research, design and test all new UIs for accessibility. I collaborated with the marketing web team and marketing specialists to launch this project.

Discovery and research

During the research phase, we wanted to better understand how our users find out about the university, what kind of information was most important to them, how easy it is for them to find that information, and what devices they access the website. Some of the research methods include:

Competitive research to compare how other regional universities organize their content and structure their navigation.
Conduct in-person interview questions to prospective students, parents, and faculty to determine their expectations and impressions of the current website.
Identify the top tasks our users want to achieve while visiting the website.
Use analytics to determine the most common devices our on-campus and off-campus users use when visiting the website.

Top tasks for users — Results of usability questions when asking users to find information on existing website

Persona details — Survey questions to learn more about the use of existing website

whiteboard — Screenshot of analytics to identify user devices

Personas and Information architecture

After reviewing the research information, I created personas of our users and identified the most important information our users search for on the website. Our team reviewed the information and we collaborated on a new architecture of the website to help our users find information on the website.

New website sitemap — Sitemap of the new website

Wireframes

Gathering all of the information ahead of time helped with creating wireframes to present new feature ideas that tie back to the research. We wanted to introduce a modular web component approach that would work with our CMS to allow web specialists to build pages for their own departments.

Low-fidelity prototypes

After refining our ideas we created low-fidelity prototypes to conduct in-person usability tests with some of our students and faculty. Our primary goal was to identify how users find information using the prototype.

Home page prototype — Home page navigation example

Home page mobile wireframe — Mobile home page wireframe

Visual design

I worked on translating the approved wireframes into visual designs that incorporated the university brand using Sketch. The visual designs included the brand typography, colors and in-house photography. The final designs were turned into a prototype using Invision, and presented to the administrative faculty for final approval.

Challenges

Getting buy-in during the research phase was difficult when beginning the project because many of my team members wanted to see wireframes or something more visual. After moving into the wireframe and prototype phase it helped to reference back to the research and justify some of the design decisions I proposed.

Accessibility

Designing and helping with the front-end development work of all the web components helped grow my knowledge in accessibility. Getting feedback from our campus accessibility manager throughout the design process also was very helpful when refining my ideas. I was able to show my department and marketing specialists how someone using a screen reader would interact with the new website.

Learnings

I learned a lot more about front-end development. Being in a 4 person web team, we did not have a dedicated front-end developer to work on the UI. There were lots of mistakes along the way, but it helped me when thinking more in terms of systems.
Many departments and units of the university felt that their section pages needed to be on the primary navigation, making it extremely busy. It was also difficult to design a structure with navigation that could accommodate a lot of links. Using analytics, me and my team were able to justify why we picked the most important links to highlight the university.