scroll down
Goal
How might we create trip discovery experiences that are modern, responsive and easy-to-use on a limited budget and timeframe?
Solution
UI, UX & visual design
Role
Lead designer
Summary
Stanford’s Travel/Study program provides the Stanford community with scholar-led trips to destinations world-wide. I led the Travel/Study team in reimagining and redefining their brand as well as the user experiences of their end users and content authors.
Before
After
NOTABLE MOMENTS
Complexities of filters & facets: Prior to this project, I had underestimated how complex filter and facet functionality was. Collaborating with our developers helped me to understand possibilities and complications. Together, we came up with solutions that addressed user needs and kept us within budget and on time.
Finding an aesthetic balance: Our client, the Travel/Study team, wanted an immersive, modern-looking website. Their parent organization and project sponsor, the Stanford Alumni Association, wanted to retain a look-and-feel that felt more traditionally "Stanford" and wasn't too distinct. These seemingly opposing preferences made for an interesting challenges.
PIVOTAL MOMENTS
New user group = new approach: We discovered along the way that we had another user group in the mix: the site's content authors and editors. By slightly adjusting our approach, we successfully improved experiences for both end users and content authors/editors alike.
Scope expansion: Part of our requirements gathering process entailed learning about Travel/Study team offerings. We found that our scope needed to be greater than originally anticipated, but our timeline and budget allocation couldn't budge. In order to maintain design and development standards (and stay within budget and timeline), we designers and developers worked concurrently, staying in constant communication.
Information was challenging to find
End users were unsure where to find what they were looking for and unfamiliar with internal jargon.
Complicated site structure
Site’s structure didn't expose browsing users to all offerings. Navigation was informed by organization politics rather than by user needs.
Low scannability
End users found content, especially "walls of text," difficult to scan, browse and comprehend.
In addition to building a helpful search experience, we designed a pared-down, streamlined navigation with clear, distinct options so that users could see all available services and find what they wanted — fast.
Relevant discoveries
To address the pain points around browsing, we added a "Collections" page that allows users to explore and discover the possibilities.
Digestible, progressively disclosed info
Part of our navigation streamlining included incorporating intuitive page-level jump links for quick scanning and clarity around what information was available.
CHALLENGE 2:
Limited functionality
Previous design
Not responsive
Because the site was built nearly 10 years ago, the site didn't adapt according to screen size, orientation, or device.
Not accessible
The site used small type, had low color contrast, lacked alt text for images, had inadequate keyboard navigability, was reliant on Javascript, and more.
Limited filters & facets
The few controls end users were given were restrictive. For example, users could only apply one filter or facet at a time.
Proposed design
Accessible to anyone from anywhere
We cross-collaborated with developers and accessibility specialists throughout the design & development processes to ensure the site would be fully accessible and fully responsive.
Intuitive filtering
We listened to how users looked for destinations — by place, specific (or vague) time frames, and experience type — and built flexible, robust filter and facet categories and options.
CHALLENGE 3:
Incohesive, inconsistent design
Previous design
No design system
The site was created before design systems were prevalent. Content authors lacked resources like style guides, component libraries, and pattern libraries to reference.
Inflexible CMS
Content authors & editors were forced to make design decisions with a brittle CMS that encouraged poor ones. This forced them to find work-arounds. Different staff made different decisions, leading to design inconsistencies and user confusion.
Outdated visual design
Content authors & editors weren't equipped with visually compelling story-telling tools, which left them with limited capabilities to appear up-to-date, reliable, and trust-worthy.
Proposed design
A robust, flexible design system and sub-theme
We designed a robust but simple design system for Stanford Alumni Association — Travel/Study's parent organization — and a sub-theme just for Travel/Study to meet their (and their users') specific needs. Each trip had unique details, so components needed to be adaptable and accommodate all variants.
Efficient, easy content creation & organization
Aside from arming content creators/ editors with tools to create engaging content, we also designed templates to decrease their decision-making and to encourage consistency. Additionally, we created guides & materials to reference post-engagement. Finally, we worked alongside developers to ensure their new CMS was user-friendly.
Cohesion at every detail
We collaborated with map illustrator, Karen Minot, to design itinerary maps & cruise ship diagrams that visually align with each destination's striking, beautiful story.
Outcomes
Increase in user engagement: 125% rise in number of sessions, 101% rise in unique users in 1 year, 45% rise in unique pageviews
Increase in sales (anecdotal)
Client satisfaction: Client requested an extended engagement via additional design work
Drop in support requests: Notable decrease in customer support calls, emails, and support tickets
In addition to driving results (increases in user engagement, sales, and client & customer satisfaction), we were recognized by Stanford University leadership and entered to win a Webby by our peers. The Travel/Study team asked to prolong our engagement to ensure the success of their e-commerce experience, which you can read about here.
