Overview

Client: UI student project at CareerFoundry

Platform: Mobile and Desktop Application

Duration: 1.5 months

Role: Visual Direction | Visual Design | UI Design | UX Design | Co-ordinator | Project Lead

Skills: UX Research | Usability Testing | UI Design | Visual Design | Logo Design

Tools: Sketch, OmniGraffle, Usability hub, Invision, Adobe Photoshop, Marvel App

Context

This app was a part of student project, to create a location based recommendation app.

Problem

Travel industry is getting more and more affordable in the past few years, with competitive air fares, accommodation options and globalization. More people want to explore the unknown parts around the globe. With this rising demand more and more apps are coming in the market which give users lot to think about. I started this project by studying few of these apps like Trip Advisor, With Locals, Lonely Planet Guides to name a few and based on the initial market and user research. My challenge was to create an app that offers a personalized experience for its users, by taking into consideration their preferences and create a product that would give the users a chance to engage with each other by sharing their experiences on a social platform.

EMPATHIZE

The first step was to research the business goal, users needs and requirements. I wanted to make sure that they align with each other. I used Competitor Analysis and Research Learning Spiral method to do that.

Competitor Analysis:
I performed a detailed analysis on two biggest travel apps: Trip Advisor and Lonely Planet Guides. It was divided into 3 main groups - 1) Competitor Overview 2) SWOT Analysis and 3) UX Analysis.

Research Learning Spiral

Next I used Research Spiral Method to identify the Objectives for this travel app and derived a Hypothesis. The next step was to conduct interviews, for this I chose 3 users particularly from different background and age groups. Based on the answers I prepared a Synthesis where I compiled the insights I gathered from my user interviews and made a note of any interesting patterns, or comments. To read the details please Click Here

Finding Objectives:

Hypothesis

Users can get more personalized experience by focusing on their preferences. Travel itineraries, recommendations for places to eat, shop, stay, help them to search everything related to their travel, or upcoming vacation. Including forums where they can open a conversation with other users could be really useful. If there is an inbuilt feature like a planner where they can document everything including tentative travel plan, things to do, itinerary etc could be useful as well.

User Interview Questions

I conducted user interviews with participants. I had 5-7 questions prepared for this interview and then recorded the answers of each participant. Here are few user interview questions and answers:

Synthesis

Based on the user questions and answers I was able to compile a synthesis such as were there any patterns emerged, what were the frustrations or any surprising answers.

DEFINE

MVP: The purpose of this app is to create a personalized experience for its users, by taking into consideration their preferences, thus only displaying custom search results and offer features like travel plan, expense tracker, save itineraries at one place, which would offer convenience while traveling.

User Stories & User Flows

Next step was to create User Stories for different User Scenarios by taking into consideration the user requirements. For each story I determined an Entry point, as in how the user can access that particular feature or which steps would have to be taken and the success criteria. I then developed a user flow for each user story. Here is a snapshot of few of them.

Sitemap

I combined the user flows into a sitemap to determine the flow of my app.

Success Metrics

1. Number of downloads

2. Number of sign ups

3. App Reviews & ratings

4. Number of followers

5. Feedback or reports submitted by customers

6. Monthly Active users

7. Total Ratings & Reviews

Lean UX

Involve User’s Early On -

For my travel app I have started this process of conducting research through user interviews, developing user personas, to understand their mentality, perspective & get a deep insight of what they are looking for, this means I may have to make some changes, add few things which I actually never intended, or get rid of some features in the design. This will impact the overall outcome of the product in the right direction.

Practice collaborative design -

Sometimes you work with a large team & sometimes small, but to improve your thought process, it’s important to keep an open mind & to have an open conversation involving everyone, listen to their feedback. For my travel app when I shared few points & ideas with people involved in the process I came with some intersting points, so I always make a note of it & reflect those changes in my design.

Develop User Centric Features -

As a designer we have this urge of thinking something out of box, but users might have completely different needs & putting some effort & time in the research process is important. To understand their mind set & expectations. When I started working on my location based recommendation travel app, I wasn’t planning to add features like saving itineraries or expense tracker but when I started conducting real user interviews, I actually discovered, that is something the users would like to see in the app, the fact to jump between multiple apps frustrates them. I was also thinking about including features like audio books but looks like users are not really interested in that as much. So now my design will be focused on these key issues & finding appropriate solutions to the users problems.

Remove waste -

I want to keep my design simple yet aesthetically pleasing. The information used shouldn’t overwhelm the users wondering where to look at. Travel app consists of lots of features, functions so it will be definitely a challenge to manage the space. A cluttered app with too many options & images at once can be distracting & off putting.

Get out of the deliverables business -

I must be ready to make iterations to best suit my users needs, their feedback, my team’s feedback. I will have to invest time in creating wireframes, sketches but the main goal here is to provide user with an efficient & functional app.

Fail Early & Often -

Don’t be afraid to present or share ideas with your peers or seniors with fear that you would fail. There is nothing to be discouraged about if you don’t get right the first time. Instead, you will learn something new with each failure, this applies to any project you will be working on as a designer too.

Tailoring your toolkit -

I need to make the conscience & logical decision about which tools & UX principles are suitable to my design/project. Investing some time in researching them. The most important thing is choosing what will allow me to make the most effective final product.

User Personas

Based on the information gathered from user interviews, I developed three user personas for my travel app, those were the best representation of the user base - 1) Young, single or couple, explorers 2) Middle aged frequent travelers 3) Middle aged travelers with family

IDEATE

For this phase of my project, I started out with some sketches for the initial ideas of the login, onboarding and rest of the screens. I had at least 3 rounds of iterations of these sketches before I was satisfied.

Crazy 8’s / Low Fidelity Wireframes

I used Crazy 8’s method to sketch some initial ideas for my travel app screens. Below is a snapshot of few screens, I used user stories to determine the user flow of this app.

Rapid Prototype

Next, I build a rapid prototype in InVision and incorporated my low fidelity wireframes. The reason to do this at such an early stage was to address the key issues in the overall flow of my travel app.

USER TESTING ROUND 1

Once my rapid prototype was built I performed a Usability Testing on three users. I determined the goals and objectives and provided the users some user scenarios and documented their feedback in the form of notes along the process.

Goal:

• My goal of conducting this test is to find out how convenient & comfortable is it for the users to use this app.

• When would they prefer to use it, before they are planning a vacation or trip their trip/vacation. This app contains lot of features & functions like travel inspiration board, travel planner, expense tracker, how do the users feel about it? Are they easy to find or understand.

• What problems do they run into?

Objectives:

• Are users able to successfully login & sign up?

• Are users comfortable providing their personal information during onboarding?

• Are the features in the navigation bar clearly indicative?

• Are the features, functions, icons easy to understand?

• Some features are also included in the user profile are they difficult to find?

• How do the users feel about sharing their profiles, or other information with fellow users?

• Is it easy to navigate on the homepage?

• Are there any features they feel they wouldn’t use much or are redundant?

Test Plan:

Testers: 3

Scope: • Travel app prototype in Invision

• Navigation

• Features

• Fuctionality

Equipment • iOS & Android

• Print out of the test script

• Print out of the questions or tasks for each participant

• Notepad

Notes:

To see the detailed notes please click here

Result Synthesis & Error Rating:

I analyzed the users answers and notes into issues and used Jakob Nielsen’s error severity rating system to rank the issues and proposed suggestions in my design.

IDEATE (ITERATION 2)

Based on the result synthesis and proposed solutions I decided to make some revisions in my design. Here is a synopsis of the final features in this app.

Mid Fidelity Wireframes

After couple of iterations, once I was satisfied about the overall flow of the screens, I digitized them in Sketch using grids and layout spacing.

UI DESIGN

Based on the information gathered from user interviews, I developed three user personas for my travel app, those were the best representation of the user base - 1) Young, single or couple, explorers 2) Middle aged frequent travelers 3) Middle aged travelers with family

Mood Board

I used sources like Muzli, Awwards, Pinterest (to name a few) to find inspiration for the visual direction of my app. To check out the detailed document please Click Here
Based on the inspiration pieces, I created a Mood Board using hues of blue and red to represent the globe/Earth, outdoors, travel, exploration and experiences.

Style Guide

Based on the mood board I created a style guide t determine the primary and secondary color scheme for this project. I used white as my background color and blue and red as accent colors for the buttons and other UI elements.
I compile a comprehensive guide consisting button styles, icons, typography, imagery and logo design.
Please Click Here to view the full style guide.

Preference Testing

Next step, I applied the style guide to my mid fidelity wireframes and before I finalized the UI for all screens, I conducted a preference testing for the mobile homepage design. I wanted to test out two options - Option 1: view Options 2: Tile view for images
Total 31 people participated in this survey. And options 2 (Tile view) received 55% votes.

You can view the detailed report of the test at usabilityhub.org here https://app.usabilityhub.com/tests/cba60d1385dc/results/1a43d9f39e03

Final Screens

After round of user testing, iterations, preference testing I created the final UI for my travel app.

USER TESTING ROUND 2

Once my high fidelity wireframes were complete, I conducted another round of user testing. I did this by making an interactive prototype in Marvel App. I documented the positive and constructive feedback from the users and made the iterations in my design.

RETROSPECTIVE

Challenge:

This subject was vast, there were lot of points to consider so the challenge was to decide which features to focus prominently. The technique of gathering requirements & dividing them into two sections Iteration 1 & Iteration 2 really helped me, I could separate the  issues based upon which are critical & needs to be addressed first & foremost & the ones which can be done later. 

What Went Well?

User research: I think conducting research on users with different backgrounds & needs gave me a right perspective & some really good ideas to work with. Applying different methodologies like user testing, differentiating between needs & wants, helped me to achieve features that users really liked & are rare to find in other apps.

What Didn’t go Well?

User Flows: When I initially started I had quite a lot user stories & developed user flows accordingly, but as the design evolved I realized that some of the flows did not translate properly or even got overlooked.