Role: Product Designer

Duration: Oct 2020-Nov 2020

Type: iOS Mobile

Tools: Figma, Expo, Principle

Collaborators: Melanie Cho (Product Designer), Darwin Feveck (Engineer) and Kevin Blake-Thomas (Product Manager)

Overview

TravelMeetEat started a design update on the sign-in and sign-up experience with the vision of creating a better user-friendly flow. This project was to identify the problems and find solutions for the best onboarding experience for our users.

Background

TravelMeetEat is a friend-find app for travel foodies to connect and share their food and travel experiences. Learn more about TravelMeetEat.

I joined TravelMeetEat as their first designer in a team with two engineers and one product manager. I am responsible for leading all of the UX and UI designs. The first task I was given was to help build a better sign-in and sign-up experience for our users.

Original Design

The original sign-in and sign-up designs were outdated and overwhelming. We wanted to simplify and modernize the experience for our fellow foodies by making it more attractive and pleasing to the eye.

 
 

Observation

Some of the problems observed were:

  1. the background was too busy and cluttered

  2. the font sizes and spacings were inconsistent

  3. the call to action (CTA) was either not visible or too low

  4. the icons being used was confusing

Some of the potential solutions were:

  1. changing the background to a solid color and a different picture

  2. being consistent with the font size and spacings

  3. making the CTA more clickable

  4. finding icons that are familiar for users

Wireframes

We used the traditional method of pen and paper to wireframe our basic flow for this project. We wanted to include as many possibilities as we can to completely understand our user needs and plan out the best experience.

Low Fidelity Design

We started this redesign process on Figma by trying out different layouts to understand what worked best for TravelMeetEat. It helped us decide whether we wanted to revise the current onboarding process or to completely change the design.

 
 

Initial Design

After sketching the wireframes, we moved on to starting the Initial Designs for a more polished flow.

Team Feedback

In this phase, we looked over and discussed the designs for each screen to choose the best experience for our users.

Some of the feedbacks were:

  1. change the initial login screen

  2. the initial look gives a modern, less busy and more focus on the CTA’s

  3. the logo needs to be a little bigger

  4. Baloo is a fun and casual

  5. Lato looks cleaner and better for this experience

  6. what is the right copy for the Facebook, Google and Apple CTA’s?

  7. looks good

After reviewing and discussing the new designs as a team, we agreed that using the Baloo font for the onboarding screen and Lato font for the other screen was how we wanted it to look.

High Fidelity Design

After the feedback session, we worked on making the edits that were needed and finalizing the designs to show the team.

 
 

Visual QA

After the engineers finished implementing all the new designs into our TravelMeetEat app. We walked through the new design experiences using a platform called Expo. We pointed out some of the mistakes in the spacing and wording that we previously missed. Once those edits were made, we were ready to launch version 2 of TravelMeetEat’s app.

Final Prototye

Takeaways

TravelMeetEat’s account update was our first project as a team which allowed us to learn more about everyone’s working method. It was a challenge in a challenge, but we were able to overcome it and successfully finish this project. This project is one of many other projects to come to help mature our product at TravelMeetEat.

Some of the next steps for TravelMeetEat are:

  1. Look over the account update and find any edits needed

  2. Creating a better messaging experience

  3. Working on the onboarding experience for business accounts

  4. Updating the cutting board (newsfeed) experience