An Dang

VISUALIZATION OF A MOBILE
INTERACTIVE ROUTE MAP
Creating a mobile app’s User Interface

Bachelor’s thesis
Degree programme in Game Design

2020
Author (authors) Degree Time

An Dang Bachelor of Culture April 2020

and Arts
Thesis title
83 pages
Visualization of a digital route map 26 pages of appendices
Creating a mobile app’s User Interface
Commissioned by
N/A

Supervisor

Sarah-Jane Leavey, Lecturer

Suvi Pylvänen, Lecturer
Abstract

An interactive navigation map is not only a tool for traveling but also a contribution to the
whole experience the user has when using an application. Its visualization and functions
have to follow not only the mapping standards but also the product’s general guidelines
and style. The thesis attempt to analyze cognitive psychology related to wayfinding and
spatial environment awareness. It leads to an understanding of how people follow
navigation routes in general, with both analog and digital maps. Detailed studies also focus
on information visualization in the mobile platform and how to optimize a map’s usability by
improving its visual appearance.

Qualitative research methods for a User-Centered design has been conducted. Including
ethnographic interview, user research, and interview, persona hypothesis, and scenario, it
is followed by information architecture charts such as card sorting, sitemap, user flow, and
wireframes. User Interface design takes precise practices with brand identity, which
consists of UI frameworks, logo, and icon design with standard data based on the iOS
system.

The thesis final product was an interactive prototype of PicBag, a mobile application that
provides textile shopping bags sharing platform. The interactive map is used in there as an
essential function for users to track down and find routes to bag stations. The prototype
included a simulation of the process of using the map, as well as other features to
represent the application’s concept.

Both the researching and implementation parts have achieved a certain kind of expected
outcomes, although several aspects can be improved. The final product has succeeded in
creating maps functions that work well with the application’s usability, as well as a visual
style that fits the overall UI style.

Keywords

Visualization Map, User Interface, Usability, Cognitive Psychology, Mobile App

CONTENTS

1 INTRODUCTION ............................................................................................ 5

2 HOW NAVIGATION MAPS WERE CREATED AND FOLLOWED ................. 6

2.1 Cartography and its influences ................................................................. 7

2.2 From analog to interactive mapping ......................................................... 9

2.3 Visual Cognition ..................................................................................... 10

2.3.1 Cognitive Maps................................................................................. 11

2.3.2 Spatial Memory ................................................................................ 12

2.3.3 Peripheral Vision .............................................................................. 13

3 INFORMATION VISUALIZATION IN MOBILE PLATFORM ......................... 14

3.1 User-centered design ............................................................................. 14

3.1.1 Qualitative research ......................................................................... 15

3.1.2 Information Architecture ................................................................... 16

3.2 Affordances ............................................................................................ 18

3.3 Interaction Design .................................................................................. 19

4 INTERACTIVE MAPS IN MOBILE APPLICATION ....................................... 21

4.1 APIs and SDKs for maps in mobile application ...................................... 21

4.2 Case studies on interactive map feature ................................................ 22

4.2.1 Uber ................................................................................................. 23

4.2.2 Scooter sharing applications ............................................................ 26

5 PRODUCTION OF MAKING USER INTERFACE FOR MOBILE

APPLICATION..................................................................................................... 28

5.1 Ethical aspects and inspiration ............................................................... 28

5.2 Maps UI and Usability ............................................................................ 30

5.3 Defining the application's goal ................................................................ 32

5.3.1 Ethnographic Interview and User Research ..................................... 32

 5.3.2 Personas and User Journey ............................................................. 35

5.4 Framing the content and structure.......................................................... 36

5.4.1 Card Sorting and Sitemap ................................................................ 36

5.4.2 User Flow and Wireframes ............................................................... 37

5.5 UI Framework ......................................................................................... 38

5.5.1 Alignment ......................................................................................... 38

5.5.2 Logo design and color ...................................................................... 39

5.5.3 Icon Design ...................................................................................... 41

5.5.4 Typography ...................................................................................... 43

5.6 Prototyping ............................................................................................. 44

5.7 Final Product and User Testing .............................................................. 45

6 CONCLUSION ............................................................................................. 47

REFERENCES .................................................................................................... 49

LISTS OF FIGURES ........................................................................................... 49

Appendix 1. Uber’s Map Design and User Flow

Appendix 2. Google Map User Preferences between Graphic and Satellite Map
Appendix 3. Personas and User Journey Map
Appendix 4. Information Architecture
Appendix 5. First wireframe prototype
Appendix 6. UI Framework
Appendix 7. Final interactive prototype Frames
Appendix 8. Customized map and its JSON
Appendix 9. User Testing for PicBag interactive prototype
Appendix 10. Walk-through video of the final product
1 INTRODUCTION

Digital interactive maps for navigation have always been a core feature for a
huge amount of mobile applications. Given the small and convenient size of the
phone screen nowadays, people rely on them significantly for different purposes
in daily life routines, from way-finding and moving around in geospatial space to
estimating delivery times. A lot of studies have been done in recognizing
algorithms based on the spatial and cognitive aspect of the map. The results can
be used in optimizing the process of wayfinding and moving around for the user.

A digital navigation map is not only a tool for travelling but also a contribution to
the whole experience the user has when using an application. To be more
specific, it follows the same interface visual theme and supports users in pursuing
their desired outcome or estimates the time for their delivery. During the research
part, the thesis will focus on how the basic graphic principles are applied to map
visualization. A special concern will also be paid to informative printed maps and
charts. Although lacking the navigation function, they provide a huge source of
visual impact on digital map-making.

That leads to another issue being discussed intensively in the thesis: How to
design a navigation map that holds an attractive visual appearance and at the
same time follows the strict rules of cognitive psychology? And how that map
would adapt and contribute to the application’s overall structure? In pursuing the
answers to these questions, it is important to study thoroughly the different
factors from both the perspective of User Interface design and User Experience,
as well as the possible connection between them.
The product itself supports a good cause for the environment, with a sustainable
solution to one of the world’s rising problems: plastic bags. Produced as a mobile
application, it allows the user to view and track down a list of reusable bag
stations which provide reusable bags for the user’s purpose of shopping or
carrying goods. The nature of the application’s purpose is highly special thus it
requires thorough qualitative research on the target customer. User interviews,
in-field literature reviews and user testing are the methods carried out to fulfil this
mission.

The first concerns following the process of this thesis are the wide extent of the
cognitive map. It has been a debatable topic in the psychology field and requires
an extremely deep and complex level of studying the human brain. The thesis
strives to deliver sufficient resources, which may not cover the entire content of
the field, but enough to contribute to the issues related to the final thesis
production. Another risk is the outcome itself, as the author only attempts to
make a visual prototype of the User Interface for a start-up mobile application.
Although all the factors of User Interface and User Experience are studied
carefully, problems may occur when programming gets involved in the
development step of the application.

2 HOW NAVIGATION MAPS WERE CREATED AND FOLLOWED

In order to design a well-functioning navigation map, it is essential to study the

way the human brain receives information related to following routes and
geographical recognition. A brief history of mapmaking will be introduced, starting
from the very first communication presentation in the form of carvings to hand-
drawn illustration and the interactive digital mapmaking of today. To understand
and follow maps, certain parts of the human brain are activated, such as
cognitive psychology, spatial memory and peripheral vision. Each of the
components operates on their own and yet are complementary to each other. As
these systems are very complex, the thesis will only analyze them from the
aspect of how they affect the user’s ability to read maps.
2.1 Cartography and its influences

Cartography is the study of practical arts and sciences in maps making.

Maps are visual representations conveying spatial information. Through different
techniques combining sciences and aesthetics, geographic data is universal and
should be understood by most people from different backgrounds and cultures.
Ancient maps also carry cultural and philosophical meanings from their time, as
well as scientific ideas and contributions passing from one generation to the next.
(Merriam 1996.) Therefore, it is necessary to study the history of cartography and
its important changing points to understand more about modern digital maps.

The development of cartography and mapping itself has begun as soon as the
first graphic communication mediums existed, such as clay markings, stone
carvings, cave painting and drawing (Moreland and Bannister, 1983). Hence, the
first map of the world is still a debatable matter. Ancient Greek and Roman
Empire were considerably advanced in cartography as their philosophers and
scientists had strong influences on the Western social and study. Ptolemy (about
A.D. 85-165) wrote one of the first completed official documents on geography
showing the “world” with a latitude and longitude system from about 60°N to
30°S. It had a high impact on later geography studies until the Renaissance. The
Romans also made suburban maps between their villages with distances and
places names written in it (Agrawala 2002).

Throughout the Medieval period, limited distributions of hand-drawn maps were

produced in the heavy influence of religion and politics. Explorations and
migrations made by enormous tribes helped discover the world. The Vikings went
up to North Atlantics, while Jerusalem was drawn as the center of a T-O map.
(Aber 2008). Maps printing started around the Renaissance time with carved
wooden pieces and engraved copper plates. More charts with navigated routes
for sailing harbors, coastlines, mountains, rivers and islands were created. The
guide for compass was also added into the maps. Globes were introduced and
the first map projection that succeeded in drawing the earth on a flat surface was
Mercator’s Map in 1569. Meanwhile, China was getting advanced in drawing a
complex system of rivers and villages in their maps.
In the early modern world, maps became increasingly accurate and precise.
Countries were taking mapping programs as national research and suburban
maps for travelling routes was popular during the 17 – 18 centuries. Maps in
Japan around this period were similar to the Western side, except that their
commonly used material for maps were a long paper showing entire routes
instead of splitting them (Agrawala 2002). 1931 then saw the creation of a
revolutionary solution for the modern map – the London Underground by Harry
Beck. His different techniques included distorting the actual length between the
routines, amplifying the London central with straight lines and vivid colors while
still maintaining the correct order of the map’s overall geography. It still has
strong influences on today’s subway mapping.

The world then, with the coming of computers and technology, moved really fast
to the phase of graphic maps. Especially when people began to be able to travel
around the world easily, route maps can be found in popular tourist destinations.
Geographic Information Systems (GIS) and Global Positioning System (GPS) on
digital devices made interactive maps easy to access from everywhere. Web-
based navigation mapping services focus on providing directions for driving and
using transportation to get from one point to another. Close-scale maps, often
named strip maps in geographical terms, also provide inspiration for the thesis’s
final product.

Nonetheless, a map can never be a true representation of the real world. The
accuracy of physical distances and precise conditions are only reflected on maps
through generalization, estimation and illustration. Even satellite and panorama
images lack a certain amount of realistic light spectrums. (Aber 2008.) Yet, just
like any other graphic reproduction, maps are ways to communicate not only
routes, but also cultural values and historical remarks. They are adaptable and
evolvable throughout the development of human civilization. And navigation
maps, specifically, is a fundamental element in modern society and our everyday
life.
2.2 From analog to interactive mapping

Cartography is an act of combining both art and science, and maps provide not
only coherent information but also an aesthetic appearance. The growth of
modern technology and digital devices in the past decades then set a new light to
the way maps’ visualization are presented, under the influence of an interactive
environment. Robert E. Roth (pp. 59–115, 2013) defines cartographic interaction
as “the dialogue between a human and a map mediated through a computing
device to emphasize digital interactions.” Differences between an interactive map
and an analog map can consist of:

Global Navigation Satellite System (GNSS): autonomously real-time and

accurate position to the distance within a few centimeters or meters provided by a
constellation of satellites from space. The most popular system now is GPS –
Global Positioning System (United States), followed by significant others like
GLONASS (Russia), Galileo (European Union), BeiDou (China) and QZSS
(Japan).

Geographic Information System (GIS): is a sophisticated computer system that

collects, analyzes, stores and displays data relevant to spatial patterns and
geography information. They are essential tools supporting a planning or building
of community infrastructures. GIScience is a scientific discipline studying the
underlying structures and techniques of GIS.

Behaviors of the maps’ functions, including animation – the time it takes for a
map to react when map readers interact with it, interface information and design
showed in different zooming scale

Computing hardware and software used to access and imply maps. A map’s
interface and interactive behaviors are heavily affected by the channel it is
presented in. For example, information displayed by a mouse hovering function
on a computer has to be converted in another form when showing on a mobile
phone.
Figure 1. The breadth of research topics related to a growing cartography (Roth 2013)

Figure 1 demonstrates the branches of cartography study, which included

overlapped topics from both the analog and interaction map making
(Roth 2013). It shows a wide range of potential expands for digital maps related
to other studies. Interactive cartography, which has the biggest practices in
cartographic interaction and mapmaking, is also the main focus when it comes to
making maps in mobile platforms.

2.3 Visual Cognition

Figure 2 illustrates the growths and connections of the three main factors:
Mapping, Visualization, and Cognitive Psychology. They are the fundamental
topics that influence the thesis research scope. Moreover, their minor
departments are strongly integrated with each other. The thesis aims to
respectively take them into analyzing in the theory part.
Figure 2. Concept map for research spectrums (Dang 2020)

2.3.1 Cognitive Maps

A cognitive map is a mental map originally described as the awareness of the

outside environment and the ability to navigate in a geographical maze (Tolman
1948). When facing a certain situation, the brain will produce an “inside map”, or
a representation of the external space (Darken & Peterson 2001). To achieve the
best results, not only are cues from the outside environment taken but also the
thinking pattern of the brain affects how it will interpret the new information.

Fundamentally, mapping is not only for informative presentations but also for
exploration and navigation (Kraak 2014). Therefore, cognitive recognition is
active and replied to when a person processes a navigation map. When facing
new geographic information, navigators instinctively look for three main
categories: points, lines, and areas. Cognitive maps are then being built gradually
when navigators continue to analyze and search for those elements. (Agrawala
2002.)
As a cognitive map is built by the person's own awareness of the environmental
information around them, it is not always reliable and can contain distortion from
personal bias. Yet, it provides enough consistency on geographic and topological
information to be used in connecting familiar routes. (Agrawala 2002.) Spatial
memory, which is also being analyzed in the next chapter, contributes a big part
in shaping one’s cognitive map. (Darken & Peterson 2001.)

2.3.2 Spatial Memory

The thesis addresses this term in both aspects of cognitive interaction with the
outside environment and the user’s reaction with digital interface design. In
neuroscience and cognitive psychology, spatial memory is the process of
remembering and recognizing spatial and space information (Johnson & Adamo-
Villani 71: 582, 2010). In other words, if a cognitive map represents a mental map
based on certain geography elements, a spatial memory provides guidelines to
orient, navigate, or relocate in that map. (Darken & Peterson 2001.) When
looking at a virtual map, navigators have to link the map graphic with the spatial
memory and awareness from their actual surrounding environment.

In the User Interface Design sense, people tend to expect to find things in a
common place for frequent use applications. This applies to both desktop and
mobile users. For example, in a large number of application setups, the principle
dialogue buttons such as OK, Cancel, minimize, or maximize the screen, are
placed in expectable positions. As the mindset (habituation) for those
compositions has already created a deep root, an interface with that same rule or
even just a similar button in a similar space makes it easier for the user to follow.
(Tidwell 2010.)

In some cases, it is also a good idea to make Movable Panels that allow users to
arrange and rearrange the tools themselves. It works well for most designing and
editing applications but unfortunately is quite uncommon for the map function.
Especially for navigation maps, the interactive part that catches the user’s
attention is all in the map itself, which contains the actual road and signs for way-
finding and route planning. However, certain buttons should still follow the basic
rules of display location to achieve a smooth and effortless workflow (Tidwell
2010).

2.3.3 Peripheral Vision

To study peripheral vision means to consider the function of central and

peripheral vision at the same time. Central vision, or fovea vision, takes half of
our visual processing faculty in the brain although it only covers a small area
directly in front of the eyes. That zone of our vision is very clear and detailed to
us. On the opposite, peripheral vision captures a much wider viewing area,
everywhere besides the zone of central vision. Our brains can process them at
pretty much the same time. As we do this unconsciously, we usually don’t realize
that it was the peripheral vision that actually supports and guides the eye to focus
on what is in the central vision. (Weinschenk 2016.)

On a desktop platform interface, peripheral vision holds an essential role in

defining where and how the designer wants the user’s focus to be directed. Key
areas are the top of the page where there is a navigation bar, the footer, and the
two side margins; everywhere that is not in the center of the screen. The image
humans get from peripheral vision is blurry, it focuses on the general visual
information rather than particular and specific features (Weinschenk 2016).
Therefore, it is helpful to fix common buttons and signs in those places.

In figure 3, the peripheral vision on both sides is used to direct the eyes to the
central vision with the main information in the middle. In the mobile phone
interface design, it is essential to keep in mind the sizes of the screen. As the
size is much less than a desktop screen, the spaces allow for central and
peripheral vision, therefore, get scaled-down as well. (Weinschenk 2016.)
Figure 3. A good use of peripheral vision in a website (Wordpress 2019)

3 INFORMATION VISUALIZATION IN MOBILE PLATFORM

It is undeniable that mapping is a big part of the graphic world, in terms of

communication and information visualization (Figure 2). Interactive maps usually
contain both texts and images for providing instructions and their overall data in
visual form. Whether it is through a mobile phone screen, desktop, or any other
devices, principles of visualization and aesthetic are essential parts in building a
well-functioned interface. However, it takes more than that to achieve the best
possible response from the user. The key is understanding the target customer
and modifying the most suitable design for them (Weinschenk 2016). In this
section, the thesis would, through brief introduction and illustration, demonstrate
the different aspects of data visualization in mobile platforms.

3.1 User-centered design

To distinguish how an application looks like, it is essential to design how it feels

like first. This is where the User Experience steps in. Methods of user-centered
design approach are analyzed in searching for resources supporting the
implementation process. Then, the steps are applied in the making of a mobile
application’s prototype.
3.1.1 Qualitative research

Before getting into the creative process, it is fundamental for designers to have a
coherent and specific vision of the project in general, along with all its problems
and goals and especially its users. A product’s design outcome should be
ultimately evaluated based on its success in meeting both the project’s and its
user’s goals. (Cooper & Reimann 2003.) Different types of qualitative research
can help designers find out and fill in the big picture of their product. This section
will introduce some of them, including methods that are used in the
implementation part of this thesis.

Ethnographic interview: to not be confused with the definition in anthropology,

ethnographic interviews as a qualitative research method means conducting a
series of one-on-one interviews with users or potential users while making
observations of the user’s reaction and behaviors in their natural settings or
environments. Both open-ended and closed-ended questions are asked in
different stages of the interviews to clarify the motivation behind the users’
actions as well as confirming and adjusting any assumption the interviewer had.
The author planned on conducting one interview in the process of implementation
but failed to do, yet there is still a user interview, which provided detailed insights
to potential user groups without any environmental observation. (Cooper &
Reimann 2003, 46.)

Persona hypothesis: attempts to define different kinds of users and their

motivations. User goals are presented through personas goals, then designers
can focus on making that goal easily accessible via enjoyable steps. Personas’
backgrounds are built according to the information collected in the user interview.
Nevertheless, it is necessary to keep in mind this method concerns criticisms due
to its questionable practical and psychological issues, hence the results are not
entirely reliable and designers should consider alternative directions in some
cases. (Cooper & Reimann 2003.)
Figure 5. Persona and the related background information created for PicBag (Dang 2019)

User Journey Map: is a visualization of different scenarios that users are

expected to meet when using a product or service. It usually contains a specific
persona, their goals, and different stages they go through to get it. Different
emotion points are also created based on a person's engagement and
expectations with the product: a pain point when facing a struggle, touchpoints
when the product offers solutions for it, which leads to positive or negative results
in users’ emotions and experience. The goal of making a user journey map is to
define typical user’s usage patterns, clarify or narrow the problem statement, and
adjust the product’s features for it. (Rajani 2018.) The author finds it helpful for
envisioning and establishing the site map and framework later.

3.1.2 Information Architecture

After having defined and enough information on the product’s directions, it is time
to build a structure of fundamental information and content organized clearly and
coherently. This process is under the study of Information Architecture (IA), which
is a crucial part of designing web-content and mobile applications. A logical IA
design allows uses to get to their desired destinations as easy and as quick as
possible, it also provides a consistent framework for designers to follow later.

Figure 6. Sitemap for PicBag (Dang 2020)

The first thing to do when building the structure is listing contents. At this stage
there is no limitation or restriction, all ideas are welcomed as the broader the list
is the better. They should be listed into groups of different categories or levels
depending on their types. Designers can choose to sort the information with a
method of LATCH, which stands for Location, Alphabet, Time, Category, and
Hierarchy. Also known as “The Five Hat Racks” principles set by Wurman (2000),
it is an effective way to organize data and represent information. Priorities then
are taken into account due to the importance of each content. Card Sorting or
Tree Testing are good methods to help with this stage. New applications or
websites should use Card Sorting while already existing ones can use Tree
Testing.

With the sorted content, sitemaps can be used to visualize a navigation

backbone. Relationships between contents as well as a logical overall hierarchy
should be mapped out distinctly (Brown 2011). Different shapes and nodes for
each opponent can be customized for a maximum visual effect (Figure 6). A
flowchart, or sometimes called user flow, reflects how users navigate their way
through the system. Unlike the sitemap, components in a flowchart have arrows
between them, dedicating the process of particular functions or tasks (Appendix
4).

3.2 Affordances

“Controls should be where they ought to be.” – Donald A. Norman, 9-12

And also they should look as to how they ought to be. As we have already learnt
some insight in the way the human uses their cognitive thinking, it is crucial now
to acknowledge how one product’s appearance is its own instruction for using
(Norman 2002). Defining the affordances term, Norman states that it is the
perception of an object’s purpose from mere observation. When using a product
with well-prepared affordances, users may not have to read the instruction at all.
In the User Interface design, affordances can be decoded into consistency, in
which visual elements have certain patterns that makes it easier to use. The less
time users spend to adapt to new applications, the more time they have to
explore and really enjoy it. (Apple 2020; UXPin 2015.)

Since the first iPhone was introduced to the world in June 2007, humans have
then been using and getting familiar with the small screen for decades. Even
before that, the evolution of computers has brought us to the new era of the
electric screen and digital interaction. Just like the fact that a chair is mainly to sit
on, the human brain developed “mental models” for a list of common visual clues
when using digital devices (Norman 2002). One of the most classic examples
may be the asterisk, as almost everyone recognizes it as a sign of mandatory. It
is an essential part of any online form or application. Without the asterisk,
confusion would arise when users questioned themselves about the priorities of
the questions.

Another great example of common interface buttons is the three stripes menu
button, also known as the hamburger button (Figure 7). Despite having conflicting
opinions about its advantages and disadvantages, the iconic menu is undeniably
popular among smartphone users. In almost every application, it can be found on
the top left or right, indicating that there are more choices within.

Figure 7. The hamburger menu icon and its use in mobile interface (Dang 2020)

To take away, consistency in visual design is very important and should be

retained as much as possible. Especially for common-used elements like buttons,
icons, or links, the closer they look to an industrial standard, the easier it is to
recognize them. As people use semantic memory to remember continuously
repeating facts, designers should make the important things easy to encode and
process. (Weinschenk 2016.)

3.3 Interaction Design

Being part of the whole UX spectrum, interaction design is a combination of other

designing disciplines, including visual, sound, and motion artifacts (Silver 2007).
While it applied for a wide range of systems and environments, in this thesis the
term is used to describe the creative process in making web and application
products. Interaction design focuses firstly on behaviors and interaction between
the software and people, rather than just one-way expression like traditional
visual mediums. The user becomes a subject instead of an object to be looked at.
Therefore, when making interactive components, designers always have to keep
in mind who is their users and how their backgrounds will affect the way they
interact with the products. (Cooper & Reimann 2003).

According to Gillian Crampton Smith (Designing Interactions, 2004) with addition

to Kevin Silver (What Puts the Design in Interaction Design, 2007), there are 5
principal dimensions to help define and develop interaction design concepts.
Smith herself used the word “new languages”, which reflected/indicated the
closeness those terms have with previous design definitions. Years after, they
have gradually become more recognizable in the designing world.

The first dimension is words, which should be simple and short enough for the
user to understand. In a mobile application, that implies for button labels, feature
descriptions, instructions, and additional information supporting the application’s
content.

Second dimension: visual presentation. Taking inspiration from a painting’s

perspectival and compositional representation, it concerns graphical elements
such as typography, icon, logo, diagrams, and information graphics. Together
with words, they communicate direct and important messages to the user.

Third dimension: physical objects or space. This means the physical products or
environments that users interact with or within. The mobile phone itself consists
of affordance for its fingers gestures and taps, as well as its usual screen
dimension and automatically built-in features. Designers should take this in
extremely concern when making interactive elements.
Fourth dimension: time. It included sounds, animations, and videos as those
media are displayed within a certain time period. While they all have significant
impacts on the user’s senses, animation specifically is a powerful dimension
when it comes to mobile screens. When being used correctly, it brings more
harmony to both the visual content and the user’s flow.

Fifth dimension is behaviors, which consist of the user’s actions and operation on
the product as well as how the product reacts within the dimension mentioned
above.

A thorough study of interaction design is also extremely important for making

prototypes that represent the product’s ideas correctly and clearly. Especially for
the thesis outcome, when actual GPS and map functions are not ready yet,
motion design will be relied on to bring the best result concerning the interactive
map feature.

4 INTERACTIVE MAPS IN MOBILE APPLICATION

4.1 APIs and SDKs for maps in mobile application

Because of the thesis’s focusing on visual interface design, only brief

introductions on the development stages are written. When a mobile application
wants to imply map function, most of the time there are two things they need to
cover: geolocation and navigation. Geolocation is a positioning service which
detects and shows users’ continuously updated location in the map. Meanwhile,
navigation gives descriptions on how to get from one point to another. As it is
almost impossible and unnecessary to develop everything from scratch, SDKs,
and APIs from mapping service providers are used.

SDK, Software Development Kit, is the applications’ software development sets

designed for specific hardware platforms and operating systems. Whether in iOS
or Android, it provides various tools supporting efficient and faster development.
Meanwhile, an API stands for Application Programming Interfaces,
Unlike SDK, APIs are cloud-based services that operate as communication
between client requests and the server responses. It defines how software
components interact with each other.

At the moment, Google Map dominates the mobile industry in terms of native
mapping services providers as well as SDK and API host. It has a massive
database and information that covers a wide range of geographical interface and
map styles. When implemented on IOS or Android, their SDKs allow developers
to display the maps directly from Google Map data to the application. The APIs
would then take care of the rest, from access to the main serves, detecting
locations to interactive features. Having a massive database and information, it
also covers a wide range of geographical interface and map display styles
(Google 2020). One outstanding alternative option to Google Maps is Mapbox,
which has a relatively small coverage yet is less pricey and offers interesting
customized options for map style. It is highly recommended to consider between
them based on the application’s goals and needs.

For the outcome product of this thesis, due to limited resources and the main
focus on visual design, no integration or database is added. Instead, the
prototype shows an animated flow of navigation map that presents very closely to
how the actual map will work. This solution is also suitable for an MVP application
that should not spend too much on the developing stage yet.

4.2 Case studies on interactive map feature

Plenty of mobile applications nowadays are using digital interactive maps as one
of the core elements in their system. The map can be an essential tool for users
to achieve their goals or is the main function itself. Either way, it requires a high-
quality investment from both the visual design and content writing departments.
This section attempts to analyze the way interactive maps UI and UX were
designed in Uber and other scooter sharing applications. The studies use data
collected from the companies’ designers’ blogs, as well as online reviews from
users and press resources provided in the companies’ websites.
4.2.1 Uber

Uber is an American company that offers ride-hailing service through the mobile
platform in over 700 cities. Their offers also contain ride-sharing, food delivery
and self-rent electric scooter and bicycles in some areas. Officially founded in
2011, the mobile application numbers of users increased significantly and by
2016, it delivered over 3 million rides a day. Locations and navigations are
fundamental functions to the app users, including both driver and rider. This
analysis part of the thesis concentrates on the design of interactive maps before
a ride starts and its effect on users' satisfaction.

To start with, the application gives the riders full authority to choose between
taking full control of choosing their pick-up locations or using smart navigation
options. Either way, riders’ agency is very respected and the system is
automatically adjustable to their needs. For example, the first thing a rider sees
when opening Uber is the question “Where to?” – then they can type the whole
address in or set a pin on the map. The GPS does the job of recognizing the
user’s current location, yet they can always go back and adjust it if needed.
Locations of available drivers in the area around are also visible, with reasonable
numbers of around 3-4 cars at a time. Familiar destinations like Home, Work or
Gym are remembered for quick actions.
Figure 8. Uber’s Map Design and User Flow (Dang 2020 and screenshots from Pan, 2016)

As illustrated in Figure 8, the step when users have to walk to the pickup point
can be quite frustrating. Various factors can affect the success of a pickup,
ranging from the destinations' locations, confusing nearby streets and
neighbourhoods and communications with the driver. Therefore, considerable
tools and options were designed in the maps leading to that step, in order to
prevent possible problems that could occur. When riders set their destination, the
screen will display a visual animated flow representing the trip overview, as well
as options for different car types. By adding this extra smooth step, the
application gives users an overall vision for their journey. Differences between
car types such as arriving time, price and vehicle brands are also displayed
clearly.

During the picking up, the map interface shows the distances between users’
locations and the related important components: pick-up point and the driver’s
location. It makes sure to highlight the differences between routes by applying
different motion design to each of them: route by car estimating the distance
between rider and driver is straight thin lines and walking route from the rider’s
location to pick up point is dashed lines. Moreover, when describing the pickup
locations, the map does not just state the actual address, but it instead uses a
wayfinding framework called Geotalker. The framework conveys geocoded
streets number and names into a phrase mirroring how the human cognition
reacts with spatial information and casual wayfinding communication (Pan 2016).
For instance, the sentence “Meet near 200 Drum St outside Pauline’s pizza”
described the place with additional information that makes it easier for riders and
drivers to find each other.

Figure 9. Uber Day and Night Mode UI (Wachsman 2017)

On the driver side, extra attention in UI design was paid due to the exclusive
mobile screen’s view when driving. Drivers usually only have a few seconds to
glance at the screen and limited taps for buttons. Simple gestures such as single
tap and slide for confirming actions were created, along with customized
cartography motion design and distinctive packages of visual components for
different parts of the trip. Due to frequent night trip requests, a separated night
mode for driver interface is also available (Figure 9). It offers a darker theme on
the map styles and UI to decrease possible light pollution and improve visions of
the road. (Wachsman 2017).

Overall, different factors in a ride affect different stages in the user emotion flow.
Connecting or waiting for a driver to confirm can cause stress and dissatisfaction.
Depending on the time and place, it is common that users may have to wait a
long time or get cancelled from drivers. While that issue lies in external
unexpected situations, the map itself helps reduce tension by offering GPS
tracking. The driver’s location is updated continuously so riders can see and
estimate the time they arrive. Despite the risk of cancelled trips, it is reasonable
to say Uber has done a decent job in designing interactive maps supporting
wayfinding and interaction between its parallel users.

4.2.2 Scooter sharing applications

Starting as California-based start-ups in 2017, scooter sharing applications have

created a whole new system of transportation on a worldwide scale. They all
provide vehicle-sharing services with dockless bikes, electric bikes, and electric
scooters. Customers use their mobile platform sites to track down, unlock
vehicles, and payment. Even though different companies have taken on the
business model, in terms of map design and function, they all, in one way or
another, operate the same practice. Three applications were chosen to analyze in
this section, including Lime and Bird, two of the earliest and biggest providers
from the United States, and VOI from Sweden.

Interactive maps are core features in the products, including travelers’ and
vehicles’ global system location and navigation. Integrating, they are extremely
important in the stages where users have to look for and unlock their desired
vehicle. As seen from Figure 10, Lime’s “homepage” is also its map for bikes and
scooters locations. It takes the user straight to the main task: looking for an
available vehicle. The application’s colors theme is used effectively in highlighting
important features and directing the users’ eyes to where they should look. The
map elements themselves are presented in monochrome greys, while the
locations of bikes and scooters are in green and restricted areas are red.
Moreover, cluster areas that have a high number of bikes get a glowing green
indicating that users can zoom in to look for more. Battery status is displayed on
each bike icon for quick eye scanning.

Figure 10. Screenshots from Lime, VOI and Bird application (Lime, VOI, Bird 2020)

Meanwhile, VOI uses the same monochrome color map but does not show
battery or numbers of bike information on the overall map. Users can only check
them once they tap on the scooter location icon. Bird’s original logo has wings on
two sides and for a while, they have used it for station locations, which caused
confusion and inconvenience when looking from a mobile screen. Hence they
changed it from the current updates and it has been so much better visually
(Figure 10). The three applications have a consistent color theme as well as
round-shape icons and buttons. They catch the users’ eyes rapidly and provides
a better overall view. It also brings up the feeling of convenience as users can
already see the bikes they can take, even when they don’t know exactly their
locations yet.
In March 2019 Google Maps had added Lime to the routine planning function.
Users now can see available Lime vehicles and time to reach the destination
inside Google Maps, as well as the total time if combining Lime and other public
transportation. The integration is a thoughtful and logical act on improving the
applications’ usability: users are provided with more options which can help their
travel get faster and more affordable. Other integrations also happen with Uber
and Lyft when they both have their scooter-sharing branch.

5 PRODUCTION OF MAKING USER INTERFACE FOR MOBILE

APPLICATION

5.1 Ethical aspects and inspiration

Debates and discussions around the issue of plastic trash have been happening
for a while as part of the environmental raising crisis. Concerning the inspiration
and idea for the implementation part, two matters will be mentioned: current
plastic trash numbers and its alternative solutions comparison. In January 2018,
China – which handled nearly half of the world’s plastic recyclable trash – banned
the importation of less than 99.5 percent pure plastic disposal (Parker 2018). This
means most of the trash is not accepted, especially shopping bags as plastic
bags are highly difficult to recycle due to their various colors and chemicals
(Bratskeir 2019). That left a lot of high-income countries, including Japan, the
United States, Germany, and others in Europe scramble to find new ways to
manage their waste.

Plastics itself have an intense and extremely high carbon footprint life cycle. From
the very first stage of extraction and distillation from resins and fossil fuel to when
recycling, incinerating or composting, it takes up a significant amount of energy
and carbon dioxide discharged. That counted also transportation during the
process. 2015 saw a total amount of 1.8 billion metric tons of CO2 from plastic
emissions. (University of California 2019.) The consequences and damages are
countless, from killing ocean animals to contributing to global warming. To sum it
up shortly: “Plastics crisis is a climate crisis hiding in plain sight", said Carroll
Muffett, president of the Center for International Environmental Law, USA.
However, alternative solutions are not providing much better scenarios.
When it comes to the number of materials including electricity, water, the fuel
needed for producing, paper packaging does take more space than plastic. Other
substitute materials mix also have bigger impacts on the climate, as plastic is
light and needs a shorter process to produce. (Joyce 2019.) Therefore, simply
replacing plastic bags with other materials such as paper and fiber may backfire.
However, the term “reusing” has the opportunity to create positive outcomes in
the scene.

Belonging to the Waste Hierarchy chart, Reuse comes second after the Reduce/
Prevention in priority in waste management that brings benefits to the
environment (Waste (England and Wales) Regulations 2011). It means before
considering the recycling procedure, reusing should be taken into account.
Describing as “checking, cleaning, repairing, refurbishing, whole items or spare
parts” (Waste (England and Wales) Regulations 2011), reusing helps saving
energy and money to produce new material, which also leads to zero waste being
discharged into the climate.

In Finland, 860 million plastic bags were used in 2018, which were 90 million less
than the year before. The recycling numbers are also considerably high, with an
increasing percentage in recent years. (Yle 2020.) In addition, different
companies and organizations have taken action on promoting sustainable living
style. Lindström Group has just opened a new service with returnable shopping
bags, cooperating with supermarkets to rent them out at check-out counters
(Lindström 2020). “Muovipussiton Kerava” - “Plastic Free Kerava” is a movement
founded in 2019 in Kerava, which creates and organizes events supporting a
plastic bag-free environment. They provide workshops on how to reduce the use
of plastic bags at home, such as categorizing recycled trash more effectively.
Cooperation with other companies to produce commercial fiber bags and
delivering free bags to various households were also made. (Muovipussiton
Kerava 2020.)
The movement is a big inspiration for the thesis implementation part’s idea.
Digital products in a mobile platform is a great way to connect people and
communicate positive messages. An application that allows people to track down
and collect textile bags from different stations in local supermarkets seems to fit
the current demands and situation in plastic bag free movements and projects in
Finland. Statistics mentioned above also show that Finnish citizens already have
suitable tools and mindset to accept new approaches. Interactive maps
visualization comes to picture as it is an essential feature for the application
purpose. Finally, the primary purpose of the product is not to stop the plastic bag
usage in everyday life, but rather to emphasize the sharing process between
citizens and reusing textile shopping bags.

5.2 Maps UI and Usability

After doing different methods of literature reviews, case studies, and theory
research, the author has analyzed and concluded the results into different factors
that may help improve the Map UI and usability.
Figure 11. Before and after shape simplification for a strip map. (Agrawala 2001)

Shape Simplification: when conveying geographic information into 2-dimension

visualization, different techniques are applied to make the content either more
authentic or legible to the reader (Figure 11). Smoothing curves, interpolation,
and simplification take away irrelevant details and create straight lines that are
easier to follow and navigate (Agrawala 2001). During the generalizing process,
the scale and ratio of the overall topology should still be maintained.

Consistency in icon design: clear clues should be given to particular elements:

the destination, user own location, search tool, and main options concerning the
map. (Appendix 6) Mapping always has particular standards for those and
consistency ensures that those demands are in an easy place to find and reach
(Figure 12).

Figure 12. “Your location” common button in mobile maps (Screenshots from Google Map, Lime
and Uber 2020)

Motion design: is an important feature to improve a map’s usability. When

applying to the navigation flow route, it represents an overall view of the journey,
which helps users get faster and easier in defining and planning their trip.
Especially with mobile applications, animation guides the users’ eyes to important
factors in a limited screen space. However, color and size choices should be
considered carefully as clusters or too much contrast can have a negative impact.

5.3 Defining the application's goal

Three different acts concerning the methods of User Interviews and Personas
were carried out. Although all of them were conducted online, the questions and
answers were studied thoroughly for the best insights into the potential users’
characteristics and directions that the thesis’s product should follow. The goals
for each performance respectively are: updating the current plastic issue bag
usage issue in Finland and the citizen’s opinions, getting users’ feedback on
interactive map styles, and background user research towards the target
customer group.

5.3.1 Ethnographic Interview and User Research

Firstly, a one-on-one interview was conducted with Granström Mari, Chief

Science Activist, and Founder of “Plastic Bag Free Kerava” movement. Even
though the movement is only operated in Kerava at the moment, its system,
directions, and customers are great models to study for the thesis’s
implementation part.

When given insights on individuals and organizations associated with the project,
the founder has pointed out a few things: the main channels for informing and
updating the project have been the local newspaper and an online group on
Facebook. As most of the active responders are people from the age range
between middle-age to seniors, digital platforms usage has not been
considerably popular. Hence, offline promotions such as posters, banners, and
counters in local supermarkets also have important impacts. As the topic of
plastic bags is still widely underrated and misunderstood with debatable
discussion, it can be an explanation of how people prefer to communicate face-
to-face to get involved in the project.
A majority of Finnish citizens were also found among the participants of
“Muovipussiton Kerava”, which is quite noticeable from the fact that most
information on the project’s website and Facebook group is in Finnish. However,
it is ideal to add other languages such as English and Swedish in their media
channels in order to approach a more international environment. In a way, it is a
goal that the project attempts to achieve in the future.

At the moment, “Plastic Bag Free Kerava” has five stations in local supermarkets
that offer fiber bags for sharing. The bags are produced by Paptic, a Finnish
packaging company. However, they face a problem of one-way takings of the
bags. Most people stop exchanging and keep the bags for themselves. However,
Mari believes that it is possible to solve the problem with a better channel that
gives educated information on the current plastic bag waste issue. The lack of
guidance and commitment makes it easy to not evolve in the sharing process.
That leads to the creation of “Plastic Media” section in the product, which
provides articles and helpful instruction

Secondly, an online survey was sent out for Google Map mobile application
users. It included questions about their preferences on the map styles, as well as
their evaluation of a specific map’s features. illustration photos are screenshots
taken from the Google Map application. The primary goals of the survey are to
find out if Graphic or Satellite map style is used more frequently and its reason.
Out of 26 participants from different regions and ages, more than 90% stated that
they prefer to use Graphic Map style and almost 60% of their reasons are out of
habit and easier to use navigation systems (Figure 13). Even though the numbers
of answers are not high, the significant gaps between the two options have made
the survey result considerable.
Figure 13. Google Map User Preferences between Graphic and Satellite Map chart (Dang, 2020)

Looking back from the research of visual cognition and affordance related to
interactive map visualization, the map styles survey results can be explained in
one possible meaning: when following routes, people tend to use their spatial and
cognitive memory unconsciously. The same thing happens with mobile
application interfaces, visual affordance holds an important part in making a
smooth and enjoyable user experience. Therefore, when a person uses a certain
kind of map frequently, they get used to the visual appearances and propositions
of the interface. It makes a big difference in terms of time-saving, wayfinding
cognition, and personal emotions. Everything is easier to control when all the
buttons’ positions are clear and similar.

In conclusion, when map users choose one map style over another, it is not
because of technical reasons but rather depends on the user’s personal
experience and usage habit. Since most of the participants belong to the target
groups of the thesis final product, it is undoubtedly that a graphic map is more
suitable to use as an essential feature.
5.3.2 Personas and User Journey

Customized interviews with potential application users were sent out online. Its
purpose is to collect information and ideas to build personas (Appendix 3). Due to
the exclusive of the topic, only 6 people receive the interview, and personas were
created on each of them instead of combining them from various answers. During
the interview, two main issues were addressed: the first one included the
participants’ personal lifestyle with closed-questions about their day-to-day
activities and routines, some of them related to using the digital product and
some of them are not. Altogether, they helped to form the personas’
backgrounds, characteristics, interests, and their habit of using smartphones to
access digital services.

In the second part, participants were asked to pick one application that they
either use or like the most on the phone. The questions then focus on the
reasons for their choices and evaluations of the product. With open and multiple-
choice questions, the interview attempted to explore the user's opinions and
impressions on different factors. It included the user's self-motivation and
reasons, their usage habits, and dependence on the application, as well as
ratings on its function and features. Even though the participants’ choices are
from different fields, they still indicate what the users are looking for in a mobile
application generally.

Unlike the first survey, where participants’ background does not affect their
choices on preferred map styles, this customized interview revealed the
connection between a person’s educational background with their experience
using digital products. Art and design students and professors tend to appreciate
an overall visual appearance of a product, such as its UI, color choices, or
distinctive style and concept. One participant, who refers to himself as a
“computer geek”, values the application security and privacy the most. It is an
interesting point to see in terms of web-cloud communication.

After getting to know the target customer and the insights on what they are
looking for, personas, and persona charts with theoretical scenarios were
created. Three personas were created with background information divided into
sections of Profile, Usage Habits, and Needs (Appendix 3). One of them was
chosen to set up a User Journey Map (Figure 14), which focuses on the possible
steps users may face prior to using the product. The product’s features will be
built as solutions for unpleasant situations that occurred.

Figure 13. User Journey Map – the chart indicates the changes in user’s emotion concerning the
situation when using the map (Dang 2019)

5.4 Framing the content and structure

5.4.1 Card Sorting and Sitemap

To start building the application structures, different methods such as Card

Sorting (Figure 15) and Site Map (Figure 6) were applied. With the Card Sorting
chart, all fundamental features were listed in 3 different big sections: Basic
Features, Motivation, and Map Function. Some features were created based on
the interview with Mari, founder of “Plastic Bag Free Kerava”, such as the
Education Section, which contains helpful instructions links and Impact, which
states the amount of carbon footprint of plastic bags. They are listed together in
the Motivation section.
Figure 15. Card Sorting chart for PicBag (Dang 2020)

Menu functions such as Your impact, History, and Plastic Media are all low
priority, compared to the main map function. However, altogether they create a
better insight into the application’s content and idea. Therefore, the author
decided to keep them as informative and interactive as well. With the sorted
features from the Card Sorting process, a Sitemap was created to organize the
priority and order of them (Figure 6). It presents where and how the features are
connected with each other.

5.4.2 User Flow and Wireframes

Precise visualizations of the whole product are presented through a User Flow
chart (Appendix 4). In this step, connections betweens features are now linked
together with details. The main purpose of this stage is to sketch out the outline
of how users will navigate through the application. It is valuable not only for
securing the structure but also for forming the visual framework. More functions
are also planned out from the basic ones created in Card Sorting.
Figure 16. Wireframes for Front Page, Options and Start Page. Dang, A. 2020.

For a better vision of the product visualization, wireframes concepts were made
for 6 particular pages: Front Page, Option (Menu), Start Page, Map, Station, and
Impact Pages (Figure 16) (Appendix 4). Technically they are a detailed version of
the same pages in the Use Flow. Yet, the closer look and specific icons shape a
coherent vision for the next steps. All icons in the wireframes are plugins
provided in the Balsamiq site. They are only for sketching ideas instead of
representing the actual product.

5.5 UI Framework

In this stage detailed UI elements were designed, such as control buttons, icons,
logo and animated features. Color theme charts and main font were also
selected.

5.5.1 Alignment

Responsive design for mobile screens that are always changing sizes can be
tricky. As grids can change when the screen sizes change, it is better to focus on
designing a good alignment for all the content (Kennedy 2018). With a list of
various devices’ screens, Apple offers a tools called Auto Layout for adaptive
layout structure. It follows “constraints” that are made by designers and keeps the
horizontal and vertical position in the correct ratio. Therefore, even when the size
of an element changes, it would still stay in the center or any other proposition
that has set. (Apple 2020.) Space awareness should also be keep in mind.

Figure 17. Iphone X’s dimension and working area (Dang 2020)

The alignment of the thesis product’s UI follows the basic recommendations for
content formatting and layout from Apple (Figure 17). It includes a minimum size
of 44pt x 44pt for the control buttons, in fact, all the command buttons in the
round shape have that same size. Margins from both right and left size are 16pt.
Navigation and tab bar space is reserved for navigation and tab buttons. The
main contents never excess the safe area. The author chose iPhone X’s screen
dimension as the frame for prototyping because of its popularity and adaptable
orientation to other iOS devices. Landscape view is not considered for the
product.

5.5.2 Logo design and color

With the goal to create a bright and vibrant color theme, lime green, cherry red
and mustard yellow were chosen for the brand’s color identity. In which lime
green is the primary color, with the use of various saturation and brightness
Different shades of grey are also present as neutral color balance.

Figure 18. Logo and color theme of PicBag (Dang 2020)

Aesthetic brings emotion to the user which in some cases are positive to the
whole experience using the product, however, there should be a balance
between aesthetic and usability in order to satisfy both the users and clients, as
well as maintaining the attractive look, functional and durable.

Meanwhile, different cultures and heritages in the world have assigned different
meanings into certain colors as part of their long time tradition. Hence, attempts
to make a whole group of people to have the same reaction with chosen colors
can be difficult (Chapman 2010). However, cognitive studies have pointed out
that it is not just a single color that make up the emotions, but combinations of
colors, patterns and their propositions altogether. For example, vibrant and light
colors combined with rounded curves in a wide space can bring up positive
feelings of energy, harmony and renewal. (Lee 2019.) Following and working
around principles of aesthetic and joy can therefore provoke visual cognition in
the human brain, rather than repeatedly color bias behavior.

5.5.3 Icon Design

A great icon design converts concept clearly and provides a quick and easy to
understand visual communication. It requires a careful approach from the
designer, as they need to consider the existing industrial standards and their own
product’s overall flow. A few design principles can be applied to create a package
of icons that achieve universal understanding between users. (Zhang 2020.)

Brevity, Readability and Clarity: the main target of any icon design is to
communicate concepts in the simplest way possible. Common elements like
navigation arrows, warning signs, menu options,…usually are presented as short
and plain icons (Appendix 6). Sizes and spaces within the design are carefully
taken into account as well to maintain the legibility on different devices’ screens.

Figure 19. Set of icon with fixed personality (Dang 2020)

Consistency and personality: when belonging in the same group or family, icons
should have a similar flow of harmony, including style, stroke weight, shape and
scale. Following the design of the application’s logo, a set of icons were created
with the same style and color (Figure 19). Together with the rest of the brand
features, they create a consistency in visual flow for the application.

Figure 20. Consistency and alignment in icon design (Dang 2020)

Alignment: even though in most cases a fine alignment with equal numbers
between space brings the best result, sometimes it is necessary to adjust them
as well (Figure 20). For example, in Figure 21 the arrow needs to be moved
unsymmetrical to the left a little in order to have more balance. Otherwise, a
direct centered position makes a heavy impression on the right for the human
eyes.

Figure 21. Exceptional adjustment in alignment to make an icon balance (Dang 2020)
5.5.4 Typography

Besides images, text is the next important element in information visualization.

Words themselves are information and typography is the way to transfer them.
An effective typography choice should satisfy the following factors: typefaces, text
hierarchy. Their goals include making a positive impression on UI, directing
users’ attention to the right place, and providing smooth navigation between
functions.

Typefaces contain different parts in type classification - serif, sans serif, script,
monospaced, and display; type style – light, regular, italic, medium, semibold,
bold (Chapman). Each part has its own uniqueness in terms of text scale,
spacing, serifs volumes, leading, kerning, and tracking. They should be used
carefully in different contexts. The effect of majuscule and minuscule choices in a
text is significantly powerful as well. Majuscule characters require the reader to
observe each individual word so it can be tiring to read too much of it. It catches
the users’ eyes easily so it is suitable to use for headlines or special words.
Meanwhile, consistency is also an important factor to keep in mind. Text with the
same priorities in different pages or frames needs to have the same sizes. (Tubik
Studio 2017.)

Text hierarchy is affected by different adjustments: sizes, style, and lightness, or

opacity. According to Apple's official UI guide, 11pt is a minimum size for text to
manage a readable and clear view on a phone screen. However, it is most ideal
to put text around 15-19pt. More spaces in general for both words and icons are
also highly recommended. (Apple 2020.) Text priority can be divided into 3
groups: body text, subtitle, and title. Body text has the most space and it is crucial
to make sure it has an average, readable size. Subtitles give additional
information, a distinctive size and color or opacity can make it notable even when
users speed reading the content. Important text such as headlines or titles should
be the biggest in order to stand out yet not too big that it overrun the space.
Different styles, colors, and volume of opacity is valuable in distinguishing
typography hierarchy as well. (Kennedy 2020.)
The typography chosen for the product’s UI was SF Mono, a default font for iOS
application. Belonging to the Sans typeface family, it provides a simple and
delicate impression. A non-serifs and monospace appearance makes it easy for
alignment and pairing with the product’s graphic style. Another reason is that the
prototype is, from the beginning, intended to design for iOS platform and Apple
devices. Therefore, it uses an exclusive font provided by Apple directly. For the
logo, Righteous font was used. The name “PicBag” goes well with another
monospace with thick weight and squared corner.

5.6 Prototyping

Prototypes were being built simultaneously throughout the implementation

making process. Yet there are two of them that have major changes affecting the
final product. The first prototype was built with Adobe XD (Figure 22) (Appendix
5), which went really well when it only had wireframes instead of actual UI
elements. Problems occurred when it was time to imply map function. Adobe XD
has limited resources and tools to simulate a map flow. Alternative software was
considered, including Figma, Sketch, UXPin, and Balsamiq. Figma was chosen
as it provides suitable functions to implement the prototype. In the end, results
proved that it was the right choice and the making process and working flow were
even better than the first choice.

Some questions arose related to the user flow when using the interactive map:
What is the way for the user to unlock/ recognize the station once they get there
after using the map? QR code was the first and foremost solution. Yet, it links
strongly to the development stage. A solution of using motion design was used to
replace the lack of coding and simulate the process of scanning a QR code. It
has succeeded in maintaining a smooth user flow for the application.
Figure 22. First wireframe prototype made in Adobe XD (Dang 2020)
.
5.7 Final Product and User Testing

A walk-through video of the prototype is available here:

https://youtu.be/pFZ_u6G02Oc

The final product is an interactive prototype with various working functions inside
the application. Essential features were made based on the first wireframe one.
New polished UI elements such as icons, logos, and buttons were added. Some
particular changes in the functions were made: some frames have animated
elements to simulate the working flow of a working application, as well as to
demonstrate the user journey related to map function better. “Save station” button
was eliminated according to unpractical usage feedback from the first user
testing. “Share” button is available for sharing a user's data record. For example,
a user can share how many plastic bags he has not brought when using the
application.

Due to technical issues in importing map API in a prototype, the author chose to
use Google Map Styling Wizard for creating a map style that fits with the
product's main visual theme. Detailed adjustments with color and shape were
made in the Google Map site with a custom JSON (Appendix 8). The JSON code
is only available for testing and viewing the prototype. On the map’s visual: main
colors are lime green and cherry red, which is the same with the application’s UI
style, with a touch of retro feeling (Figure 23). Saturation and contrast were
decreased for a balance and soft impression. Landmarks names and labels are
reduced to the minimum, with only important components like bus and train
stations are shown.

Figure 23. Customized map used in final product (Dang 2020)

The same participants who did the user interview for making personas receive
user testing questions for the second prototype. Difficulties occurred at the final
user testing: as the test participants live in different regions and countries, their
reaction to the map function is not the same. Especially when people can not see
the real streets and follow the routes in real lifetime, it is unpredictable to evaluate
the success of the interactive map itself. However, the test results have justified a
few things: most participants reported that the map UI style has fit the rest of the
application’s visual theme nicely, as well as the legibility of station locations
thanks to the motion design.
The visual design and layout, on the other hand, are not easy to evaluate as
users’ feedbacks are influenced by personal preferences. Overall, users rated it
above average in the sense of authentic and main color choice were favored by
most users. One particular opinion gave negative feedback on the lime green and
one stated they personally dislike the comic-inspired UI style. Meanwhile, the
logo design received special endorsements from 2 people and is rated highly by
the rest.

6 CONCLUSION

Both the researching and implementation parts have achieved a certain kind of
expected outcomes, although there are several aspects that can be improved.

On the side of UI and UX design, different methods were applied as planned, with
various failed attempts and recovers. Interaction design principles were taken into
account when organizing interactive features, as well as motion design for simple
animation. Brand identity design including logo and icon design with consistency
in style and color choice saw a positive outcome. Different courses on
visualization, concept art and UI/UX design during the study have prepared
greatly for the author to take on those tasks.

Results from the final product’s User Testing showed that the implementation part
has succeeded in creating maps functions that work well with the overall
application’s usability. However, one of the primary goals of the thesis was to
design a whole interactive map visualization. In the process of researching the
development part for building maps in mobile, the author realized that it is
impossible to handle the map alone. It would need a huge database and
navigation system. Instead, useful information on how to create and apply SDK
and API in iOS system was found. It would be valuable when working in a
functional application, as well as convenient in communicating with the
development team.

Some issues also forced the author to look and study further in unexpected
areas. One of them is the learning of prototyping tools and software. Several
software such as Adobe XD, Balsamiq and Figma were tested. Reviews and
evaluation on the others were analysed as well. Another pleasant surprise in
researching is the climate problems concerning plastic. Specialized articles on
environmental problems have broadened the author’s understanding and mindset
of the topic.

Overall, even though the research on cognition studies could be more specialized
and focused, it provided enough information to understand the system and its
connections with interactive maps. The implementation product also applied the
theory concluded during the researching part, as well as lessons from classes
during the study at school.
REFERENCES

Apple Developer. 2020. IOS Human Interface Guidelines. Available at:

https://developer.apple.com/design/human-interface-
guidelines/ios/overview/themes/ [Accessed: March 2020].

Alan Cooper & Robert Reimann. 2003. About Face 2.0: The Essentials of
Interaction Design. New Jersey: John Wiley & Sons, Inc.

Cameron Chapman. Unknown date. Understanding the Nuances of Typeface

Classification. Available at:
https://www.toptal.com/designers/typography/typeface-classification [Accessed: 1
May, 2020].

Cady Wachsman. March 2017. Uber Navigation. Available at:

https://medium.com/uber-design/uber-navigation-f662e7611f3 [Accessed: 20
April, 2020)

Carl Moreland and David Bannister, editors. 1983. Antique Maps. New York:
Phaidon Press.

Christopher Joyce. July 2019. Plastic Has A Big Carbon Footprint — But That
Isn't The Whole Story. Available at:
https://www.npr.org/2019/07/09/735848489/plastic-has-a-big-carbon-footprint-
but-that-isnt-the-whole-story [Accessed: 6 May 2020].

Daniel M. Brown. 2010. Communicating Design: Developing Web Site

Documentation for Design and Planning. San Francisco: New Riders Publishing.

Donald A. Norman. 2002. The Design of Everyday Things. New York: Basic
Books.
D. F. Merriam. 1996. Kansas 19th century geologic maps. Kansas Academy of
Science, Transactions 99, p. 95-114. Available at:
https://www.jstor.org/stable/3627983?seq=1 [Accessed: 12 April, 2020]

Edward C. Tolman. 1948. Cognitive maps in rats and men. Psychological

Review, 55(4), 189–208.

Edward R. Tufte. 1983. The Visual Display of Quantitative Information. United

States: Graphics Press.

Helena Zhang. January, 2020. 7 Principles of Icon Design. Available at:

https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2 [Accessed: 1 May,
2020]

Eric Johnson and Nicoletta Adamo-Villani. 2010. A Study of the Effects of

Immersion on Short-term Spatial Memory. World Academy of Science,
Engineering and Technology 47. 71: 582-587.

Erik D. Kennedy. December 2018. Why Beginning Designers Don't Need to

Learn Grids, Type Scales, or Color Theory. Available at:
https://learnui.design/blog/why-beginning-designers-dont-need-grids-type-scales-
color-theory.html [Accessed: 6 May, 2020]

Hannah Ritchie and Max Roser. September 2018. Plastic Pollution. Available at:
https://ourworldindata.org/plastic-pollution [Accessed: 3 May, 2020]

Ingrid Fetell Lee. 2019. Joyful: The Surprising Power of Ordinary Things to
Create Extraordinary Happiness. New York: Little, Brown Spark.

James S. Aber. 2008. Brief History of Maps and Cartography. Available at:
http://academic.emporia.edu/aberjame/map/h_map/h_map.htm [Accessed: 24
April, 2020]
Jenifer Tidwell. 2010. Designing Interfaces: Patterns for Effective Interaction
Design. California: O'Reilly Media.

Jitesh Rajani. August, 2018. User Journeys and User Flows, Understanding the
Difference. Available at: https://blog.prototypr.io/user-journeys-and-user-flows-
understanding-the-difference-87c0f17d3c5f

Kate Bratskeir. January 2019. How To Recycle Plastic Bags The Right Way.
HuffPost Impact. Available at: https://www.huffpost.com/entry/how-to-recycle-
plastic-bags_n_5c4b80f8e4b0e1872d43b9a4?fbclid=IwAR2Q-
pG50M9sZT5j7m1ujhixtxtJDBERVeB9f--QuJe9WtUTOTIvuIwhVFo [Accessed:
12 May, 2020]

Kevin Silver. July, 2003. What Puts the Design in Interaction Design. Available at:
https://www.uxmatters.com/mt/archives/2007/07/what-puts-the-design-in-
interaction-design.php [Accessed: 7 April, 2020]

Laura Parker. November 2018. China's ban on trash imports shifts waste crisis to
Southeast Asia. National Geographic. Available at:
https://www.nationalgeographic.com/environment/2018/11/china-ban-plastic-
trash-imports-shifts-waste-crisis-southeast-asia-
malaysia/?fbclid=IwAR3dB8zQToSVau1kcFEXcC4D0c8Kubj_HpHohzibXGJ8ksf
pZ5UGO9Afqps [Accessed: 5 May, 2020]

Lindström Group. 2020. Returnable shopping bags reduce plastic waste.

Available at: https://lindstromgroup.com/services/returnable-shopping-bags/
[Accessed: 12 May, 2020]

Maneesh Agrawala. December 2001. Visualizing route maps. Ph.D. Dissertation,

Stanford University. Available at:
https://graphics.stanford.edu/papers/maneesh_thesis/ [Accessed: February,
2020]
Menno-Jan Kraak. 2014. Mapping time: illustrated by Minard’s map of Napoleon’s
Russian Campaign of 1812. California: Esri Press.

Muovipussiton Kerava – Plastic Free Kerava. 2020. [website]. Available at:

https://www.muovipussitonkerava.fi/ [Accessed: 12 May, 2020]

Robert E. Roth, 2013. Interactive Maps: What we know and what we need to
know. Journal of Spatial Information Science 6:59-115. Available at:
https://www.researchgate.net/publication/271078641_Interactive_Maps_What_w
e_know_and_what_we_need_to_know [Accessed: 14 April, 2020]

Rudolph P. Darken & Barry Peterson. 2001. Spatial Orientation, Wayfinding, and
Representation. Naval Postgraduate School. Available at:
https://www.researchgate.net/publication/2557944_Spatial_Orientation_Wayfindi
ng_and_Representation [Accessed: 14 March, 2020]

Tubik Studio. August 2017. Typography in UI: Guide for Beginners. Available at:
https://uxplanet.org/typography-in-ui-guide-for-beginners-7ee9bdbc4833
[Accessed: 4 May, 2020]

Susan M. Weinschenk. 2015. 100 More Things Every Designer Needs to Know
about People. San Francisco: New Riders Publishing.

Simon Pan. 2012. Uber Magic 2.0: Perfecting the pickup for the Rider app
redesign. Available at: http://simonpan.com/work/uber/ [Accessed: 5 January,
2020]

University of California - Santa Barbara. April 2019. Plastic's carbon footprint.

ScienceDaily. Available at:
https://www.sciencedaily.com/releases/2019/04/190415144004.htm [Accessed: 5
May, 2020]
UXPin. 2015. Consistency in UI Design: Creativity Without Confusion. Ebook.
Available at: https://www.uxpin.com/studio/ebooks/consistency-ui-design-
creativity/ [Accessed: 21 March, 2020]

Waste (England and Wales) Regulations. 2011. Guidance on applying the Waste
Hierarchy. Department for Environment, Food and Rural Affair. Available at:
https://assets.publishing.service.gov.uk/government/uploads/system/uploads/atta
chment_data/file/69403/pb13530-waste-hierarchy-guidance.pdf [Accessed: 5
May, 2020]

Yle Newspaper. September 2019. Finland slow to give up plastic bag habit.
Available at:
https://yle.fi/uutiset/osasto/news/finland_slow_to_give_up_plastic_bag_habit/109
72841?fbclid=IwAR2V9PuekVs6XHngMoJdUnEVK4aXjIvNW7vkwkmOCaHsioCq
07Jxu5B8Avg [Accessed: 5 May, 2020]

Yle Newspaper. December 2019. Plastic recycling in big cities doubles in 2019.
Available at:
https://yle.fi/uutiset/osasto/news/plastic_recycling_in_big_cities_doubles_in_2019
/11135850 [Accessed: 5 May, 2020]
LISTS OF FIGURES

Figure 1. The breadth of research topics related to a growing

cartography. Roth, R. 2013. Interactive Maps: What we know and
what we need to know. Journal of Spatial Information Science 6:59-
115. Available at:
https://www.researchgate.net/publication/271078641_Interactive_Ma
ps_What_we_know_and_what_we_need_to_know [Accessed: 14
April, 2020]

Figure 2. Concept map for research spectrums. Dang, A. 2020.

Figure 3. A good use of peripheral vision in a website. “Savory”

tamplate in Wordpress, 2019. Available at: https://techtiten.com/best-
wordpress-restaurant-themes/ [Accessed 30 March 2020]

Figure 4. Persona and the related background information created

for PicBag Dang, A. 2020.

Figure 5. Sitemap for PicBag. Dang, A. 2020.

Figure 6. The hamburger menu icon and its use in mobile interface.
Dang, A. 2020.

Figure 7. Uber’s Map Design and User Flow. Dang, A. 2020.

Application screenshots from: Pan, S. 2012. Uber Magic 2.0:
Perfecting the pickup for the Rider app redesign. Available at:
http://simonpan.com/work/uber/ [Accessed: 5 January, 2020]

Figure 8. Uber Day and Night Mode UI. Wachsman, C. 2017. Uber
Navigation. Available at: https://medium.com/uber-design/uber-
navigation-f662e7611f3 [Accessed: 20 April, 2020)
Figure 9. Mobile applications screenshots. Bird Rides, Inc. version
Version 4.83.0; Neutron Holdings. Inc. Version 2.92.0; Voi
Technology AB. Version 6.12.0. IOS platform. 2020

Figure 10. Before and after shape simplification for a strip map.
Agrawala, M. 2001. Visualizing route maps. Ph.D. Dissertation,
Stanford University. Available at:
https://graphics.stanford.edu/papers/maneesh_thesis/ [Accessed:
February, 2020]

Figure 11. “Your location” common button in mobile maps. Google

LLC. Version 5.43; Technology AB. Version 6.12.0; Uber
Technologies. Inc. Version 3.403.10000. iOS platform. 2020.

Figure 12. Google Map User Preferences between Graphic and

Satellite Map chart. Dang, A. 2020.

Figure 13. User Journey Map – the chart indicates the changes in
user’s emotion concerning the situation when using the map. Dang,
A. 2020.

Figure 14. Card Sorting chart for PicBag Dang, A. 2020.

Figure 15. User Flow for Picbag, Dang, A. 2020.

Figure 16. Wireframes for Front Page, Options and Start Page.
Dang, A. 2020.

Figure 17. Iphone X’s dimension and working area. Dang, A. 2020.

Figure 18. Logo and color theme of PicBag Dang, A. 2020.

Figure 19. Set of icon with fixed personality. Dang, A. 2020.

Figure 20. Consistency and alignment in icon design. Dang, A. 2020.

Figure 21. Exceptional adjustment in alignment to make an icon

balance. Dang, A. 2020.

Figure 22. First wireframe prototype made in Adobe XD. Dang, A.

2020.

Figure 23. Customized map used in final product. Dang, A. 2020.

 Appendix 1

Uber’s Map Design and User Flow

 Appendix 2

Google Map User Preferences between Graphic and Satellite Map chart
 Appendix 3/1

Personas
 Appendix 3/2

Personas and User Journey Map

 Appendix 4/1

Information Architecture:
Card Sorting chart
 Appendix 4/2

Information Architecture:
Sitemap
 Appendix 4/3

Information Architecture:
User Flow
 Appendix4/4

Information Architecture:
Wireframes
 Appendix 5

Prototype Version 1
 Appendix 6/1

UI Framework:
Logo design and color theme
 Appendix 6/2

UI Framework:
Control buttons
 Appendix 6/3

UI Framework:
Icon set
 Appendix 7/1

Interactive prototype frames

 Appendix 7/2

Interactive prototype frames

 Appendix 7/3

Interactive prototype frames

 Appendix 8/1

Customized map
 Appendix 8/2

Customized map JSON

 Appendix 8/3

Customized map JSON

 Appendix 8/5

Customized map JSON

Appendix 9/1
Appendix 9/2
Appendix 9/3
Appendix 9/4
Appendix 9/5
Appendix 9/6
Appendix 9/7
 Appendix 10
Walk-through video of the final product:

https://youtu.be/pFZ_u6G02Oc