Metro App
Metro App
The objetive with this personal project was to learn about the UX-UI Design process and to learn Figma. For that, I created a flow for the Metro de Madrid app focused in expats and tourists.
I carried out surveys in the urban center in Madrid, looking specially for expats that use the Metro daily.
I concluded with these main pain points
-Many lines and stations: the big amount of stations and lines, can look overwhelming and is easy to get confused
-Support to find the stations: The city is huge so you need a way to find easily your closest station
See survey
Taking the insights, I created a user persona that incarnates the needs of our user.
I focused specifically in expats that have been living in the city for some time and use Metro frequently and tourists that visit the city for the first time
See User Persona
I developed a solution for the lack of information that users feel while locating the stations. I created a flow chart that includes a "search close station" functionality.
For this step, I benchmarked another transportation apps like Moovit, City Mapper and Google Maps
See Flow chart
I sketched the solution in a mid-fidelity screen succesion.
I found very challenging to come up with a proper screen for the details of the route that included the transfers in a clear and understandable way
See Wireframes
Following the principles of Atomic Design, I created a UI kit, maintaining the brand color of Metro.
See User Interface
I could have improved:
- Accesibility: I relied sometimes only in colors for the recognition of the Metro lines in the cards
- Wireframe: I tried to reach a first visual detailed solution instead of starting with a Low-fi wireframe
- Lack of deadline: Establishing a roadmap from the beginning would have helped me to work in a more efficient way
