Overview & The challenge

Last year, I had friends who were in Abuja for the national youth service (my friends don’t forge NYSC certificates, LOL) and needed to find their way around.

They kept calling to ask for directions and how much it’ll cost them — because not everyone is a corper like Davido. You can’t exactly spend all of the 19800 you just got in camp on Uber, Taxify or Drop. I have also had to attend meetups, run errands and I find myself looking for cheap ways of getting to venue. (I’m not blown yet please, thanks).

Earlier last year (in May of 2017 or so), I attended a hackathon at the beautiful Aiivon Hub Abuja (no really, it’s beautiful. Check it out if you’re in Abuja). The founder, Mr Samson was kind enough to offer to help build out any ideas I had, and am willing to work on.

I immediately started thinking about problems we face daily that I could solve with technology, and I came upon the Along idea. A year plus later, I’m a budding designer and I decided to explore the idea further, with design.

The challenge is that people want to get to their destination using .

Find my approach to the problem, difficulties discovered, lessons learnt and studies below.


Since I already had a clear understanding of the problem and existing approaches at solving it, I dived into looking at other transport and navigation apps. This helped me understand the market , product goals and standards better.

While there are taxi and ride hailing apps, they are focused on ordering rides for pickups and aren’t exactly affordable for people on a budget.

Analysis of the Problem

For instance, I work at Maitama, I stay at Gwarinpa. I want to get to Maitama using the along system because I’m on a budget. And no be only one way them dey follow enter market.

I need the shortest to get to Maitama.

Typically , I call someone whom I think will know the along routes or I guess (most times the route I think up is too long )

Imagine being new to town and having no one to call or calling someone and they aren’t responding? You’ll start asking strangers upandan.

But what if there’s an app that has all this information? I can just input details of my current location and destination and the app gives directions with estimated fares so that users can have an idea of the amount required.

Target Audience

  1. Anyone that needs affordable short to mid-distance transportation.
  2. People that don’t want to use their own car.
  3. People that don’t have cars.
My primary personas

Competitive analysis.

A competitive analysis is a way to collect and compare data about products (and companies) in the marketplace. This method is often used to highlight strengths and weaknesses of products in order to make more informed decisions about your product strategy.

Competitive analysis with Xtensio

The Proposed Solution

A mobile app that provides users with directions to their destinations and fare estimates.

  1. A mobile app because it is handy and common. Also, for easy identification of users location in real-time to provide geography-specific content.
  2. I decided to go with orange because is a friendly, youthful and cheerful colour. Since a whole percentage of the users are young/youthful.
  3. Fare estimates for budgeting and to avoid extortion.
  4. Users can save their frequent routes on the app instead of searching each time.


Flowchart: to show the set of steps that a user has to do in order to arrive at their destination. In this case user’s success with finding directions and routes to their destination depends on a fast and convenient search.

The basic user flow is very simple — you start with inputting where you are and where you want to go and then you get direction with fare estimates.

User flowchart


This is important because if we don’t have a strong skeleton to start, then all the stuff we put on top of it, like the functionalities or style, really don’t stand a chance. It helps to show how elements are laid out on the page and how the site navigation would work.

Paper and pen wireframe

Low-fi Wireframe

Interface skeleton to help map out the shell of the interface, its screens and basic information architecture using Figma.

Low-fi Wireframe

Visual Design

To improve the visual appearance of this product, increase usability sharply, e.g. strengthen call-to-actions, enhance navigation, stimulate intuitive interactions, satisfy aesthetic needs and visual solutions. In all, to create clear and harmonious style that meets users’ needs.

Every colour is perceived differently, and creates its own feel. I wanted to choose a colour which signifies youthfulness and energy like the target users so I picked Orange. Blending the warmth of red and the optimism of yellow, orange communicates activity and energy.

Visual Design



Tools Stack

Tools used for this project include:

  1. draw.io
  2. xtensio
  3. Paper and pen
  4. Figma

Figma Tip:

Sometimes, large image sizes can slow down or cause lag during prototype, figma can be used to reduce this image sizes. Shift + left click + drag the image to preferred size then export as jpg or png. It saves as a less file size and can be used to eliminate lags.

Thanks to Vincent for helping out and thank you for reading.

Source link https://uxdesign.cc/public-transport-route--along-6f88283808e3?source=rss—-138adf9c44c—4


Please enter your comment!
Please enter your name here