The rebrand of the Hoppin app

The problem

The current Hoppin app struggles to offer a clear and intuitive experience when it comes to planning multimodal trips in Flanders. Users often feel overwhelmed or confused when trying to book a ride, understand connections, or modify their travel plans.

User Scenario: To explore these challenges, we used a realistic use case: two sisters, Liana (20) and Nora (22), want to travel from Vilvoorde to Blankenberge without a car. One of them is temporarily unable to bike, so they must rely entirely on public transportation. Their goal is to arrive by noon and return the next day around 2 PM.

This scenario revealed major pain points such as unclear route suggestions, limited feedback when editing rides, and a lack of transparency during booking. It emphasized the need for a more accessible, trustworthy, and user-friendly mobility solution.

Define the Issues

After identifying the core problem, we mapped out the most common usability frustrations. These included vague route instructions, confusing language, and missing feedback during changes in travel plans.

Concepting & Prioritization

Once I understood the core challenges users faced, I moved on to shaping the solution. I used the MoSCoW method to prioritize features, separating the essentials from the nice-to-haves. This gave me a clear direction for what the redesign absolutely needed, and what could be left out to keep things simple.

My focus was on reducing friction: simplifying the flow, eliminating unnecessary steps, and aligning the app’s structure with how users actually think when planning a trip. I sketched out flows and structured content to match real-life priorities.

View Flowchart on Miro

Visual Design

I chose to maintain the original Hoppin brand identity by using their official color palette. This ensured visual continuity and respect for the existing style, especially as Hoppin is a public mobility brand with established recognition across Flanders.

The calming teal and strong violet create a trustworthy and vibrant combination, while the light grey adds neutrality and contrast in UI components. These choices align directly with their visual identity guidelines.

You can find the official brand guide I followed here: View Hoppin Brand Guide (PDF)

Wireframing

Once I had a clear understanding of the features and priorities, I started translating the structure into wireframes. These helped me focus on content hierarchy, layout, and functionality — without getting distracted by visual design too early.

I created both low- and mid-fidelity wireframes to explore different interactions and flows. They allowed me to test usability and navigation early on, and refine the experience before moving into high-fidelity visuals.

User Testing & Iteration

To check if the new Hoppin design worked well, I tested it with five different users. I asked them to use the app and share what was clear, what felt confusing, and what could be better.

Here are the most common issues they experienced:

• Buttons and clickable areas were sometimes too small or hard to see, especially on phones.
• The route and time information was difficult to read because the text was too small.
• The calendar was a bit confusing, especially when choosing both departure and arrival times.
• Because the app was in English, some users didn’t fully understand how it worked.

Thanks to this feedback, I made key changes: I increased the font and button sizes, made the calendar easier to use, and translated the interface into Dutch to improve clarity.

Final Design

The final version of the Hoppin app is simple, clear, and easy to use. I focused on keeping everything readable and fast — even when you're on the move.

The layout guides users step by step. The buttons are easy to see, the text is larger, and the design feels calm and trustworthy. I also made sure the colors, icons, and structure match the official Hoppin brand.

View Final Prototype on Figma

What I Learned

This project taught me how to turn a complex problem into something simple and user-friendly. I learned how important it is to listen to real users and improve the design based on their feedback.
It also helped me grow in many areas: doing user research, building clear user flows, creating helpful wireframes, and thinking visually. I now understand better how good design can guide people and make their journey smoother, even in something as practical as planning a trip.