The User Experience (UX) process redesigning a University website.
Eastern’s 2.0 website, nine years later.
Although it had earned the Spokane Regional MarCom Association’s 16th annual SPARK award– It had been almost a decade since the last time the site had undergone a design change, and honestly, it looked it.
In September 2016 the Digital Team was born, assembling folks from around campus that would take on developing a new web presence for the University.
Our Challenge
To build a better ewu.edu for students, employees and the entire EWU community.
This article focuses on the User Experience (UX) elements that informed the redesign journey.
My Role: UX Lead • UX Design • UX Research
Methods I used:
• User Personas
• User Surveys
• Paper Prototyping
• Wireframes
• User Observations
• Heuristic Evaluation
• Usability Testing
DISCOVERY AND RESEARCH
Starting in January, we reached out to our most significant audience, current students. We created a five-question survey (highlighting that it took an average of two minutes to complete) to gain an understanding what resources were most important to students.
We asked students to list their five most important resources. They responded with:
1. Canvas (Learning Management System)
2. EagleNET/Email/EWU Portal
3. Academic Calendar
4. Bookstore
5. Library
6. Financial Aid
While Canvas is an enormous component of student interaction with the current website, it’s interesting to see that EagleNET received more votes than myEWU Portal. Also, the library factored in heavily.
We also asked them to describe our current website.
Some people wrote “ABOMINABLE!”, “wormhole” and “a hot mess”. This was great feedback; there are no wrong answers; we need to hear this if we were going to improve the experience.
Over the next few months, we extended our research, surveying faculty and staff asking both audiences how the current EWU website meets their needs. Staff found the current site to be adequate earning a score of 2.9 out of 5 points. Faculty scored the website at 2.7 for satisfaction.
We asked questions like what currently IS and IS NOT working.
The last website redesign centered on accessing content within three clicks (whenever possible). This resulted in an overabundant number of links within top-level areas.
Today the thinking on user flow has evolved, in short, the user experience is more important than counting the number clicks. UX Myths is a good entry point on current practices. The big problem with the 3-click rule is that it has not been supported by data in any published studies to date.
From the gathered data points, we developed page goals, mapped content, and reviewed high-profile areas, in order to refine the information architecture.
Our web analytics, highlighted the top browsers users preferred:
1) Chrome 47% — avg. number of page views 6.3
2) Safari 22% — avg. number of page views 5.18
3) Internet Explorer 12% — avg. number of page views 5.36
4) FireFox 10% — avg. number of page views 5.57
5) Edge 2.3%– avg. number of page views 6.49
To understand how each task measured up, we tallied the data based on the goals identified by prospective students.
CONTENT CHUNKING
Improving UX with a content-first approach to design.
The term “content first” was coined by A List Apart founder Jeff Zeldman in 2008. He states that, “in order to create the right layout and structure for any digital experience, you have to know what the content is first.”
All to often, a team will begin the design process with good old Lorem Ipsum as placeholder text that conveniently fills the available space in any way the designer see’s fit.
Unfortunately, this is meaningless and lacks context, with very little to do with the relationship between the design and the content. So why do we continue to go down this path?
Content is storytelling. By creating a user-friendly digital framework that supports the content, we enable web authors to make a series of choices that help them tell their story through any given digital experience.
Our journey began with prospective students as the sites primary audience — the focus shifts to the Admissions area.
Using Google Docs for editing and tracking, content strategists and writers took a pass at condensing the 300 plus admissions pages down to forty plus pages in the newly formed information architecture.
Content is king; ours just got really out of hand over the last ten years.
We meet with the Admissions knowledge experts, and a few iterations later I was able to start content chunking. Creating rough sketches into how pages could be devised.
WIREFRAMES
Next step in the process– translating the sketches into wireframe blueprints, defining page goals and content hierarchy. We applied an iterative process of review, prototyping and adding user interaction to the mix.
A prototype is just your idea of what the future might look like. – DAVID KELLEY
IDEO Founder & Chairman
Once the blueprints were understood by the team, the designer began developing high-fidelity page layouts. These informed the style guide and red line page designs for developers.
⚓️ View the blueprint prototyping on Invision
USER OBSERVATIONS
Testing the design and interaction is perhaps the most crucial step in the process. Observing interactions with real users highlights what is working and what areas need improvement.
Once our volunteers signed recording consent forms — we set them down in front of a computer with ten questions that asked users to rate each task as well as leave feedback about what was difficult or easy about completing each task. We also recorded the screens and mouse clicks for analysis.
We tested not just current students but our target audience of prospective students.
Initial observations informed some impactful changes that improved the experience.
- An issue arose with the navigation interaction. When users hovered over navigation sections, if they accidentally moused over a different section the content would change, but the navigation label wouldn’t. We addressed this by switching to a click interaction in the main menu.
- Heuristic violations noted users saw areas in the program explorer that looked as if they were buttons but not clickable. We addressed this by turning them into buttons that linked to each prospective area when clicked.
- People Search / Directory was poorly implemented. The user had first to fail a search before could choose the “people filter.” Secondly, the value in the search form disappeared toggling the option.
If there is one helpful takeaway I may share from our UX process, it is this, test, iterate, and test again as you meet with people throughout the entire process. Even after you launch your site.
OUTCOMES:
The team formed and kicked off the redesign in Oct. 2016, launched the site in May 2018, and finished college content migration by June 2019.
Admissions pages after one year.
• Apply page visits up 36%
• Freshman applications increased by 93%
• Visit EWU page up 427%
• Explore Programs up 14%
EWU enrolled a new record number of first-time freshmen for the fall 2018 quarter, a total of 1,758 new students.
View the site at ewu.edu.
Special thanks to all of our survey respondents. In case you’d like to run some numbers yourself? (Warning, this data contains profanity… there are some who had very strong feelings regarding the old website site.)
Initial feedback raw data file.
User testing raw data file.
