OVERVIEW
THE PROBLEM
International students struggle with the navigation of the website. They face the stress of requiring to fill out and submit forms every year throughout college to maintain visa status.
THE SOLUTION
While most of the primary information lives at the top, we ensured actionable content and links are clear throughout the site. The two key features on the body are quick links and the quiz. Students are able to receive customized recommendations and reach popular topics quicker.
TEAM
Honovi Ho, MinJae Lee
CATEGORY
User experience
MY ROLE
UX Designer, UX Researcher
TOOLS
Figma, Whimsical
PROCESS
Clear and directive navigation
This website serves as an informational tool rather than a browsing platform. Users come here with the intention to search for a specific form or topic, hence the search bar is positioned on the hero image.
Quick access to popular topics
Extra guidance for new students
Students can quickly get to their needed information by selecting one of these cards.
When students are too overwhelmed and unsure where to start, they can take this personalized quiz and the results will lead them to the information they need.
Access to helpful external links
To ensure students get to the correct government websites for the latest updates, the official links are attached at the footer.
RESEARCH
Students' pain points
We conducted usability testings with 4 different international students to better understand how they interact with the homepage. In the interviews, users were given 3 different scenarios to walk through.
Misunderstood headlines and unable to find common topic
Links in banners are misleading as it redirects to different sites
Confusing navigation, overwhlemed with information
Students' behaviors
Students were guessing which is the right information because the same keywords appeared on multiple links.
All students clicked on the most upper banner to bring them back to homepage but it redirects them to a different site.
All students only looked into the vertical navigation bar and missed the horizontal navigation bar, which they could not find the intended information.
When students are tired of scanning the page, 70% of them resort to using the search bar.
Competitive analysis
Since this organization is tied to a university, our competitors are other colleges as well. The competitors are selected based on the percentages of international students enrolled during the Fall 2020 academic year. We evaluated the international service's homepage of the following colleges that has similar percentages of international students compared to UMN:
Current website
We audited the homepage’s information architecture and identified two primary issues. First, there are two banners at the top of the page. However, they each redirect to different sources. The first banner directs the user to the UMN’s official website, whereas the second banner redirects the user to ISSS’s homepage. Secondly, there are two navigation bars: horizontal and vertical. Having two separate navigation overwhelms the user and divides their attention, causing unnecessary confusion.
IDEATE
Information architecture
In our solution, we took out the banners and reduced the number of navigation bars from 2 to 1. The logo redirects users to ISSS homepage. There is one horizontal navigation bar that provides further details upon request by hovering over different tabs.
Old
New
Wireframes
After many iterations, we have concluded the final wireframes and functionality based on user needs.
During the wireframe process,
-
Common website patterns, such as a consistent menu, a distinctive footer, and clear actionable buttons, were incorporated to improve web usability.
-
A quiz feature was added for students who are too overwhelmed with information.
-
The mainbody re-emphasizes important topics and personalizes recommendations
DESIGN
Final homepage design
Final homepage prototype
Project learnings
USE A DEFINED EVALUATION SYSTEM
To avoid biasness, the 10 heuristics by Nielsen Norman Group is used to rate all the competitors' websites. This is to ensure we are looking and evaluating the same items fairly.​
ASK OPEN-ENDED QUESTIONS
Besides structuring scenario-based questions during user interviews, asking open-ended questions will give us a better understanding of how and why the users are using the website.
HAVE USERS CONFIRM THE END OF SCENARIO IN INTERVIEWS
Since we were the ones setting the scenarios, we know exactly when a scenario is completed. However, users may assume they completed the scenario but actually did not or vice versa. Hence, it is important to not interrupt the users so that we can get accurate results.