Project Needs
- Help increase students enrollment through continuous improvement on user-friendly online presence.
- Support and reflect digital/traditional marketing efforts across college’s marketing pages.
Project Requirements
- Re- define information architecture based on new marketing strategies.
- Re-design the header and navigation area to improve navigation and content findability.
My Role in the Project
- Facilitated and carry out user interview.
- Developed user test script and conduct user texting
- Collected qualitative and quantitative data, performed data analysis and presented research findings.
- Created user journey map based on interviewing, user testing and GA data analysis.
- Made UX iteration of menu structure, grouping, hierarchy, interaction, and accessibility
Competitive Research
The team collaboration looked at other competing state college’s website and evaluated their mobile and desktop header, navigation area and overall information architecture. We compared notes with each other and identified our strengths and weaknesses.
UX Research
- Student Interviews
- Journey Mapping
- User Testing
- GA Behavioral data analysis
- Finding from Nielsen Norman Group’s Strategies for optimizing usability on college and university websites by Katie Sherwin and Hoa Loranger.
Prior to this project, we along with UX researcher and marketing team had interviewed students and performed user testing for evaluating our information architecture and content find-ability along with Google Analytics behavioral data analysis. We used these findings to create a journey map of protective students highlighting major touchpoint areas like programs, admissions, cost, financial aid, and student life. We also referred to recommendations from Nielsen Norman Group to propose a new information architecture and navigation.
Ideation
- Brainstorming
- Card sorting
Based on our research and findings, we knew that we had to restructure our menu items, re-word our vocabulary, and regroup the terms according to our marketing strategy while maintaining existing use cases that needed to be addressed as well. We went back to the whiteboard and listed all the all the existing navigation items and used card sorting exercises amongst all team members to categorize the terms. It helped us eliminate some terms while combining others and eventually through two rounds of workshops we finalized the structure of our navigation into groups of Primary Navigation, Secondary Navigation and Call to Actions.
Changes made to the header after the research
- Redefined navigation terms, re-organized them based on audiences using card slotting method, and re-design the header to establish clear distinction between the primary, secondary and tertiary navigation.
- Highlighted major calls to actions for prospective audience using typographical distinction in size, font, weight, grouping and spacing
- Added Google Analytics events to monitor the changes.
Style Guide
Colors
Typography
MERCURY
WHITNEY
Iteration
The UI design process went through many iterations of design, feedback and improvements until before the final version.
Final Layout
UI/UX AND ACCESSIBILITY CONSIDERATIONS
- The navigation is clearly separated into primary, secondary, and utility sections to serve audiences from different use cases.
- The primary navigation stand out as the most important part of the header which is determined by its fonts size, weight and placement.
- The call to actions are grouped in two groups, the Apply, Visit and Give parts are slightly more emphasized than the News & Events and the Athletics to illustrate the different in grouping and priority.
- The utility section address the most frequently used links by current students and staff.
- The search button is placed prominently right next to the navigation to help user jump to search anything specific.
- The mobile navigation follows the same structure as the desktop.
- The design passes all WCAG AA accessibility standards and maintains good hierarchy and structure.