What I have learned so far...
How to work with a diverse set of internal stakeholders to create effective solutions that meet user needs and fulfill business objectives.
About the Company
A for profit university specializing in health professions offering degrees in Masters, Doctorates and Certificates.
Problem/Solution
There are many problems with the website. It is inconsistent, there are multiple navigation methods with redundancy, drop down menus are too long, pages are too long with a lot of information for users to digest and the website has a high bounce rate. Moreover, the university has low UX maturity. So I need to evangelize and develop some research methods that have never existed. I am redesigning the university website (1,000+ pages) and all supporting websites (4 other websites). To do this I collaborate with my team and the internal marketing/communication teams.
Roles & Team
My Role: UX Designer
Director of Web & Operations/Programer
Web Content Technician/Programmer
Also collaborate with: Directors of Marketing & Digital Media & University Communication
Tools
Figma (Design), Google Chat (Communication), Jira, Zoom, Google Meet (Asynchronous/Synchronous Meetings), Microsoft Suite. Google Suite, Adobe Suite.
University Website (Original)
The website had 3 different navigation structures. (e.g., Fig. 1, 2, 3,4). This created a lot of redundancy for users and confusion on where to go on the website. In fact, the side menu seemed as though it did not belong on the desktop version but on a tablet or mobile version of the website.
Fig. 1: Top Navigation (Desktop)
Fig. 2: Right side Navigation (Desktop)
Fig. 3: Middle buttons with top navigation and drop down menu (Desktop)
Fig. 4: Middle buttons with top navigation and drop down menus (Desktop)
Leadership proposed taking the acronyms that they were using and spell out each degree, taking an already long drop down menu and making it longer. As you can see in the examples below (Fig. 5, 6) this would make the experience worse. I presented to leadership (using a slide deck) this issue and methodically demonstrated why this tactic would not help an already bad experience. Furthermore, this proposal violated two universal design principles; Fitts' Law (Fig. 7) and the Steering Law (Fig. 8).
Fig. 5: Drop down menu with acronyms (Desktop)
Fig. 6: Drop down menu without acronyms (Desktop)
Fig. 7: Fitt's Law example
Fig. 8: Steering Law examples
The footer (Fig. 9, 10) shows a list of links that are in no particular order and leave the user with an overwhelming array of choices. Moreover, the university logo (Fig. 10) is in an atypical spot as seen on the right.
Fig. 9: Footer (Desktop)
Fig. 10: Footer Detail (Desktop)
The layouts for some of the same content is also inconsistent. As you can see below (Fig. 11, 12) their program pages have entirely different looks creating an uneven experience for users.
Fig. 11: Layout A-Program pages detail (Desktop)
Fig. 12: Layout B-Program pages detail (Desktop)
University Website (MVP)
In the first version/redesign of the website I started by overhauling the navigation structure. In my new designs I removed the right side navigation that seemed out of place on a desktop and replaced the limited top navigation with a more user and growth friendly mega menu. As you can see (Fig. 13) the problems that plagued the top navigation in the previous version will not be problem here. In addition, all links in the menu are now organized into categories to ease the use for a user to complete their task. In Fig. 14 for the academic program pages which in the previous version of the website involved a lot of scrolling for the user to find their information we now have a vertical side menu. This new capability allows the user to see the information in "chunks" which allows them to find and digest the information they want to see without adding to their cognitive load.
Fig. 13: Mega menu top navigation (Desktop)
Fig. 14: Side menu for program pages (Desktop)
Within each section of the website which contains a plethora of information to wrangle I used progressive disclosure methods to compartmentalize the information in smaller bits. In Fig. 15 for the curriculum of each program I utilized tabs with accordions. This allows the user to methodically weed through the information at their own pace.
Fig. 15: Side menu for program page/curriculum (Desktop)
Fig. 16: Side menu for program page/FAQ (Desktop)
Fig. 17: Program menu (Mobile)
Fig. 18: Program menu expanded (Mobile)
The footer (Fig. 19, 20) is now listed in much more organized manner with categories which reflects the mega menu (Fig. 13). In addition, the logo and contact info. are on the left side which is aligned with the header. The social media icons are now in the footer, which in the previous version were hidden in the right side menu. This makes these icons more visible and accessible to the user.
Fig. 19: Footer
Fig. 20: Footer (Detail)
Special Cases
Error/404
I was tasked with creating the new error page for the website. As you can see in Fig. 21 some of the ideas I had for this page, which seemed more verbose than I used in the final design seen in Fig. 22. Another decision that I made was to let the number "404" replace any icon I wanted to use in my sketches.
Fig. 21: Sketches of ideas for a 404 page
Fig. 22: 404 page (Desktop)
Application
Setting aside that the application page needs to be redesigned. I was tasked with coming up with a solution to let prospective students know that there is an application extension for certain degrees. Below in Fig. 23, 24 are designs that are meant to let students know this option. In Fig. 23 the design shows that I propose using a global banner in red and with the appropriate icon (for accessibility) of the issue. In addition, in Fig. 24 & 25 I added icons near the buttons for each degree which act sorta like tool tips for added visibility of the issue. Finally in Fig. 26 is an example of how I added it to the Program pages.
Fig. 23: Application Page Default (Desktop)
Fig. 24: Application Page with banner and icons (Desktop)
Fig. 25: Application page with icons and tooltips (Desktop)
Fig. 26: Program page with banner
Alumni
The Alumni Association wanted to "refresh" their section of the website to coincide with fundraising efforts that they were doing for the university foundation. Below is a sampling of some of the pages that I redesigned for them.
Fig. 27: Alumni Association/Home Detail (Desktop)
Fig. 28: Alumni Association./Engage Detail (Desktop)
Fig. 29: Alumni Association/Give Detail (Desktop)
Fig. 30: Alumni Association/Awards Detail (Desktop)
Research
Content Inventory & Audit
To understand the depth and breadth of the university website I viewed and analyzed over 300 pages. I took notes of not only where all the pages lived but what could be improved in the redesign. I found no consistency from section to section, in fact there were entirely different styles throughout, to many navigation methods (3 in total), information was not organized nor easy to find, users were forced to scroll long pages to find what they needed, too many buttons.
User Flow
I mapped out the user flow for the old and new application process. This will help me in the future to understand and redesign the application page.
Contextual Inquiry
I job shadowed advisors during their advising sessions with prospective students to understand what types of questions they would ask about the programs in general but also about the website.
Tree Test
I worked with my team member to develop this test in a platform designed for forms. So, our interface was limited by the software. This was an attempt on my part to keep expenses low. There were approximately 5 tasks that participants attempted to complete in using the university website. See Fig. 32 A-E for some examples of what the test looked like. After some discussion with my department and the marketing team I had two avenues for students to take the test. One was through a Canvas course that new students have to take. The other was an email sent out from the marketing team from a database they had access to. Both offered incentives through raffles for a gift.
I ended up getting approximately 21 participants which was far lower than I expected. We ended up abandoning this approach because we redesigned the navigation and the test was no longer valid.
Fig. 32: Examples of the Tree Test (A. Intro. | B. Task | C. Task with menu | D. Task with correct answer | E. End of test)
Usability Test + System Usability Scale (SUS)
I worked with
Documentation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra, erat ac convallis elementum, ligula nisl lobortis justo, non tincidunt neque massa sed magna. Integer porttitor bibendum nunc, non commodo eros egestas eu. Proin blandit ac urna sed scelerisque. Nullam cursus eleifend urna, eu tempor turpis dictum et. Quisque lacinia quam quis nunc hendrerit,
Recognition
"Congratulations on the wonderful work with the website. Your hundreds and hundreds of hours of planning, work, implementation and testing have paid off with something that RMU has never had on its website..." — Executive VP
"I just spoke with someone on the phone who will be applying to our SLPD program. She said that she LOVES our website because of how easy it is to move around and find information..." — Advisor
King's Peak Award given for demonstrating outstanding performance that significantly impacts a dept./university. Over the past 8-10 months James has spent an extraordinary amount of time working on project after project from the Inauguration, to the new continuing education website in order to prepare for the transfer of the entire University website. James tracked and reviewed the needs of every department in the University as well as helping to brainstorm and design several new critical pieces of functionality. The dedication and hard work from him is a huge benefit to the University. His skills and determination to provide an excellent product has helped to provide a new platform that will serve the needs of the University for years to come. — Director of Web/Supervisor
