Home Page & Global Navigation
Overview
Shoreline's website faced several critical challenges: the home page was not effectively representing the college's brand, and there was a distinct decline in visitor conversion rates. Additionally, user engagement with the home page was extremely low. Stakeholders also expressed concerns about the difficulties students faced in navigating the website, a problem supported by Google Analytics data. Compounding these issues was the absence of an efficient system to display and distribute news content, which limited the marketing team's ability to communicate the college's story and strengthen its brand.
The goal: redesign the homepage to mirror Shoreline's brand, improve user engagement and navigation, increase conversions, and effectively showcase news, aligning with business needs.
Challenge & Goal
My roles: Product Manager, UX Designer, Lead Researcher
Additional team members: Visual Designer, Front-End Developer, Copy Editor,
Roles
Increased conversions for paid ads by 65%
Improved SEQ from average of 4.5 to average of 6.4 (out of 7) across key tasks
Increased click-through-rates for top user needs by 50%
Delivered project under budget by $5k
Results
“Adam has an extraordinary ability to facilitate stakeholder alignment experiences that yield results, as well as champion user experience best practices for the organization.”
Cheryl Roberts - President Shoreline Community College
Process
I began this project by facilitating a workshop with executive leadership, subject matter experts, and front line staff to create alignment around the goals of the home page and the audiences we needed to serve to achieve those objectives.
Stakeholder Alignment & Personas
I led several research studies and recruited participants representing all of our target personas to determine information needs , pain points, mental models, navigation patterns, and perception of our brand.
Research
200+ Participants
current students, prospective students, faculty, and staff
7 Research Activities
data analysis, secondary research, user interviews, open card sort, survey, competitive analysis, n-gram keyword analysis
Key findings
Vague headings, labels, and links on the home page made it difficult to determine where to start as a first time visitor or first-generation college student
Most commonly needed information from home page included program finder, academic calendar, class schedule, and current students portal
Home page design lacked “energy”; students said it felt “generic” and “disorienting"
Prospective students couldn't locate general information about services such as tutoring and accessibility services
All participants struggled to find quarter start dates
User type needs overlapped significantly
Content Blocking, Wireframing, and Navigation Design
Because we wanted to put a lot of focus on content and copy, we created content block wireframes with copy being the focus of the wireframing process. I then wireframed the navigation structure based on the card sort study we conducted.
Our iterative design process involved creating multiple mock-ups, followed by a combination of moderated and unmoderated TryMyUI tests with current and prospective students, focusing on first impressions, and SEQ scores for task performance. Before prototype testing, tree jack testing was employed to evaluate and refine the information architecture and navigation.
Iterative Testing
Featured Deliverables & Outcomes
The new home page integrated the the visual brand identity with UX writing that reflected the voice and tone set by Shoreline's marketing team.
Elevated Visual Brand and Messaging
We enhanced the navigation by creating a robust and thoroughly tested mega menu which included clear links to the top-level page of the respective section as well as branded imagery that created a sense of space and community.
Enhanced Global Navigation
A dynamically generated news feed was added to the home page to highlight featured stories and profiles. Users were offered an easy way to navigate to stories with similar subjects and themes by way of exposed meta tags.
