Create a spontaneous and memorable road trip.
context
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.
OVERVIEW
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.
role
UI Lead
team
Maddy Bay, Zach Hoedl, Chi Quach
TIMELINE
10 weeks, January - March 2022
TOOLS
Figma (Wireframing, Prototyping, Visual design)
Figjam (User flow, Affinitization)
Adobe Illustrator (Illustration, Iconography)
.webp)
Create and edit
your roadtrip routes
.png)
Invite friends and
plan group trips
.webp)
Spontaneously swipe
and discover new place
.webp)
Beat the boredom with
in-car entertainment
.png)
Share memories with
friends and family
.png)
Celebrate and recap
your roadtrip journey
MARKET RESEARCH
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.
.png)
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.
USER INTERVIEW
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.
.png)
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.
%201%20(1).png)
wireframe
USER INTERFACE
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.
.png)
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.
.svg)
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.
USER TESTING
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
REFLECTIONS
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!
