UI Mobile App Design | 2022

TRAVVISI

Travvisi is an all in one Travel App that allows users to book and plan a trip with friends. My client wanted to create Travvisi with the millennial traveler in mind. By removing the guesswork in vacationing, Travvisi helps users figure out what to do, where to go, and how to get to their next trip.

ROLE & RESPONSIBILITIES

UI Designer

TIMELINE

5 months

TOOLS

Figma

OVERVIEW

The main objective of this project was to create a visual design with wireframes provided by my client. With no previous research to guide me, I had to make audits and enhancements using my best judgment and good UI practices to create a user-friendly interface.

Challenge

Solution

I combined UX principles to improve the look and functionality while adhering to the client's vision.

Sign Up Screen 1.png
Sign Up 1.png
Onboarding 5 1.png
onboardinglast 1.png
Onboarding 7 1.png
Onboarding 6 1.png
Home Screen 1.png
My Trips-1.png
Food Selection 1.png
User Profile.png
User Profile Activities.png
discover 1.png

INSPIRATION

Mood Boards

For my own inspiration, I created a mood board to help guide the voice of the design. I was inspired by blue skies, bright colors, and vacation destinations.

The primary colors of the app and the main sign-up page were directly inspired by the curvature and color contrasts found in this image of the desert. I incorporated a paper plane to balance the space and compliment the plane featured in the app logo.

WIREFRAMES & DESIGN

Finding the balance

I was given a set of wireframes from the client that expressed their desires for pages and features. I was able to note a few opportunities to make the overall design more user-friendly. I created a plan for how I would approach building out these frames while maintaining the integrity of the client’s vision.

Goals:

  1. Consolidate screens wherever possible

  2. Give the user more options in functionality and features

  3. Stay within the client’s needs and expectations with all improvements

Client wireframe vs. final design

Adjustments

  • Filter button for search bar

  • Swipe feature for destination selections to maximize screen layout

  • Recognizable icons to accompany the nav text

Adjustments

  • Created consistency with the swipe feature for layout options and increased image size for visibility.

  • Kept the notification bell to keep users aware of any updates or messages from friends.

  • Incorporated a small add button on images for multiple selections and a large “Add Selection” button.

Client wireframe vs. final design

Client wireframe vs. final design

Adjustments

  • Removed toggle to create category options for the user.

  • Maintained the swipe feature and notification bell for consistency.

  • Created a featured activities section with the option for carousel capabilities.

STYLEGUIDE

To bring everything together, I completed a style guide as a point of reference for the developers.

Brand Resources

Final thoughts and takeaways

As a UI project, done without any research, I believe it would be a great learning experience to apply more UX methodologies to improve upon the flow and design of the app. Eventually, I would like to make iterations that reflect more applied design thinking.