Portfolio #1 — Mo.Be
Mobility app concept for the city of Gent, Belgium
OBJECTIVE
For the University course Prototyping Interactive Systems, our professor asked us to chose a design brief from a provided list, create two prototypes using Axure RP — one in Material Design, the other in a system of our own choice — test it with at least 2/3 users, and then show our results through a written report and a presentation.
APPROACH
After brainstorming on my own experience as a traveler in the city of Gent, I first created a survey to find out the biggest pain points of the current users. I then analysed the results, and used the obtained information to create a prototype, first on paper and then in the software.
When the Material Design and Human Interface Guidelines prototypes was ready, I tested the first with 4 Android users. I then used the users’ feedback to understand the weak points of my prototype for future iterations. The project was evaluated by my professor as 30 cum laude/30.
MY ROLE
In this project, I worked on my own throughout all of its phases.
DURATION
15th of January 2018–13th of February 2018
LINKS
Material Design Prototype | Human Interface Guidelines Prototype
THE PROBLEM
As a first hand user of public transport in the city of Gent (Belgium) during my Erasmus Internship, I had encountered several issues when commuting to and from the office: for example, the buses and trams are often late (or don’t show up); it’s difficult to know when to drop off or switch buses; there is no real time information on changed schedules, and there is no easy way to buy tickets via smartphone. For these reasons, I decided to take on the Mobility challenge to see whether the current situation could be improved with a new smartphone app.
When first brainstorming about my first experience as a user, I listed the issues I had encountered and then categorized the traveler’s overall experience into two categories:
1. Planning the journey (e.g. buying the ticket, planning the route, etc.);
2. The journey experience itself (e.g. knowing when to get off or switch bus/tram, validating the ticket, etc.)
As I wanted to learn what the target users found most important, I decided to run a survey on social media to get a clearer picture of the issue at hand.
STEP 1: EXPLORATION JOURNEY
To get more information on the users’ perspective, I first ran a survey on social media. The questions were answered by a total of 67 people in Gent, mostly expats living in the city (73.4%). The majority of the respondents were between 18 and 34 years old and 70% were female.
In order to understand the most important problem area to focus on, I asked the participants to choose what they felt was more important between planning the journey and the journey experience itself. Contrary to my first assumptions, the vast majority regarded the journey experience as most significant. The reason of this response became more clear when analysing the responses to what they found most frustrating during the journey experience. The biggest problem areas outlined by the users were: delays; missing route information; poor on-board experience; high price.
PAIN POINTS
After analyzing the responses of the users, I decided to focus on the two biggest complaints that were reported in the survey: delays and route information. The result is Mo.be, a prototype for a new mobility app for the city of Gent. In order to offer the whole range of transports available the prototype, apart from buses and trams, also includes two other means of transport present in the city: Blue Bike bicycle rental and Cambio carsharing.
USER FLOW
1. When opening the app, the user is first presented with a map of the city, a search bar and a “close to you” tab which shows the nearest means of transport available.
2.During the route planning, the user is presented with 4 different traveling filters: sooner, cheaper, greener and peaceful.
3. After choosing the preferred route, it is then possible to view the details of the journey before leaving.
4. During the journey itself, the user can check their current position, the next stops, and interact with entertainment cards directly within the screen (in this case, Spotify, BBC News and TripAdvisor).
PROTOTYPE CREATION
While the first required prototype had to follow the rules of Material Design, for the second one I choose to experiment with the Human Interface Guidelines for the new iPhone 10. While the experience is quite consistent across the two prototypes, there are some key differences:
Favourites button: while in the MD prototypes they are accessible by clicking the star icon on the right, in the HIG prototype they are displayed as buttons below the search bar;
Route selection menu: the MD horizontal menu has a different UI, following the guidelines, and the HIG has the elements organized in a unique block that is more in line with the current iOS interface.
Confirm route screen: the start button, displayed in the MD prototype as a button on the bottom right with an arrow and in the HIG prototype as a centered, bigger button at the bottom of the panel.
Travel screen: the UI of the entertainment cards is quite diferent as it follows more closely the style and layout of the respective guidelines.
BRANDING
For the app I chose the name mo.be, which stand for mobility in Belgium. With regards to the logo, as I wanted something different from the usual symbols portrayed in mobility services, I exploited an AI Logo generator to create a new symbol.
I believe this logo can transmit a sense of clarity and peacefulness, which should be the ultimate goal for the traveler’s experience through the use of the prototype.
USABILITY TESTING
To test the efficacy of the prototype, I tested the Material Design version with 4 Android users, using a guideline inspired from Google’s Design Sprint and from Steve Krug’s Rocket Surgery Made Easy. The prototype was shown via the Axure Share application on my own smartphone. After asking their overall opinion on the home screen, all users were given two specific tasks:
Selecting a destination option which included a tram line;
Reporting a 5 minute delay of the tram to the other users.
The result
When evaluating the results of the User Testing, I was happy to see that all 4 users were able to complete the assigned tasks and that the activity flow designed for the prototype was effective. The testers showed an overall general satisfaction with the experience and appreciated the novel functions I introduced in the prototype (the cards, the report function and the horizontal selection menu).
Regardless of the positive result, the test showed certain flaws: the prototype lacks interactivity in the map view, which is a very important aspect in mobility apps as shown by the interaction pattern of the users; the newer options for bike and car-sharing could be made clearer and more visible; the horizontal search menu was appreciated but noticed by the users only in a second moment and therefore did not make the intended difference during route selection.
LESSONS LEARNED
In order to improve the current version of the prototype, I would iterate more on the following aspects:
- Bike and car sharing: experimentation with an improved layout and further testing;
- Horizontal menu: make it stand out more or try to test the new option suggested by the second participant;
- Add new, personalized options for the cards in the Travel page;
- Complete the flow by adding notifications and the possibility to conclude the journey with a clear feedback for the user;
- Do more research on the visuals and branding.
