Left Companion App Mockup
Project Cover Image

Companion

Left Companion App MockupRight Companion App Mockup
Project Type
UX & UI
Client
Napier University
Project Timeline
3 Months
Overview
After prior research revealed the downturn of tourism during the COVID-19 pandemic, the challenge consisted of creating an app that would bring people back together and help restart the economy.

The concept included the ability for users to connect with like-minded people with customised profiles and prompts incentivising social interaction, especially with locals. Although the main purpose is to connect with local people and businesses, the user can explore the surroundings on their own.
Figma LogoMaze LogoAdobe Illustrator LogoTeams Logo

Process

Discover

1 |

Research

User Interviews

Define

2 |

Personas

Mood Boards

Develop

3 |

Ideate

Wireframe

Deliver

4 |

Prototype

Test

1 | Discover

Discover

Research Strategy

Companion is a new concept, therefore the research approach firstly consisted of gaining a background understanding of relevant subjects to build a basis. In order to maximise output from research methods, research questions were formulated before hand.

What makes an authentic tourist experience?

How is the sharing economy linked to tourism?

Is it possible to improve tourism platforms through Design?

Could an application improve the touristic experience and connect the local and tourist community?

Background Research
Primarily investigating Scottish tourism, the sharing economy and how the two subjects relate. By developing an understanding of the industries, it was easier to find an area to focus on using convergent thinking.
Competitor Analysis
Looking at what is already on the market helped to gain an insight analyse the demand. It also served as a way to gather inspiration, analysing app features, UI elements and more.
User Research
Defining the target audience and identifying their needs was a crucial step before development. Through primary research including interviews and secondary research such as looking at statistics of similar apps the target audience was defined and user personas were created.

Background Research
Google Scholar

What is Sharing Economy?

Sharing Economy Growth

Although it is a loose term, generally it’s the collaborative consumption of resources and activities. Sharing economy activities fall into four broad categories: recirculation of goods, increased utilization of durable assets, exchange of services, and sharing of productive assets.
The sharing economy is valued at 15 billion USD and is projected to accumulate 335 billion within the next few years. Tourism and hospitality played a major role in the growth of the sharing economy with services such as Airbnb or Uber.

Why People Participate

Users Want Authentic Experiences

Most commonly they are seeking better value for money, sustainability, and an authentic experience. But there is also that social aspect that could be viewed as a motivation by some.

By avoiding middlemen and other running costs, this is where users on a platform like Airbnb could charge less compared to hotels. The sharing economy also tends to be viewed as decreasing the demand for new products and making use of current ones in circulation making it sustainable.
Travelers are demanding more authentic experiences with deeper meaning, moving away from the artificial, mass-produced or material way of tourism and are more inclined to live through real experiences.

Whilst it's difficult to precisely define an "authentic experience", there is a common trend that has ties with the local population and the culture of the destination.

Background Research
Visit Scotland

2021 Decline in Tourism

Scotland has suffered major withdrawals in the tourism sector due to the COVID-19 pandemic. Anxiety, loneliness and loss has effected many people. Many businesses had to shut their doors and people spent less, leading to an economy that was crashing.
International Tourism Performance of Scotland 2015-2021

Scotland in Emotion

These are the main emotional expectations of tourists. The wild nature and rich history of Scotland is often the reason why so many choose to visit. Including the warmth of people that make for an authentic experience.

Awe

Spirit

Connection

Escapism

Background Research
Ted Talk

How Airbnb Designs For Trust

Trust in the Sharing Economy

Trust is the foundation of the sharing economy. It allows people to feel comfortable relying on strangers, making transactions and working together.

Trust ensures that shared things are taken care of, services are provided as promised, and everyone stays safe. Without trust, the sharing economy wouldn't be able to build the important relationships needed for sharing resources and services effectively and for a long time.
Joe delivered a thought-provoking presentation on Airbnb's design thinking, going into its impact on their business and highlighting its crucial role in addressing the "stranger danger" bias.

In the presentation, Joe explains how design helped break that bias. By implementing engaging design such as prompts suggesting what to write about yourself or a well built reputation system.

Joe Gebbia
Co-Founder of Airbnb

"
We prefer people who are like us, the more different somebody is, the less we trust them.
"
Building the right amount of trust takes the right amount of disclosure.
"
A well designed reputation system is key for building trust.
"
The sharing economy is commerce with the promise of human connection.

Competitor Analysis

Airbnb LogoAirbnb User Interface ImageAirbnb App Rating
Accommodation rentals and experiences.
Pros• Cheaper alternative to hotels
• Concise booking system
• Clean UI
Cons• Poor turnover because of COVID-19
• Objectivity of guests reviews
• Legal regulations
withlocals Logowithlocals User Interfacewithlocals App Rating
Personalized tours and experiences.
Pros• Great idea generator when travelling
• Provides an exclusive service
• Supports locals
Cons• Only works in certain cities
• Limited options
• No free tours
Couchsurfing LogoCouchsurfing User InterfaceCouchsurfing App Rating
Find local hosts and events.
Pros• Focussed on the social engagement
• Mostly free accommodation
• Clean UI
Cons• Limited functionality
• Monthly fees
• Outdated UI

Research
User Interviews

User Interviews

Participant Total
10 People
Interview Time
40 - 60 Minutes
A set of non-leading and open-ended questions were formulated for the selected audience that was split into two groups “locals” and “travellers”. The purpose of this was to get the perspective and opinions of all types of potential users. Ethical considerations included a consent form which all participants had to sign before any research was conducted.
"
It depends on the platform, I think. If it's random chat platforms like Reddit and Facebook and things like that, I wouldn't do it. I think there's a little too much anonymity given to people.
"
I would tend to stay away from apps when it comes to doing traveling 'cause obviously traveling is quite serious work and I think they'll be doing something in your phone is quite casual.
"
To be honest, no 'cause, they're going to be here and they're gonna leave. It probably doesn't sound great, but I wouldn't want to invest time in them, if I wasn't going to be able to see them again.
"
I think for me It's definitely the people. That's what I most enjoy about going away is exploring different cultures and just meeting the residents of where I'm at and exploring how they get on with their routine.

Research
User Interviews Learnings

Designer Bias

Insights

Some prefer to be more spontaneous or take a break from technology.

Social interactions that include money may seem less authentic.

None of the participants supported this, they like seeing new faces.

Majority of people use mobile phones when travelling.

Users would be incentivised by financial gain.

Locals might prefer to not see tourists around local living areas.

2| Define

Define
Mood Board

Capturing the Mood

This is the visual language of the app. capturing the positive and social feeling of the app with images of diversity, connection, travel and most importantly Scotland.
BaggageScottish PiperTartanAdventure MapEdinburgh StreetFriends LaughingDiversityShopping Local Sign

Define
Target Audience

Andre User PersonaValeria User Persona

Users

The target audience was identified through competitor analysis, user research (including ten user interviews) and by placing the companion concept into context of a user journey.

TraitsSocial & Curious

AgeAdults 20 - 40

RegionEurope

3| Develop

Develop
Brand Overview

Design System

These are the elements of Companion’s visual identity. Because of the app based nature of this project it’s important to consider the accessibility factors of the design such as text readability on smaller devices.

This is also why Roboto has been chosen as the projects font, because of it's mass accessibility. Roboto is Android's default font and is used in Material Design.

Brand Values

Social

Adventure

Connection

Experience

Typography

Roboto
Regular

Roboto
Medium

abc 52pt
abc 36pt
abc 24pt

abc 52pt
abc 36pt
abc 24pt

Colours

Bahama Blue
‍‍
Accent Colour

Cornflower Blue
‍‍
Secondary Colour

Ebony Clay
Main Colour

White
Text or Background Colour

Scottish Influence

Symbol Logo

Companion Symbol Logo
The name of the app was inspired by Greyfriars Bobby, known for guarding his owner’s grave for 14 years. The design of the app aspires to include a Scottish aesthetic including elements of tartan and thistle.

The companion app aims to submerge users in the Scottish culture and guide them through their travel experience.

Develop
Wireframe

Wireframes

Using Figma and wireframe plugins the basic layout of each screen was created following the user flow. Although the wireframes weren't exactly accurate they guided the next step which was to create the prototype.
Sign In WireframeNew User Form WireframeUser Interests WireframeProfile Completion Wireframe

Start Here

New User

Sign In

New User Forum

User Interests

Profile Completion

Home WireframeExplore WireframeInbox WireframeProfile Wireframe

Main App

Home

Explore

Inbox

Profile

Map Wireframe

Map

4| Deliver

Deliver
Initial Prototype

Figma Prototype

Referencing the original wireframes, a clickable prototype was created in Figma. The design aesthetics featured Scottish accents like thistles and tartan. The user experience aimed to have a personal touch that made it easy for users to express themselves.
Sign In Initial DesignNew User Forum Initial DesignUser Interests Initial DesignProfile Completion Initial Design

Start Here

New User

Sign In

New User Forum

User Interests

Profile Completion

Home Initial DesignExplore Initial DesignInbox Initial DesignProfile Initial Design

Main App

Home

Explore

Inbox

Profile

Map Initial Design

Map

Deliver
Test

Maze User Test Task List

Getting Feedback

The initial participants from the user interviews were contacted shortly after completing the Figma prototype in order to gather their thoughts on the conceptual solution.

The aim of the test was to get an insight into the user experience of the design with tasks consisting of navigating the app, sending a message and asking how they feel about certain elements of the UI.
Maze Mission IconMaze Opinion Scale IconMaze Open Question Icon
Missions
Tasks that users complete
Opinion Scale
Emotion scale using emojis
Open Question
Text fields where users go into detail about their thoughts/feelings
"I would recommend to have an option where you can join in account so rather than having one person finding another have like group of people meeting another group.
"I tapped the incorrect icon multiple times before going to the full profile to send a message.
"It feels a slightly cluttered in some places and it isn't clear what one or two icons are for.

Results

The test was most useful for showing where opportunity for improvement lies. Whilst the overall feedback that was gathered about the design and the concept was positive, there are clear patterns that emerged.

Cluttered UI

Unclear Iconography

Navigation

Design| Iteration

Profile Preview BeforeProfile Preview AfterHome Screen BeforeHome Screen After

Profile Preview Screen

Home Screen

Before

After

After

Before

Final|Design

Final Mockup of Companion AppFinal Mockup of Companion App 2