Create a spontaneous and memorable road trip.


In UXDG310 class, we learned to design our first UX project with the prompt of creating a travel app.

We created Wandr. to reimagine the road trip experiences with features that find hidden gems along their routes and make planning a trip easy and fun.


In this case study, I document my process and insights as I learned to design UI for the first time. I also explored accessibility within our design system and learned how to collaborate with a Graphic Designer.


UI Lead


Maddy Bay, Zach Hoedl, Chi Quach


10 weeks, January - March 2022


Figma (Wireframing, Prototyping, Visual design)
Figjam (User flow, Affinitization)
Adobe Illustrator (Illustration, Iconography)

Create and edit
your roadtrip routes

Invite friends and
plan group trips

Spontaneously swipe
and discover new place

Beat the boredom with
in-car entertainment

Share memories with
friends and family

Celebrate and recap
your roadtrip journey


Find our opportunity

Competitive analysis

There are a lot of existing apps focus on navigation and booking process sector. However, there are only fews focusing on emotional aspect of traveling but their UX can be more personalized.

User segment research

Segment research

We narrow our target users to Gen Z, Millennials, and Gen X, as Baby Boomers may have different travel preferences and mobility considerations.


Interview the road trip lovers

We conduct 6 in-depth interviews to learn more about our users’ most and least favorite aspects of road trips.

Planning a road trip with your friend group is fun, but trying to compromise everyone's preferences and schedules can be a real headache

There are limited entertainment options available, especially if you don't have access to Wi-Fi or mobile data.

Driving for hours on the same road, seeing the same views, and doing the same activities can get boring after a long time

user flow

Craft our design

Every features aims to solve the pain points we gathered from our interviews with users.



Learn from the best practices and principles.

Venmo - Navigation bar

Since our ‘Explore’ feature is the hero of our app, we wanted to make it stand out.

Tinder - Swipe

For a spontaneous voting feature like ‘Explore’, we thought Tinder ‘Swipe’ would be the perfect inspiration.

Uber - Route

We loved the use of numbers to indicate the sequence of stops, and we also enjoyed how Uber allows users to reorganize the order, edit, and add more stops as needed.

Spotify - Layout

We draw inspiration from the use Gestalt Principle of Proximity and Similarity in Spotify into our design.

Regconition rather than recall

Inspired by how Apple label their back buttons to let the users where they will return to, I incorporated that in our design as well.

Bring analog into digital

From our interviews, I noticed that people loved bringing their polaroid camera on their road trips to capture memories so we wanted to integrate that experience to our app.

Maintain consistency in spacings and sizings

I use multiplication of 4 to apply to all our sizes for components, fonts, icons, illustrations, margins, and paddings.

aha moment

Graphic Designer has their own way of setting up their grids

‍In graphic design, Zach approached his work from the grid 'inside out', contrasting with what I've learned from other UI resources, where many designers begin with central elements and work outwards. We decided tZach's grid as a foundation and then ar the elements using my center-outwards approach.

design system

Learn from the best practices and principles.

We regularly tested it to ensure it met accessbility standards.

WCAG AAA and AA color pallete

Our graphic designer chose light yellow, blue, and smoky white as our brand colors. I then selected color pairings that comply with WCAG AAA and AA standards.

Color blind test

I test our UI for Tritanopia since blue and yellow are our main accent colors. I also test when our prototypes without color to ensure the contrast for legibility.

Touch target for buttons

I made sure that every touch target for clickable buttons are larger than 44px x 44px.

Labelled icons

Our team wanted to create our own set of icons. To optimize the accessibility, I suggested to label the icons.

Inclusive typeface and writing

I intentionally chose Manrope, a typography that supports 264 languages. For our UX writing, we keep our language simple, concise, and clear to understand.

User interview and testing

To create an inclusive experience for Wandr., I involve a diverse range of users in our research and testing.

aha moment

Learning about accessibility principles is the best way to learn UI.

Living with my grandparents and helping them with their iPads and iPhones has made me become intrigued in accessibility in UI. Throughout this project, I spent a lot of time studying WCAG guidelines, Apple accessibility handbook, Microsoft Inclusive Design Toolkit, and Google Material Design. I also shared what I learned with my team.


Visual hierarchy is important.

We conducted 2 testing rounds in order to collect as feedback as possible.

aha moment

We could have tested earlier during the wireframe stage.

Since we adhered to our class's process and conducted testing after the first version of our high-fiprototypes, it took us more time to implement all the changes based on the testing feedback. We had to change our components and ungroup the layout, tasks that would have been simpler had we modified during the rapid prototyping/wireframe stage


Trust the process and testing is the way to go.

I had a blast working with Maddy and Zach. I always looked forward to our team meetings and had the best time with them. It was an interesting experience learning from a graphic design perspective and sharing my interest with accessibility with them.

Design for someone, not everyone

Instead of being universal, I learned to take into account of edge cases within my target audience that may use the product in unexpected ways which can make my product more relevant, accessible, and meaningful.

Progress over perfection

Coming into this project, I had high expectations for how the project would turn out, but at times, I forgot that it was a team effort, not solo work. I wish I had left more room for Zach and Maddy to be involved in the UI and not too nitpick about small details. However, I learned a lot about layout, grids, and iconography from Zach, as well as how to conduct research from Maddy. Loved working with you guys!

other projects

Check out more