Current design
The problem
iSchool website users find it hard to find the info they are looking for with the current website structure.
The goal
Come up with a more user-friendly homepage to help iSchool users find important information more quickly and easily.
(Click on any image to see the zoomed-in original version)
1 ) UX research – plan
Project background
As a student at UW-Madison iSchool, I always find it difficult to find the information I need on the iSchool website, I am trying to figure out if other students also experience the same way as I do, and how I can improve the user experience of the iSchool website for them to find information more quickly and easily.
Research goals
- Identify where users have problems using the iSchool website.
- Figure out how I can improve the website’s usability so that it is more user-friendly to use.
Research questions
- Do participants think that the current iSchool website is hard to use?
- Are there parts of the user flow where participants get stuck?
- Are there design changes I can make to improve the user experience?
- What are some new features/suggestions from participants?
Key performance indicators (KPI)
- Task completion rating (1-3)
- Time spent on tasks
Script
- Prompt 1: Check admission requirements to apply for iSchool
- Prompt 2: Check MA Program Requirements
- Prompt 3: Check the Fall 2019 Course Schedule
- Prompt 4: Register for UX Online Courses
- Prompt 5: Check for Program Learning Outcomes (PLO)
Note: The script questions are based on the major goals iSchool students go to the website for.
Other parameters
2) UX research – Conduct usability study
I observed the participants while they were completing each task and took down my observation notes.
Mengtong Li – Second-year international graduate student
Kristen Maples – First-year American graduate student
3) UX research – findings
There were common patterns from the study that led to four findings.
4) Personas
Emily Johnson
- Problem statement: Emily is a second-year Master’s student in UX Design who needs to find degree requirements, such as the Project Learning Outcomes (PLO), from the iSchool website because she needs to be prepared in advance to graduate on time.
Emily’s user journey
Zhang Wei
Problem statement: Zhang Wei, a first-year Master’s student in UX Design at UW-Madison iSchool, is struggling to locate essential student job information, such teaching assistant, on the iSchool website because he needs to support his study financially and gain practice experience in UX field.
Zhang Wei’s user journey
5) Card-sorting activity
To explore how students organize information for easy retrieval, I conducted an open card-sorting activity with OptimalSort. Ten students categorized website components such as Master’s Degree Programs, Campus Life, Continuing Education, and Career Services. The findings showed a preference for grouping content into Courses and Career-related categories.
In addition, participants grouped academic programs from a degree (i.e. Master Program) vs. non-degree perspective.
6) Competitive audit
After internal analysis, I reviewed the top 5 iSchool programs in the U.S:
- University of Michigan
- Syracuse University
- University of Illinois at Urbana-Champaign
- University of Washington
- University of North Carolina – Chapel Hill
Analyzing their iSchool websites, I found common and standout features we could use.
a. Career in the main menu navigation
b. About Us and Research in the main menu navigation
c. Hero Carousel: iSchool-related images and events
d. Arrange resources by different targeted audiences
e. Accessibility and testimonial feature
iSchool new homepage information architecture (IA)
I added the E-portfolio Showcase on the homepage to highlight students’ program achievements and make it convenient for graduating students to access Project Learning Outcomes.
Low-fidelity prototype
- “Careers” is added to the header menu.
- Users can find info by programs or by their role (perspective student, current student, alumni, staff).
- Users can stay up-to-date with events and student life activities.
- Goal-oriented actions for different types of users at the end
High Fidelity Prototype
Following initial testing of the low-fi prototypes, I identified some issues and made several improvements on the hi-fi prototype:
- Simplified the header menu items (i.e. group students, alumni, and staff all in People)
- Added a CTA button in the e-portfolio section to take users directly to the Project Learning Outcomes (PLO) page
- Streamlined footer content to prevent overwhelming readers with excessive information.
Accessibility concerns
Different sizes of headings (H1, H2, p) and clear landmarks (navigation, hero, footer, etc.) to indicate a clear hierarchy for screen reader users.
High color contrast/luminosity ratio for users who have low contrast sensitivity.
Incorporate extra tools in the footer to cater to visually impaired individuals, mobile users (text-only for faster loading times), and non-English speakers.
Impact
“As someone exploring degree options, the new iSchool homepage provided all the information I needed in one place. The streamlined navigation and detailed program sections were very helpful.”
Michael Chen
Prospective Student
“The redesigned iSchool site is awesome. I particularly appreciate how the non-degree programs are clearly categorized. It’s so much simpler to find courses that interest me.”
David Lee
First-year graduate student
“I love the new iSchool homepage! The Careers section is well-organized, and finding job opportunities relevant to students has never been easier!
Sophia Martinez
Second-year graduate student
What I have learned
- Designed with user needs and empathy in mind.
- Conducted effective usability tests for qualitative data.
- Analyzed user feedback to identify improvement areas.
- Organized information for intuitive navigation and clear labeling.
- Identified valuable features from competitor websites.
- Enhanced skills in presenting designs, justifying decisions, and writing concise documentation.
What I could do better next time
- Recruit more participants for usability research – 5 would be an ideal number to answer my research questions.
- Include participants with disabilities to make sure the design is inclusive.
- Due to time constraints, I couldn’t conduct usability testing on the new design. With more time, I would iterate on the new design based on user feedback to improve usability.
Next steps
- Refine designs using usability study results to enhance UX before handing them over to developers.
- Create new UI components in the Design System (reusable and more efficient for the developers)
- Hand over to developers to make the homepage live.
- Conduct a post-launch usability study to uncover hidden issues and make improvements.