Trolleybus App Concept

Concept of an app that shows when the nearest trolleybus arrived.

Problem Recently, I used to go around the city by trolleybuses. In a large city with a lot of cars, it’s a fast and cheap way to get from point A to point B. But then I faced a problem — when I come to the bus stop I never know when my trolleybus arrives and how long should I wait for. Current schedules on bus stops are rare and too complicated, you have to spend a time to understand these tables. Solution So I thought what if there was an app that could make this process easier and faster. Why should I learn these tables and numbers, when the app can do it for me. It can use my GPS data to determine at which bus stop I am now and the current time to calculates when the nearest trolleybus arrives.

Instead of a bunch of data, it can show me only relevant information about definite trolleybus, bus stop and time. Of course, you have the ability to see the whole schedule or search and build your own route.

After ideation I definied the goals of this project:
1. Give the passenger know when will the next trolley arrive at the definite stop.
2. Allow passengers to build a route from the initial to the final stop.
Research For research, I’ve made a lot of trips by trolleybuses to understand the process from the inside. I’ve tried some competitors’ apps to test them in different conditions (using one hand, different weather conditions, in a harry and others). This field research helped me to find out pain points, general problems, and desires of the user.

Design process I’ve started with OOUX. It’s a great approach to build the core structure of the app based on the goals. I’ve extracted objects from app’s goals and written down core content, metadata, nested objects and CTAs. My main objects were Trolleybus, Route, Bus Stop, Passenger, Schedule. It helped me to define main elements of the app and see how they work together like a system.
Sketching The next step was sketching. With OOUX method it was easy to convert objects into apps components. It helps to concentrate on problem-solving and see the app as a system rather than a set of blocks. I’ve started with minimum app block and then build the whole system with them. I like sketching because it gives you freedom and ability to visualize your ideas without concentrating on colors and shapes. Wireframes & User Flow I converted my sketches into wireframes using MockingBot. It’s a lightweight and useful tool for creating wireframes. It also gives the ability to add interaction between screens and test your mockups. You can view the app flow to better understand how all parts work together and make a system. UI Design & Prototyping After that, I began creating first design and prototype. Being inspired by cool examples, I’ve created a dark version of the app. It looked not too bad as Dribbble shot but it doesn’t look as a real app that you can use every day. After some testing and iterations, I created the light version of the app and added some changes. I’ve added the ability to filter the trolleybuses’ list by time, name and destination. You can colorize trolley’s icon to distinguish it from another in the list. Instead of showing the first and last stops of the trolley, I added the next stop because it’s more relevant and useful information. But the user also can see all the route clicking the list item.

For creating prototype I used InVision. I tested the prototype on my smartphone on the bus stop and in trolleybus to define its weak points. I also used CanvasFlip for testing usability issues including interaction heatmap and UX flow. Testing helped me to finalize app’s screens.
Animation And finally I added some animation to improve user experience and engagement. I used Adobe After Effects for creating some animation details and transitions between screens.