Education Engineering Research (EER) Website - Redesign for Efficient Browsing Experience

Role UX Researcher, UX Designer, Front-End Developer
Project Type 8 Months Part-Time
Tool Axure, Adobe Illustrators, WordPress
Team Project Owner, Website Manager, IT Department
Overview

Project Goal

After the stakeholder meetings, we decided the project aim at re-construct the Information architecture of EER website to ensure well organized content and user-friendly experience.

Outcome

I proposed a new information architecture, gathered missing contents, created design mockups, prepared reusable design components, and deployed the website with customized code.

Process

We decided to break redesign process into 3 rounds to make sure recommendations at each round can be realized by WordPress.

Challenge

I kick off the project with stakeholder meetings to align the project goal among the team members.

After the first place, the project owner knew we wanted to improve the current website but don’t know where to start. She told me "It just doesn’t seem right." After stakeholder meetings, I realized the executive team were facing 2 problems.

meeting conclusion

  • They received lots of email about where to find information on the website from professors and students.

  • They felt there were content missing on the current website but do not know what and where to add it.

I also skim through the website and found apparent UX issues lead to the above problems.

With the meeting conclusion and the apparent UX issues in mind, we decided the project goal as to re-construct the Information architecture of EER website to ensure well organized content and user-friendly experience.

Evaluation

I did content audit to systematically review information architecture of the EER website.

I clicked through each tab and page then took notes on whether the categorization and naming of each page was reasonable. Then I renamed their names and adjust the categorization.

Then I found convention of categorization and naming by comparative analysis.

In total, I studied 16 other Michigan Engineering websites & 4 other EER websites. By recorded their tab and page names, and marked the content that was missing on the EER website, I proposed 6 new pages.

Sitemap Version 01

Based on the evaluations, I proposed the new sitemap below.

Interview

To understand how actual users interact with the website, I conducted 6 interviews with faculties, students, and staffs.

I tailored interview protocol for each user group. The questions asked their previous experience using the website, and invite them to walk through the new website and think out loud during the process. Then I synthesized the result into various scenarios to help me conceptualize users' information seeking process.

Use Case 01
Prospective students applying to the program
USE Case 02
Prospective & Current students Asking for Help
use case 03
Faculties & Current students Keep up with the seminars
Sitemap Version 02

Based on the understanding of each use cases, I proposed the new sitemap below.

Testing

To evaluate website usability, I conducted 5 usability tests and measured task completion rate.

Below are highlights of some iteration made after usability tests.

Final Version

Below are final version based on usability test findings and the iterations.

Design system

To make sure the website can be scalable in the future, I created various reusable components.

TakeAways

Knowing who to brought in during the design process.

Articulate design decisions with visual elements.