How to design a mobile app: from an idea to UI

I got used to going 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 have faced a problem — when I come to the bus stop I never know when my trolleybus arrives and how long should I wait for it. The current bus schedules are rare and too complicated, so you have to spend some time to understand them.

Not very user-friendly design

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, if 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 calculate when the nearest trolleybus arrives.

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

Advantages

So what are the advantages of such an approach? The app calculates the necessary time and route, with minimum input from the passenger’s side.

Since the application will be used on the go, in different weather conditions, it should be simple, not overloaded with data and easy to use.

Goals

After ideation I defined the goals of this project.

  1. Let the passenger know when the next trolley will arrive at the definite stop.
  2. Allow passengers to build a route from the initial to the final stop.

Research

For research, I made a lot of trips by trolleybuses to understand the process from the inside. I tried some competitors’ apps to test them in different conditions (using one hand, different weather conditions, in a hurry and others). This field research helped me to find out pain points, general problems, and users’ desires.

I started the design process with OOUX methodology. It’s a great approach to build the core structure of the app based on the goals. I extracted objects from app’s goals and wrote down the core content, metadata, nested objects and CTAs. My main objects were Trolleybus, Route, Bus Stop, Passenger, Schedule. It helped me to define the main elements of the app and see how they work together as a system.

Sketching

The next step was sketching. With OOUX method it was easy to convert objects into apps components. It helped to concentrate on problem-solving and see the app as a system rather than a set of blocks. I started with a basic app block and then built the whole system. 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 possibility to add interaction between screens and test your mockups. You can view the app flow to better understand how all the parts work together and make a system.

UI Design & Prototyping

After that, I began creating the first design and prototype. Being inspired by some cool examples, I created a dark version of the app. It didn’t look too bad to post it on Dribbble but it still didn’t look as a real app that you can use every day.

First design

After some testing and iterations, I created the light version of the app and added some changes. I added the possibility to filter the trolleybuses list by time, name and destination. You can colorize the trolley’s icon to distinguish it from another. 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 the whole route clicking the list item.

For creating the prototype I used InVision. I tested it on my smartphone at the bus stop and on the trolleybus to define its weak points. I also used CanvasFlip for testing usability issues using interaction heatmap and UX flow. Testing helped me to finalize the app’s screens.

Final design

Animation

And finally I added some animation to improve users’ experience and engagement. I used Adobe After Effects for creating some animation details and transitions between screens.

Animating screen transition

You can see the whole project on Behance and Dribbble. Thanks for reading!

Lead Product Designer @wirexapp | Husband | Believer