-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlisbon-metro.kit
132 lines (131 loc) · 9.24 KB
/
lisbon-metro.kit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!-- @import partials/head-->
<body>
<div class="nav-container">
<!-- @import partials/header-->
</div>
<main>
<div class="grid-container-project">
<div class="section1">
<h1 class="headline">Lisbon Metro - Official Application Proposal</h1>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/lisbon-logo.png" alt="Competitors Metros">
</figure>
<h2 class="title">Project's Main Goal</h2>
<p>Create an official application for the Lisbon Metro System, which doesn't exist currently.</p>
<hr>
</div>
<div class="section2">
<h2 class="title">Project Overview</h2>
<h3 class="subtitle">My Role</h3>
<p>My objective was to create an application that has to be easy to learn and use in the daily routine, and with that reach a broad audience of daily users of the metro.
<br>On this project, I've conducted Research, with <b>User Interviews</b> and <b>Competitor Analysis</b>.
<br>Elaborated <b>personas</b> for each target and user archetype, their <b>user flows</b>, and the application <b>information architecture</b>.
<br>Elaborated <b>low-fidelity wireframes</b>, and develop them to <b>high-fidelity mockups</b> to showcase the solution visually.
</p>
<h2 class="title">Design Process</h2>
<p>I used the 4-stages Double Diamond, a design model proposed by the British Design Council.
The stages of this process are as follows:
<br>1. Discover
<br>2. Define
<br>3. Develop
<br>4. Deliver
</p>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/lisbon-citycenter.jpg" alt="lisbon city center">
<figcaption>Lisbon is one of the biggest tourist spots in the world. It was the eighth most visited city on the European continent. Lately, it was nominated as one of the best destinations to spend your vacations by famous websites and blogs specializing in travel. With that being said, the Portuguese capital is heated and packed with tourists and exchange students from all over the world.</figcaption>
</figure>
<h2 class="title">Project's Context</h2>
<p><b>Transportation in Lisbon is very good</b>, but even with the tourist “boom” in the last years, the city still without a good, helpful, and official metro application for mobile devices, which can make the life of foreigners or non-Portuguese speakers difficult, in terms of moving to the different parts of this beautiful city.
<br>Most big European cities that have a big demand for tourists have an <b>official metro application to help not only the visitors but also the habitants of that city.</b> For example, Paris, Madrid, and Porto, all have really good and helpful applications that have a lot of great features to help everyone that depends on the metro to move around the town.</p>
</div>
<div class="section3">
<h2 class="title">User Research</h2>
<h3 class="subtitle">Research Strategy</h3>
<p>Taking this context in mind and being a user of the metro, in my daily routine. I've decided to think about my pain points, and decide to do research to verify if this problem was shared by other users, and if so, to benchmark the competitors and analyze their solutions to this situation. </p>
<p>My Research Strategy was focused on 3 main frameworks:</p>
<ul class="bullet-point">
<li>Competitor Analysis (Benchmark)</li>
<li>Quantitative Research (Survey)</li>
<li>Qualitative research (User interview)</li>
</ul>
<h3 class="subtitle">Competitor Analysis</h3>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/competitors-metro.png" alt="Competitors Metros">
</figure>
<p>The main good insights from the competitors were:</p>
<ul class="bullet-point">
<li>Clear navigation and interface</li>
<li>Offer clear and direct information regarding transport</li>
<li>Official apps have more adherence from users</li>
</ul>
<h3 class="subtitle">User Interviews</h3>
<p>After compiling all the answers from the user interviews, I tried to gather as many insights as possible that could suggest the best solutions for users in this future app for the Lisbon metro.</p>
<p><b>Some questions</b></p>
<ul class="bullet-point">
<li>What means of transportation do you use daily?</li>
<li>What do you usually do while traveling in transport or waiting for it?</li>
<li>Do you usually plan your routes before leaving your starting point?</li>
<li>Do you usually download public transport apps when you travel to another location?</li>
</ul>
<div class="quote-container">
<blockquote class="quote">
<p>"Usability is terrible, apps should exist to make life easier for the user, if a mobility app doesn't actually make it easier, it shouldn't even exist."</p>
<cite>Anderson, one of the interviewees</cite>
</blockquote>
</div>
<h3 class="subtitle">Findings & Recommendations</h3>
<p>Among the insights captured, these were the most important and the ones I tried to implement in the app in the best possible way for users.</p>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/insights-user-interviews.png" alt="Competitors Metros">
</figure>
<h3 class="subtitle">Personas</h3>
<p>After analyzing the interviews and insights that were generated by them. I've decided to elaborate on Personas in order to have a clear understanding of the user's goals, needs, and pain points, regarding their use of maps applications.</p>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/persona-1.png" alt="Persona 1">
</figure>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/persona-2.png" alt="Persona 2">
</figure>
<h3 class="subtitle">Information Architecture</h3>
<p>After creating the personas, I started to think about the application organization, mainly regarding information and how it would be divided and mapped on the application. With that, I've elaborated an Information Architecture Map (Site Map), to have a better visualization of how all the information I wanted to showcase would be displayed on the application flow.</p>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/information-architecture.png" alt="Information Architecture Map">
</figure>
<h3 class="subtitle">User Flow & Scenarios</h3>
<p>The next step to start creating the solution was to think about the main user flows on the application. Since the application is quite simple and minimalist, I've decided to elaborate 2 scenarios on the user flow:</p>
<ul class="bullet-point">
<li>Primary Scenario</li>
<p>Use the app as a navigation tool while traveling on Lisbon Metro.</p>
<li>Secondary Scenario</li>
<p>Use the app's secondary features, such as News, Favourites, and/or Crowd Level, to decide if wants to plan a route, or to get information while navigating on a route.</p>
</ul>
</div>
<div class="section4">
<h2 class="title">Solution</h2>
<h3 class="subtitle">Sketches</h3>
<p>Usually, before I start to design any digital software, I always try to put my first ideas or solutions on pencil & paper, just as sketches to have an initial idea of what I wanted to show and how it would be displayed. Below are my initial sketches for this solution</p>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/lo-fi-wireframes.png" alt="Lo-fi Wireframes">
</figure>
<h3 class="subtitle">Wireframes</h3>
<p>After I created a few sketches, I go to the computer and start creating wireframes, to have a more clear and more realistic view of how that solution would be better implemented, and also to ideate on this solution, in order to develop a final mockup</p>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/mockups-1.jpg" alt="Mockups-01">
</figure>
<figure class="case-images">
<img src="assets/images/Lisbon Metro/mockups-2.jpg" alt="Mockups-02">
</figure>
</div>
<div class="section5">
<h2 class="title">Learnings</h2>
<p>As my first case study, my biggest challenges were understanding the process and how to apply each framework and analyzing and ideating solutions, in order to get to the finest one. And also understand, that this isn't the final solution, it could be improved based on feedback and usability tests.</p>
<h2 class="title">Next Steps</h2>
<p>
<br>Test the final versions of the wireframes, to verify new possibilities and solutions that maybe I wasn't able to see during my design process.
<br>Use these results to improve my design and make even better solutions on how to adapt these features on a future MVP, in the case to present to Lisbon Municipality.</p>
</div>
</div>
</main>
<!-- @import partials/footer-->
</body>
</html>