Hanover Visual Refresh

A Journey Towards Visual Refresh and a Revamped Design System

This project encapsulates my endeavor to refresh and redefine the Hanover customer management system, focusing on usability, accessibility, and efficiency enhancements. With limited resources, I'm dedicated to modernizing the interface for improved user experience, setting the stage for seamless updates and future growth.
Project timeline

Dec 2023 - Present

Project type

Work project

UX/UI Design

Ruoxin You

Developer

Rinchen Tuladhar
Ross Beale
Steve Batcup

My Contribution

Design Audit
UX/UI Design
Documentation

Context
Smaller Earth
Smaller Earth is a trailblazer in the travel industry, offering cultural exchange programs to young people for over 25 years. We’ve successfully sent over 100k participants abroad through our six vibrant brands.
‍
To streamline our processes, we use Hanover, a customer management system that handles participant applications and coordinates with employers at camps and resorts. Initially designed by an agency, Hanover needed a refresh to improve its user experience once we took it back in-house.
‍
As the sole designer on this project, I've balanced the extensive task of refreshing Hanover with other high-priority projects, such as our website redesign. Despite these challenges, my goal is to enhance Hanover's design to better serve our users.
Context
The story began with...
The second day I joined the company as the first UX/UI designer in this company, I got a crazy task — My manager said that we were keen to change the visual style of Hanover, and he planned to start from the homepage as it was so difficult to use.
Live homepage
Initial prototype
My task
Ideation
OK, let me just be brave and free
There were too many things I needed to know at that time as I barely knew anything about our product. As a newly established team, we didn’t have a clear handoff workflow for the designer. Instead of asking tons of questions, I got an idea — why not just start testing and get more information from the feedback? As the visible things are always easier to show the right and wrong things.

So I did a few rounds of quick iteration and feedback with my manager, for broader explore the potential visual style, and also learn from the feedback what’s important for the homepage
Challenges
Six Brands, Multiple Color Palettes, and a Need for Fun—Now What?
I quickly understood my manager's expectations: to create a tidy, informative, and inspiring onboarding page. But this came with a challenge—we needed the product to break away from the traditional "system" feel. It had to be fun and engaging without sacrificing clarity, which is tricky in a complex system like this.

The challenge grew even bigger when we realized the product had to work seamlessly across six different brands, each with its own unique identity and color palette. These palettes were designed for branding, not the product itself, so I had to be extra careful in how I applied them.
Ideation
My Solutions
The first idea is to find the similar points of the six brands. Luckily, they almost share the same user groups —  young travelers (18-25). And the color palettes work well for creating the brand feeling.

The next idea is to be safe and minimized with the color, using layout and component styles to create the vibe. It’s a messy process to change the visual and also the overall layout (which highly influences the function in the same time). I separated the testing to section by section and asked for feedback when I finished one section.
Design
A Satisfying Homepage
After several iterations, we nailed the homepage. Key decisions include:
  • Sidebar: Kept our primary brand color to maintain vibe without compromising usability.
  • Layout: Used a grid to give a sense of control and achievement.
  • Corners: Reduced from 30px to 16px to avoid a bulky feel.
  • Backgrounds: Switched to outlines for a cleaner look.
  • Hero Video: Added to inspire users, despite potential distractions.
Context
Next Stage: Expanding the Visual Language—And Here Come More Challenges!
  • Project Interruptions: Due to other urgent projects, I had to split this project into smaller parts, posing a challenge in maintaining design quality and consistency.
  • Complex System: The application process spans 8 steps with dozens of pages.
  • Solo Designer: Handling this impactful project alone was tough, but I received support from another UX/UI designer, a brand designer, and my manager when needed.
Research
First Things First: A Full Design System Audit
Project Management
Break Parts into Projects
Transitioning from visual design to creating a design system required a practical approach. With no dedicated development team to focus solely on the design system, I planned the workload based on the audit and organized related components into four parts
Design
Define the Foundation
Next, I laid down the groundwork, establishing the core elements that would form the backbone of our new design system.
Design
Design and Test Key Component Changes with Key Pages
Armed with the foundation, I dove into refining key components, rigorously testing them on crucial pages to ensure they hit the mark.
Design
Next...Oh No! It Doesn’t Work on Other Pages
As I worked on other pages, I discovered that some components didn’t fit well together or with complex information structures. It became clear that I needed to revise some previously developed components.

To address this, I follow these principles:
  • Minimize Impact: Maintain consistency with the initial design.
  • Reuse Components: Use existing elements whenever possible.
  • Document Changes: Clearly document necessary adjustments and coordinate with developers.
Not Ending
Still Work in Progress
As we continue to refine our design system, I find immense satisfaction in the process of enhancing UI usability and accessibility, tidying up loose ends, and ensuring a seamless handoff process. While the project is still ongoing, I'm excited about the progress I've made and the potential for further improvements in the future.
RUOXIN YOU
TwitterLINKEDIN