Project Collection

Project Collection

Wayfarer Case Study

Wayfarer Case Study

Wayfarer Case Study

Project Overview

Role

UI/UX Designer

Team

Individual project mentored by Bob Ricca and Diana Martinez

Timeline

8 weeks; May 2024-July 2024

Tools Used

Figma, Adobe Firefly, Chat GPT, Google Meets, Google Fonts

Note

My first ever UI/UX design project, with a multi-step form and breakpoints created for mobile, tablet, and desktop. Wayfarer is a design brief provided by Designlab, and us students were tasked to create an original design.

Project Background

Problem

Aspiring travelers need help with travel inspiration specific to their tastes and are having trouble finding the customization they're craving.

Solution

Providing travelers with a way to input what kind of trip they're looking for so they can get the results they care most about.

What is Wayfarer?

Enter Wayfarer, a website that helps you book travel and activities with recommendations based off precisely what you're looking for. Customize your travel experience by finding a destination specific to your needs, complete with excursions and options for local experiences. You can search by the most popular destinations, or take a quiz to get answers completely unique to your traveling party.

Project Goal

We want to design an intuitive way for travelers to find their next travel destination. While I want to create a beautiful design, my priority is to create a site that is functional and easy to navigate using common design patterns like components and information architecture.

Design Process

Becoming familiar with principles

In the initial stages of this project, we were asked to sketch and create lo-fi wireframes of the Wayfarer site homepage. Through this process, I was able to become familiar with Figma, grids, generative AI, and Gestalt principles.

Process Documentation

In the pictures below you'll see my process of building out the homepage:

  1. Lo-fi wireframe of homepage

  2. Hi-fi completed wireframe of homepage

  3. Sketches of input form user takes to customize travel experience

  4. Hi-fi wireframes of input form user takes to customize travel experience

Responsive Design

Designing for mobile

If a user accesses a website on their phone, the site would need to be responsive in order for them to view it effectively. That includes appropriately sized images and text, and making the most of phone-native features like location services and account information autofilling for the user.

Keeping that in mind, I adapted my Wayfarer homepage design for mobile devices:

Key Takeaways

Reflection

Wayfarer is my introduction into hands-on UI/UX design. I was able to learn so much about design essentials, particularly finding components and Gestalt principles useful.

Future Notes

Some changes I would take forward into future projects is making more use of Figma grids and layer organization. I was still getting introduced to Figma during this project, and looking back I see how staying on top of naming layers and using grids would contribute to standardization and consistency.

Project Overview

Role

UI/UX Designer

Team

Individual project mentored by Bob Ricca and Diana Martinez

Timeline

8 weeks; May 2024-July 2024

Tools Used

Figma, Adobe Firefly, Chat GPT, Google Meets, Google Fonts

Note

My first ever UI/UX design project, with a multi-step form and breakpoints created for mobile, tablet, and desktop. Wayfarer is a design brief provided by Designlab, and us students were tasked to create an original design.

Design Process

Becoming familiar with principles

In the initial stages of this project, we were asked to sketch and create lo-fi wireframes of the Wayfarer site homepage. Through this process, I was able to become familiar with Figma, grids, generative AI, and Gestalt principles.

Process Documentation

In the pictures below you'll see my process of building out the homepage:

  1. Lo-fi wireframe of homepage

  2. Hi-fi completed wireframe of homepage

  3. Sketches of input form user takes to customize travel experience

  4. Hi-fi wireframes of input form user takes to customize travel experience

Project Background

Problem

Aspiring travelers need help with travel inspiration specific to their tastes and are having trouble finding the customization they're craving.

Solution

Providing travelers with a way to input what kind of trip they're looking for so they can get the results they care most about.

What is Wayfarer?

Enter Wayfarer, a website that helps you book travel and activities with recommendations based off precisely what you're looking for. Customize your travel experience by finding a destination specific to your needs, complete with excursions and options for local experiences. You can search by the most popular destinations, or take a quiz to get answers completely unique to your traveling party.

Project Goal

We want to design an intuitive way for travelers to find their next travel destination. While I want to create a beautiful design, my priority is to create a site that is functional and easy to navigate using common design patterns like components and information architecture.

Responsive Design

Designing for mobile

If a user accesses a website on their phone, the site would need to be responsive in order for them to view it effectively. That includes appropriately sized images and text, and making the most of phone-native features like location services and account information autofilling for the user.

Keeping that in mind, I adapted the Wayfarer homepage design for mobile devices:

Key Takeaways

Reflection

Wayfarer is my introduction into hands-on UI/UX design. I was able to learn so much about design essentials, particularly finding components and Gestalt principles useful.

Future Notes

Some changes I would take forward into future projects is making more use of Figma grids and layer organization. I was still getting introduced to Figma during this project, and looking back I see how staying on top of naming layers and using grids would contribute to standardization and consistency.

Let’s problem solve together!

hihilaryy@gmail.com
Linkedin

Let’s problem solve together!

hihilaryy@gmail.com
Linkedin

Project Overview

Role

UI/UX Designer

Team

Individual project mentored by Bob Ricca and Diana Martinez

Timeline

8 weeks; May 2024-July 2024

Tools Used

Figma, Adobe Firefly, Chat GPT, Google Meets, Google Fonts

Note

My first ever UI/UX design project, with a multi-step form and breakpoints created for mobile, tablet, and desktop. Wayfarer is a design brief provided by Designlab, and us students were tasked to create an original design.

Project Background

Problem

Aspiring travelers need help with travel inspiration specific to their tastes and are having trouble finding the customization they're craving.

Solution

Providing travelers with a way to input what kind of trip they're looking for so they can get the results they care most about.

What is Wayfarer?

Enter Wayfarer, a website that helps you book travel and activities with recommendations based off precisely what you're looking for. Customize your travel experience by finding a destination specific to your needs, complete with excursions and options for local experiences. You can search by the most popular destinations, or take a quiz to get answers completely unique to your traveling party.

Project Goal

We want to design an intuitive way for travelers to find their next travel destination. While I want to create a beautiful design, my priority is to create a site that is functional and easy to navigate using common design patterns like components and information architecture.

The User

User Interviews

I interviewed 6 people who expressed interest in expanding their social life. We gathered their priorities and found areas where we could address common needs.

User Interview Results

Interest in hobbies

Challenges in forming new relationships

Desire for more social time

Openness to meeting new people

Use of technology for social connections

Potential for a platform to facilitate connections

Group vs one-on-one settings

Responsive Design

Designing for mobile

If a user accesses a website on their phone, the site would need to be responsive in order for them to view it effectively. That includes appropriately sized images and text, and making the most of phone-native features like location services and account information autofilling for the user.

Keeping that in mind, I adapted the Wayfarer homepage design for mobile devices:

Key Takeaways

Reflection

Wayfarer is my introduction into hands-on UI/UX design. I was able to learn so much about design essentials, particularly finding components and Gestalt principles useful.

Future Notes

Some changes I would take forward into future projects is making more use of Figma grids and layer organization. I was still getting introduced to Figma during this project, and looking back I see how staying on top of naming layers and using grids would contribute to standardization and consistency.

Design Process

Becoming familiar with principles

In the initial stages of this project, we were asked to sketch and create lo-fi wireframes of the Wayfarer site homepage. Through this process, I was able to become familiar with Figma, grids, generative AI, and Gestalt principles.

Process Documentation

In the pictures below you'll see my process of building out the homepage:

  1. Lo-fi wireframe of homepage

  2. Hi-fi completed wireframe of homepage

  3. Sketches of input form user takes to customize travel experience

  4. Hi-fi wireframes of input form user takes to customize travel experience

The User

User Interviews

I interviewed 6 people who expressed interest in expanding their social life. We gathered their priorities and found areas where we could address common needs.

User Interview Results

Interest in hobbies

Challenges in forming new relationships

Desire for more social time

Openness to meeting new people

Use of technology for social connections

Potential for a platform to facilitate connections

Group vs one-on-one settings