Cloud GrPHIC

Project Overview:

Designing and prototyping a mobile app for a bus timetable and tracking application.
Develop a discovery, define the project's scope, and set requirements.
The project also should be designed and delivered.

Bus Application

Problem Statement:

The client of this project, is the transportation agency of a midsize metropolitan area in the Midwest.
The city has a network of public buses. They currently list the expected bus schedule on their website and post it at each bus stop. I was supposed to help create a mobile application operated by a city transit system that serves thousands of commuters.
Riders wanted to know when the next bus will arrive at each stop. They also wanted to know how much time they have to get to the bus stop.

Problem statement graphical image of a bulb


The client of the project is the transportation agency for a midsize metropolitan area in the Midwest
The users are the residents of the area who are using the bus transportation service as commuters.

Crown in the city

Roles and responsibilities:

During this project, I was in charge of building the prototype for this application as a UX and UI designer. I had to create this project while keeping in mind the deadline. Fortunately, this project's funding was not included.

UXer sketching

Competitive Analysis:

There were some similar applications working for bus tracking issue. I've decided to compare two of the most famous ones and analyzed them.
After researching, I've provided a table and compared the pros and cons of these two applications together.

Comparing two competitorsCompadring second competitor

I conducted user surveys among the users, and continued my research. After collecting the user's feedback, I designed several user journeys and made a SWOT table. I considered all Strength, Weaknesses, Opportunities, and Threats. Then I've written couple of user stories based on user surveys and interviews.
After that I've collected user stories and started to design a couple of user flows based on user stories. It led to designing a site map.

User survey pictureJourney mapUser flow sampleSite map

Eventually I started drawing some paper sketches and after identifying the main idea, I developed those sketches and designed the digital sketches.

Wireframe SketchDigital wireframe

After completing the wireframes, I began creating a clickable prototype based on those wireframes.
Then I went through the process of reviewing and iterating in order to be able to update the clickable prototype. In this stage, I added various features to the app, such as a contact us section and a chat section.
During this stage of the process, I kept an eye on similar applications on the market and discovered that the majority of them used a couple of specific colours. I looked into the characteristics of various colours and chose the ones that work best with the Bus Application based on the feelings they were deploying.
I also researched at visibility, accessibility, and consistency in order to have an eye on mental models and incorporate them into the Bus Application project.

Clickable prototypeCompetitor researchConsistency best practiceVisibility best practice

UI Process:

After that, I've started to investigate on viewport requirements to make the app appropriate for any device that the users are using. I've further developed the app'sLayout. Reviewed and iterated.
I started the UI part by designing a mood board and investigation about suitable Typography.
Afterward I started designing a logo for bus application while at the same time I was working on my own logo.

Mood boardTypographyApplication logoBranding

Clickable Prototype:

I started to design high fidelity prototype, based on wireframes I’ve created and decision made through the previous stages.

Hi-fidelity prototype IHi-fidelity prototype II

Usability test and usability report:

After the first version of high fidelity prototype, I've started to release it among a limited group of users and get the feedback from them as usability test. Eventually I've prepared a usability report, which helped me a lot to modify the application. Following you can see couple of the edited options such as better contrast, legibility, typography, and ...

Usability test IUsability test IIUsability test IIIUsability test IVUsability test VUsability test VIUsability test VIIUsability test VIII

Final thoughts:

At the conclusion of this project, I believe the following are the most significant factors to consider:
1- First and first, iteration is critical.
2- Consistency is essential in all endeavours, not just UX design. It increases the usability of programs and websites through UX design. It allows users to work on applications or websites using their mental models, resulting in a more user-friendly output.
3- Accessibility is hugely critical. Not simply because of ethical concerns, but also because neglecting persons with various disabilities means eliminating a large number of potential users. It is unquestionably a major blunder.
4- Finally, I was thinking, like I indicated earlier, Iteration, Iteration, Iteration...

New Meadow's Border