Designing an intuitive travel app for every generation

mobile

travel

Download a PDF version

PROJECT OVERVIEW

Industry

travel

Device

Mobile

My role

UI Design

Duration

6 months

Tools

Figma
Figjam
Miro

ABOUT THE CLIENT

Ryazza is a mobile and web app that helps organize group trips, experiences, and activities. It caters not only to individuals planning trips with friends but also to professional organizers, tour guides, and travel agencies, as well as small tour operators. With Ryazza, users can describe their trip idea, invite friends, collect money, provide all the necessary trip information, and communicate with trip participants. Trip participants, whether casual friends or organized groups, can easily join the trip, make advance payments, and stay informed thanks to instant messages that the organizer can send. The app serves a broad group of people, ranging from millennials to seniors who are taking part in trips organized through a travel agency. Creating an easy-to-use and intuitive UI was crucial to ensure a seamless experience for all users.

Rayzza website

my role

I have been working on this project from the very beginning. I conducted discovery research, performed analysis, created low-fidelity wireframes, developed an interactive prototype, tested the prototype, and prepared the final MVP screens. Additionally, I coordinated the implementation with the product manager and CEO. Since this project is quite extensive, I will focus here on presenting the process of creating the look and feel, brand identity, and final UI.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Design Discovery

Research

To start off, we talked to about 30 people and got around 250 survey responses. This gave us a good idea of what our users like and want. In this case study, I'll be focusing solely on the process of creating the UI for our project. Alongside these interviews and surveys, we also run various UX activities such as customer journey mapping, brainstorming sessions, and creating personas.  While we gathered valuable insights through interviews and surveys, I'll zoom in on how I translated those findings into the user interface design.

VALUe PROPOSITION

As part of our design exploration, we ran Value Proposition Canvas workshops with our team. These workshops helped us dig deep into what makes our project valuable to our audience.
By working together and using this canvas, we analyze our product's key features and benefits, and we looked at how they fit with what our customers really need. It was like putting together a puzzle, but instead of pieces, we were fitting together ideas and insights.
Through this process, we gained a clearer picture of how well our project aligns with our audience's needs and how we can improve it to better serve them. It was a valuable exercise that gave us direction and confidence as we moved forward with our design decisions.

Value Proposition Canvas workshop

MOODBOARD

I put together a moodboard, which was a key step in my process. This board helped me and the team get on the same page visually. By gathering colors, images, and vibes that resonated with the project, I set a clear direction for the design. Think of it as our roadmap—it keeps us focused and ensures that everyone understands the style we're aiming for. It's a simple yet powerful tool that guides us towards creating designs that really hit the mark.

Style Guide

colors

I handpicked primary and secondary colors, text colors, and typography to ensure everything looks cohesive and professional.
When it came to choosing colors, I made sure they matched our brand's identity and message. By picking colors that represent our brand's personality and values, we're making sure everything stays consistent and people recognize us easily.
For text colors, I made sure they had proper contrast and were readable against different backgrounds. It's essential that our content is always clear and easy to read, no matter where it's viewed.

TYPOGRAPHY

For typography, I went with the Poppins font. It's clean, modern, and versatile, meaning it works well for lots of different things. It's easy to read, looks friendly, and gives our project a professional touch. Plus, since it's a Google font, it's free and easy to use for all our web projects.

logo

A logo is a visual symbol that represents a company or organization. It's like a signature that helps people recognize and remember the brand. Logos often combine images, symbols, or typography to create a unique identity.

DESIGN SYSTEM

ATOMIC DESIGN

I created a design system for the Rayzza app from the scratch, using the atomic design methodology. This approach involves breaking down the user interface into smaller, reusable components, such as buttons, forms, and cards. This systematic approach allowed for consistent design implementation across the app, ensuring efficiency and scalability in development.

GRID

In visual design, a grid system helps organize screen elements using columns and rows. For the Rayzza app, I used a 2-column grid. Using this grid helped me organize content better behind the scenes. It made the layout look neat and tidy, which makes it easier for you to find your way around.

Two columns grid template

components

Design components are the essential parts of a user interface. They're created from simple design elements like colors, fonts, and spacing, and they come together to shape the overall appearance of the app. In Rayzza, I designed elements such as buttons, text boxes, and checkboxes and other essentials UI components.

buttons

InPUT & DROPDOWN

BOTTOM MENU

VISUAL DESIGN

onboarding

We've implemented intro screens that appear when user opens the app for the first time. They're designed to showcase some of the app's most important features.

find your adventure

After logging in, users land at the 'Join' tab, the default home screen. Here, users can search for trips they'd like to join, as well as view personalized trip recommendations based on preferences set during account creation.

JOIN THE TRIP...

Users can easily browse different trips on the marketplace or receive invitations. When exploring the details of a trip, joining is as simple as clicking "Join the Trip." Whether responding to an invitation or eager to participate in a public trip, users can become part of the adventure with just a single tap.

...or create your own trip

For those who have a flair for planning, Rayzza is the perfect solution for organizing next trip. Users can add all the details about the trip, from the itinerary to accommodation information and other essentials. They have the option to invite friends directly or share their trip on our marketplace for others to join.
As the organizer, users are in control. They can see who's joining, manage participant requests, handle finances, and keep everyone informed about updates or changes.

SUMMARY

In this project we began an exciting journey of building our product from the ground up. Working on the product from scratch was not only challenging but also incredibly rewarding. It sparked creativity, fostered collaboration, and made the process a lot of fun. We started by understanding our users' needs and then used workshops to shape our product's value. With a carefully crafted style guide and design system, I ensured consistency and efficiency in the designs. As I look forward, I'm excited to continue developing this app, making it even better with each iteration.