“Travel facts depending on where you are and where you are from.”

The Problem

There are plenty of websites, blogs and apps about travelling. Users tend to read compulsively about country destinations, spending a lot of time, but they end up confused and feeling vulnerable when they travel.

Save time and avoid confusing information when looking for information about the country we are travelling without missing relevant information. I wanted to create a way to find information accurate and easily digest content for occasional travellers/people interested in worldwide facts that don’t like or don’t have the time to read long travel guides.

Objectives

There were a couple of things I wanted to accomplish. First, reduce the amount of content and time that we need to consume when looking online for relevant information about the country people are interested in or travelling to.

The Process

The process was based on a Human-Centered Design approach to ensure that my design decisions are supported by user research and feedback.

Discover: Discover ways you can approach your challenge and find people to talk to about the matter. Ideate: Once you have enough information to solve the problem, use your creativity to think up solutions. Prototype: Turn your ideas (based on real feedback!) into tangible designs.

1. Discovery

USER RESEARCH

I wanted to learn about how people look for info when planning their trips: what they look for, what worries them, what methods they use to save travel information, and how they access them later. So I conducted three interviews through phone and in-person.

The interviews allowed me to gain a deeper understanding of the participant’s behaviours, fears and needs. The main takeaways from the interviews were:

  • They think there is a lot of content so it is not easy for them to keep track of everything.
  • They spend a lot of time doing research however they still get stressed when they travel.
  • Even people with a lot of experience don’t feel confident 100%.
  • They research restaurants, hotels and reviews, but they don’t about security information or basic knowledge of the country they are heading. Some people even think that 911 is the emergency phone number for all the countries in the world

PERSONAS

I used the interviews info to construct provisional personas, to help me understand and create a clear idea on how to help them to achieve or get closer to their goal.

USER STORIES

I created a few user stories based on my assumptions of what a possible user journey could be.

2. Define

ANALYSIS AND SYNTHESIS

I  try to break down all the details related to the users’ problem into smaller pieces. Then I organised and pieced the puzzle together to interpret the data I had and create the problem statement.

How might we provide an easy way to find the embassy contact info when there is not good reception?

  • Showing just info related to the country and user’s citizenship.
  • Breaking down the information for topics.

How might we provide a list of things she finds essential about the country she will travel to?

  • A saved list of the possible needed info.

How might we keep the medical info of Inma easy to access in case of emergency?

  • Adding a section where she can save the medical and contact info in case of emergency.

INFORMATION ARCHITECTURE

After identifying a solid set of main features, I organized and structured the content to show the hierarchy of major and minor elements. It will give me an idea of how to organize content and how many interactions or screens it’ll take to complete a task

USER FLOW

I create two possible flows that allow for a seamless and coherent user experience assuming that the user may be looking for safety features or creating an account.

This flow shows two types of users and scenarios:

  • A user without an account who needs to find his embassy in a foreign country.
  • A user who wants to create an account.

I created the following flows because I wanted to have a natural or common task with the app from start to finish.

3. Ideation

LOW-FIDELITY WIREFRAMES AND POP TESTING

By this point, I had already gathered enough information to get started with some sketches. First, I did a quick POP testing to see how the user feels about the initial flows.

MID-FIDELITY DIGITAL WIREFRAMES

After a few observations and feedback from the POP testing, I moved to create MFW in order to focus more on the overall picture of the significant flow and explore alternative possibilities and bring some clarity to the idea.

4. Prototype

MID-FIDELITY DIGITAL PROTOTYPE

I included essential information and navigation elements on-page that hold importance without getting distracted by visual appeal and aesthetics.

5.Validation

USER TESTING

I conducted user testing on my mid-fidelity prototype on a mobile phone to see how users interact with the prototype. For example, I was curious if they knew to scroll or tap on specific screens and their reaction to the initial product idea. The goal was to identify pain points that could be improved in future iterations.

FEEDBACK

I had great feedback on how easy and straight forward was to navigate and how they liked that. Also, I noticed some adverse reactions in some fields that made me think about, especially for the non-techy ones.
I put together the initial findings, and I did some implementations to find possible solutions in this initial design process.

6. UI and high-fidelity prototype

BASIC UI STYLE GUIDE

After I implemented some litter changes from the feedback into the wireframes, I started working with visual design. Below are some of the visuals applied to the project’s prototype.

COLOR

TYPOGRAPHY

BUTTONS STATES

HIGH-FIDELITY PROTOTYPE

You can observe essential information and navigation elements on-page in the prototype that holds importance without getting distracted by visual appeal and aesthetics.

RECAP

Creating an end-to-end mobile app for a web app was certainly a big challenge and a milestone for me. I have learned that everybody has different points of view for each problem and how important are signifiers and feedback.

Although this project was a class project I will keep looking for more feedbacks and ways to implement them to conclude with a solid prototype, I would still like to continue testing and improving the design. The next step would be to hand-off red lines and the final prototype screens to developers.

If you have a question about the project or you would like to give me feedback please send me an email

Client: Student Project // Product: App design // Medium: Digital // Role: UX/UI designer // Tools: Figma, Illustrator, Photoshop, G Suite