Project Overview
Project: Academic
Time: 10 weeks
Role: Product Designer/UX Designer/UI Designer
Tools: Figma/InVision/Adobe Suite
This project challenged me to develop a mobile digital product based on the identified problem space.
I spent 10 weeks completing this project from start to end through UX Strategy to UI Design. This case study details the process of creating a mobile iOS app Suitcase.
Methodology
As part of my design process I was leaning on Double Diamond approach to solving problems. I also incorporated the following methods:
-
Crazy 8's method applied to generate wider variety of potential solutions.
-
Primary research conducted via decontextualised recorded informal interviews either online or in person.
-
User testings performed via moderated one-to-one either in person and remote sessions.
“Good company in a journey makes the way seem shorter.”
Quote by Izaak Walton.
Introduction
After noticing a gap in group travel organisation and planning I decided to address and explore that problem space further in order to find a solution.
The goal of this project is to place friends travelling together at the centre of my research to better understand their needs, behaviours, goals and pain points aiming to find opportunities to increase overall experience satisfaction and decrease stress levels.
Discovery Phase 1
Research Planning & Recruiting, Persona, Experience Mappings
Defining Problem Space
Izaak Walton once said “Good company in a journey makes the way seem shorter.” Let me ask you a questions: How many of you went on a holiday with a group of friends?
I am sure we can all agree that travelling with friends is a great fun and adventure, however at the same time can be stressful, and even annoying.
Through my research and interviews I found that no one likes to feel like herding cats or to coordinate everyone’s day.
Dividing trip chores and responsibilities evenly between group of travellers can be difficult, because there always has to be one or two people who would be in charge.
There are plenty of booking apps for accommodation, travel logistics, booking experiences, etc. however there is none that helps to manage every aspect of a trip experience in one place.
Secondary Research
Reviews
I started my research with trying to understand what travellers think about travelling with friends or group travel, what common issues they are facing, and what are their preferences. Getting acquainted with their real experiences helped me to better empathise with the problems they are facing.
Q&A platform Quora provided a great insight into advantages and disadvantages of travelling with friends based on the questions and answers from the real people. This helped me to start shaping the understanding of this problem space further.
.png)
Main Key Findings
Through my research, I learned that travelling in a big group of friends could be either a dream or a nightmare. And it all depends on how carefully you plan for your travel needs.
The below are some of the key findings from some noteworthy sources I collected:
The ability to be both flexible and considerate of the needs of others is crucial when travelling in big groups.
Travelling with others can offer an added level of safety compared to when you are travelling by yourself. Even if you are going to a relatively safe place, a friend can be relied on to watch your bag
Different levels of disposable income and budgets might cause disagreements. It is essential to discuss relevant decisions as a group and reach a middle ground.
Not being in sync - some like to wake up and get the day going and others do not.
It can be frustrating when someone takes forever to get ready, or running late, as well as doesn’t put a fair share.
Members of the group might complain and drag down your mood, or don't want to do what you want to do, causing drama, and being negative.
Competitive Analysis
In order for me to have a more clear understating about what is already out there to help me build my hypothesis, I proceeded with the competitive market analysis, investigating what options does each competitor offer and what functionality does each app have.
Market Positioning Matrix
Based on the competitive analysis I created the Positioning Matrix to have a better understanding of the current existing solutions for managing travel planning.
Defining Hypothesis
Assumptions & Constraints
After re-evaluating my secondary research I came up with the list of assumption and constraints at this stage of my design process.
I chose to build my hypothesis based on the assumption that busy professionals have a need to travel with friends in a more organised, comfortable and less stressful way and these needs can be solved by improving organisation, planning and trip related information accessibility.
-
I believe that busy professionals have a need to travel with friends in a more organised, comfortable and less stressful way.
-
These needs can be solved by improving organisation, planning and trip related information accessibility.
-
My initial users are busy professionals with no children who are fond of travelling with friends
-
The #1 value busy professionals want to get is decreasing time for group travel planning and easy access to all necessary information and travel related documents.
Assumptions
-
How to make other group members interested in using it when travelling together?
-
How to integrate other booking/map/schedule apps and transfer data from them seamlessly?
-
How to make other group members feel safe sharing their personal data?
-
How to make it accessible regardless of country of residence?
-
How to provide offline access to all stored documents: tickets, covid passes, etc. when there is no connection?
Constraints
Hypothesis
I believe that travelling with friends can be stressful, disorganised and inconvenient, because one need to use different apps to keep everything on track and organised, and the responsibilities often fall on one or two people.
I know I am right when interview insights show that making planning and organising easier together with providing all-in-one place to store required information and documents helps to decrease stress and frustration levels and improve quality of travelling experience with group of friends.
Primary Research - User Interviews
Methodology
Primary research were conducted via decontextualised recorded informal interviews either online or in person.
-
One-on-one interviews were focused on participants' personal experience in more detail and discussing in depth what they think about travelling with group friends.
-
To structure user interviews I predefined open-ended questions.
-
Interviews were recorded using Zoom, backed up with iPhone camera and transcripted afterwards via Otterai. Some notes were taken throughout the interview.
Participants Criteria
-
Full-time busy professionals
-
Based in London
-
Age between 25-45
-
No children
-
Have been on holiday with group of friends in the last 4 years
Interviews Summary
The brief summary and some important outtakes from interviewees’ experiences travelling with group of friends are listed below:
Splitting the bill normally becomes quite uncomfortable and awkward.
Travelling with people or friends provides with an opportunity to share memories with them and to create life changing moments and lifelong memories.
Majority of interviewees wished there was a better way of storing and getting access to all trip related information - one single source to communicate and look for stuff.
It's always difficult to coordinate and schedule people's calendars or decisions of what to do.
Even if they don’t actively participate in decision making they still would like to have a say before making final choice.
Organising things can be a burden: having to coordinate and pull up calendars, book tickets, plan itineraries, etc. can be stressful.
Key Findings
By efficiently conducting my qualitative research, I was able to gain important insights into user personal group travel experiences.
Early in the interview analysis I noticed that people’s needs during travelling experience with group of friends were quite similar and consistent, even though their experiences were different.
I interviewed 6 people in order to get better insights into the problem space I am researching.
My key findings analysis and synthesis is presented below:
Main Insights
The following insights helped me to re-adjust my understanding of the problem in a more accurate way based on the main key themes identified through analysing and synthesising interviews findings.
Organisation & Planning
Busy professionals travelling with group of friends wants to plan and organise their travel experiences in an easy and efficient way.
Providing them with better ways of coordinating and scheduling their calendars, itineraries and bookings will alleviate their frustrations and help them feel less stressed.
Access to Information & Documents
Busy professionals travelling with group of friends wants to have an easy access to all necessary trip related information.
Providing them with a single source/all-in-one place to store, look up what they need and communicate with each other will increase their organisation and decrease stress level.
Decision Making
Busy professionals travelling with group of friends wants to have a say when group is making a final decision, even if they don’t actively participate in planning.
Providing them with the opportunity to share their opinion, will help them to feel included into planning process and that their opinion matters to their friends.
Insight Statement
I chose 'Access to Information & Documents' as a main insight to help me synthesise HMW question, as I believe that providing friends travelling together with a single source/all-in-one place to store, look up what they need and communicate with each other will increase their organisation and decrease stress level.
HMW Statement
How might we help busy professionals travelling with group of friends to better manage travel planning in order to improve organisation and make it less time consuming.
Primary Persona
Meet Alex
To help humanise and fully empathise with the wants and needs of the user I have created a primary persona that is based on the interviews key learnings.
This persona will insure my design is aligned with main user pain points, behaviours and motivations to help solve the problem of managing travel planning and organisation when travelling with friends.
Alex is a full time professional. He lives in a city and doesn’t have kids. He is a keen traveller and likes to go on group trips with his friends often.
Alex wants to have an easy access to all necessary trip related information so he can focus on creating lifelong memories with his friends instead of feeling preoccupied with managing organisation and planning.
.png)
Experience Mapping
Experience Mapping Summary
To visualise how my target audience currently experiences the researched problem space I created my persona's experience map.
By documenting Alex’s travelling with friends experience interactions, I deconstructed the existing nature of the chosen problem space and identified several opportunities for design intervention:
-
Reducing time and energy spent on coordinating calendars
-
Reducing time spent on back-and-forth communication with everyone in a group and decision making.
-
Enabling faster and easier decision making process by encouraging all group members to actively take part in voting.
-
To keep all details, schedule, documents in one place.
.png)
Define Phase 2
User Stories, Task Flow Diagrams
User Stories
User Role Development Process
This user role is focused on what matters the most to Alex, which is to have an amazing experience when travelling with friends, that can be achieved through a better planning and organisation level by improving access to necessary trip related information so he can focus on creating lifelong memories with his friends instead of feeling preoccupied with managing the trip.
User Stories Context
User stories are written from the perspective of my primary persona Alex.
Persona Recap: Alex is a busy full time professional. He lives in a city and likes to travel, especially with his friends.
His friends are used to him taking charge for planning, as he is generally very organised person. This doesn’t allow him to enjoy his vacations fully and most of the time he feels like a travel agent rather than a friends.
He wants to have an easy access to all necessary trip related information so he can focus on creating lifelong memories with his friends instead of feeling preoccupied with managing organisation and planning.
Product: Digital Solution
Organising User Stories into Epics
After being compiled through design thinking process, I organised user stories into Epics.
Base on my user persona Alex the user stories were sorted into x3 main functional epic groups:
-
Access to Lists, Information and Documents
-
Decision Making
-
Organisation and Planning
Epic 1
Organisation and Planning
As one of the main pain points derived from the interview findings, this epic reflects user needs for functions that would reduce time and energy spent on organisation and planning when travelling with friends.
.png)
Epic 2
Access to Lists, Information and Documents
This epic reflects user needs for functions that would provide them an easy access to important lists, details, information, documents by keeping them in one place.
.png)
Epic 3
Decision Making
The following epic, based on paints points synthesised from the interviews findings, reflects user need for functions that can enable faster and easier decision making process when travelling with friends.
.png)
Selecting Primary Epic
Organisation and Planning was chosen as the epic to be solutionised.
The decision was based on the assumption that in order for Alex and his friends to be able to have great memories and enjoy their trip, they need to have a high level of organisation and planning in the group for their trip.
This epics directly addresses our HMW question - How might we help busy professionals travelling with group of friends to better manage travel planning in order to improve organisation and make it less time consuming.
Tasks in User Stories
I translated the user stories into tasks and determined the main task flow 'to be able to add an event to timeline'.
I chose this task flow because, in order for Alex to have a more enjoyable and better planned group travel experience, him and his friends would need to be able to add events to the group schedule so they can build a well planned itinerary that is easily accessible to everyone in the group.
I selected 'to notify group mates' as a secondary task to support the primary task flow and enrich Alex’s experience by instantly updating him and his friends about any itinerary changes and helping them to be up-to-date with their overall schedule.
.png)
Primary Task Flow
User Story: As a person who travels with a group, I want to be able to add a new event to my group schedule, so that I can make changes on a fly if needed.
Task: To add an event to timeline
.png)
Secondary Task Flow
User Story: As a person who travels with a group, I want to be able to send reminders about the itinerary changes, so that everyone in a group knows what is our schedule.
Task: To notify group mates
.png)
Task Flow Summary
The Primary Task Flow represents the expected path for the task that Alex would like to complete - to add an event to timeline. This should help Alex and everyone in the group to have a more enjoyable and better planned group travel experience through building a well planned itinerary that is easily accessible to everyone in the group.
He can also send reminders about the itinerary changes to everyone in the group. This will help him and his friends to be up-to-date with their overall schedule while on holiday.
Develop Phase 3
Sketching, Wireframing, User Testing & Prototype
Sketching
Exploratory Sketches
Home Screen
While I was sketching different layout variations, I tried to find the best design for the home screen.
However, the most challenging part was figuring out which features should be placed on the Home screen versus the Current Trip screen, while also ensuring that their visual designs did not appear too similar.
.png)
Exploratory Sketches Trip Timeline Screen
The Trip Timeline is a vertical timeline that provides a day-by-day summary of the entire trip.
The greatest challenge was to present all the necessary information in a structured and concise manner.
Exploratory Sketches Daily Schedule Screen
I chose to incorporate both vertical and horizontal scrolling into the Daily Schedule screen, which allowed me to present a greater amount of information in a more condensed form.
.png)
Solution Sketches
The below solution sketches were chosen as a foundation for mid-fidelity wireframes to represent primary persona Alex's chosen task flow.
.png)
Solution Sketches into Mid-Fidelity
From MVP to Full Functionality
All-in-one destination that caters to the needs of people traveling with a group of friends.
Imagine a Pinterest for travellers - a platform where you can effortlessly store and access all relevant trip information on your phone with just a tap or a click.
Save and share suggestions, inspiration, and destinations with others, or extract flight details and tickets from your email, eliminating the need to search for them in your inbox.
As the primary point of contact for group travellers, or just groups in general, this app will allow you to book flights and accommodations, split costs with ease, reserve events through an interactive map, and book experiences. You'll also be able to get directions and access many other features to streamline your travel experience.
Mid-Fidelity Wireframes
MVP functionality
As a MVP I will be creating a flow for the x2 tasks: adding a new event and sending a reminder to the group members, also keeping in mind that the process of adding the event is performed manually in a meantime.
I identified the following main screens for this flow: Home, Trip Landing screen, Timeline, Daily Schedule, Add New Event, View Event screen.
To enrich user experience I also created some additional supporting screens such as My Tickets, an example of the experience suggestion layout, and Edit Event screen.
User Testing
Overview
To obtain practical and real-time feedback that can be used to improve the current design, I conducted usability testing with the goal of enhancing the user experience of my solution.
During the testing, I observed how users added new events to their trip schedule while on a trip with friends, as well as how they sent reminder notifications to their friends.
The purpose of this testing was to generate a list of usability issues and synthesise an understanding of how to fix these issues to improve future designs.
User Testing Method
-
User research on the interactive prototype was conducted with a total of 10 participants in x2 rounds.
-
Participant criteria - age group between 25-45, living in London with no children, employed and living busy lifestyle.
-
Moderated usability testing sessions were conducted face to face and online in 45 min slots.
User Testing Scenario
Summary:
User wants to add a new event to the group schedule while on a trip and also to make sure everyone in the group is updated by sending a reminder.
This app will be user’s first product touchpoint for better planning and organising not only when travelling with group of friends but also in their daily life.
Goal:
To add a new event while on the trip to the group schedule and send a reminder notification to the group friends who haven’t yet accepted the invite after that.
User Tests Learnings Round 1
-
The results from Round 1 User testing were positive. All 5 testers were able to successfully complete the task of adding a new event to the groups schedule and sending a reminder notification to the group. All tester said the flow felt very intuitive and easy.
-
Some users were expecting to land at the Daily Schedule screen, and found it better structured and more intuitive and pleasing.
-
After evaluate all feedback and creating prioritisation matrix I decided to change the flow by taking the user straight to the Daily Schedule, and add an option for user to choose what view or their schedule overall or daily in the top right corner.
User Tests Learnings Round 2
-
The results from Round 2 User testing were positive. All 5 testers said the flow felt very intuitive and easy and were able to successfully complete both tasks
-
User felt more positive about landing on Daily Schedule view after they tapped on Current Trip at Home screen.
-
Even though the switch between Daily view and Trip Overview helped to improve cognitive load it did not get a lot of positive feedback from the users.
-
Home screen new headers copy tested extremely positive.
-
After evaluating all feedback and creating prioritisation matrix I decided to remove Trip Overview from the flow for now, as it needs more working on and at the moment doesn’t bring in much value. But I plan to bring it back at the later stage and explore it further, as I believe there is a need for this format of the schedule.
User Tests Implementations
Prototype Iterations
To view each round's prototypes click the relevant link:
Mid-Fi Final Iteration
The below iteration of the mid-fidelity prototype was finalised and will be transformed into the high-fidelity version.
Deliver Phase 4
App Icon, Brand Wordmark, High Fidelity Prototype, Marketing Website
Brand Development
Name Ideation
Based on what this app represents I was looking for an elegant short name or a phrase through brainstorming synonyms and associations, combining two names in one, and looking into idioms.
I narrowed down the number of name possibilities to the below four options:
Travelbook
Friends2Gather
TripTroup
Suitcase
Choosing the Name
After the final scan I chose Suitcase as the final brand name selection as it aligns with the product vision and mission more than others because:
-
it relates to travel
-
it is easy to remember
-
it works great for mobile app name (character limit on a mobile screen)
-
suitcase shape is easy recognisable globally
Moodboard Compilation
The below keywords selection sum up the value of the brand and describe the mood, the ambiance and the atmosphere most accurately.
Freedom
Warm
Fun
Adventurous
Logo Final Selection
As the brand logo I chose a suitcase icon - it is recognisable and closely associated with travel.
For the final wordmark solution I chose the Brand name and the icon combo, and selected Poppins for the logo font. It is highly legible, looks modern and fresh, and its round curves remind me of the suitcase trolley wheels.
Mobile App Design
Moodboard Curating
I extracted the following images from the moodboard compilation based on similar colours and mood themes. This selection is build around yellow, blue and white colours.
Colours
I kept narrowing down the moodboard compilation until I could define and derive a group of colours that reflects the feel and ambiance of the brand.
The following colours were extracted from the moodboard I curated for this project. Blue and yellow aligns with the brand values as yellow represents joy, happiness and friendship, and blue represent freedom and inspiration.
Royal Blue Canary Yellow Icy Grey White
Colours Exploration
Based on my moodboard I chose White and Royal blue as my Primary colours, and yellow as a complementary accent colour.
Blue and yellow aligns perfectly with my brand values as yellow stands for happiness, friendship and joy, and blue represents freedom and inspiration.
The final design will be aligned to the following proportions: 60% White, 30% Blue and 10% Yellow.
Brand Font Selection
Simple and efficient typefaces will work well for the apps wordmark, headers and body copy.
After narrowing down my inspiration selection to couple of san serifs with clean lines and sharp edges, I chose Poppins for the logo font and Helvetica Neue as the app Typeface.
They are easy to read on various devices at all different sizes which increases legibility for users. Bold san serifs as headline H1 look complementary to the moodboard and colour palette.
Variations
To help me find the most effective colour placement and combinations I tried multiple colour variations. This gave me a better understanding on which colour parings works best for various components or enhances txt legibility, as well as are aesthetically pleasing.
UI Library
During the development of Suitcase app, I built a user interface library which contains all of the user interface elements used in this digital product.
I catalogued and organised all design elements used in my design, including all colours, typographic sizes, styles, and weights, buttons, components, controls, and design elements.
Marketing Website
A single-page product marketing website with layouts for desktop and mobile.
Moodboard and Colours
UI Inspiration Board
The overall product marketing website look and feel should reflect modern and clean design with clear structure and intuitive flow.
This section gathers examples for UI inspiration for landing page: well-defined structure, well-designed spacing and white space balance, cohesiveness, well applied imagery and copy.
Colours Exploration
Primary colours for Suitcase marketing website are aligned with the brand colours: white, blue and yellow.
Yellow stands for happiness, friendship and joy, and blue represents freedom and inspiration.
Sketching
Exploratory Sketches
Through exploratory sketches I established the main sections for my product marketing landing page:
-
Hero section to provoke customer interest
-
Reinforcing section to maintain user interest
-
USP’s sections to enhance interest,
-
Photo carousel to provoke trust
-
Subscribe section
-
Footer with download CTA
Sketches to Mid-Fidelity
Through further ideation process I have selected few designs to be translated into mid-fidelity wireframe.
The structure of the landing page aligns to persuasion and is built with elements that help to convert potential customers into users.
Mid-Fidelity Wireframes
Mid -fidelity wireframe includes hero section with a strong headline title, reinforcing sections, main USP’s features with prototype screen mock ups, social media photo carousel, subscribe section and footer.
Mid-Fidelity
to High-Fidelity
I replaced the hand mockup with a group image to provoke emotions, as well as to reflect brand values and overall ambience, and to bring more personal approach.
Mid-Fi Wireframe
Hi-Fi Version 1
Hi-Fi Version 2
Responsive Prototype
Hi-Fidelity Prototype
High-fidelity product marketing website with desktop and mobile viewports.
My Next Steps would be to continue refining existing features and developing new app features such as adding interactive map and ‘Go to destination’ feature, creating ‘Book accommodation’ and ‘Book flight’ features within ‘Explore’ section.
Ideate and explore ‘Share location’ feature, where friends could book a meet up or an event by simply tapping on a drop pin on the map.
Expand the product into Apple watch interface to allow users to have a quick glance at their schedules with minimal effort and help them be up-to-date with their group bookings and activities.
Next Steps
Continue refining existing features and developing new app features
Expand the product into Apple watch interface
Ideate and explore ‘Share location’ feature.
Key Learnings
I found conducting user interviews very interesting and learned how important it is to prepare well-thought-out questions in order to get more valuable insight.
Through conducting user testings I learned the importance of well composed questions, value of observation and ability to listen.
But one the most valuable insight for me was this one - don’t afraid to make mistake as they are actually hugely important opportunities for learning and growth.
Importance of well-thought-out questions for user interviews
Value of observation and ability to listen in user testings
Don’t afraid to make mistakes