Ibrahim Akeyewale



"I want to be able to book ๐˜ฝ๐™๐™ online and make seat reservations. Itโ€™s not fair waiting for a bus and when it eventually comes, finding out that thereโ€™s no available seat. There should also be a way Iโ€™ll be able to track buses coming my route to see how close they are which I can thus figure out if I should wait or seek other alternatives."

A Bus Rapid Transit (BRT) in operation.

โฌ†๏ธ A Bus Rapid Transit (BRT) in operation. โฌ†๏ธ



OVERVIEW โ„น๏ธ

Lagos, the bustling cosmopolitan city of Nigeria, has long grappled with the challenges of traffic congestion. The ubiquitous "Danfo" buses, alongside the Bus Rapid Transit (BRT) system, have served as the primary means of transportation for millions of commuters. However, the inefficiencies and uncertainties associated with the existing transport infrastructure have left commuters longing for a more seamless and exciting experience. In response to these issues, this team embarked on an ambitious project named ๐—Ÿ๐—”๐—š๐—ฅ๐—œ๐——๐—˜, aimed at revolutionizing public transportation within the city. The major goal of this project is to address the deficiencies that come with the BRT experience.

PROBLEM โ˜น๏ธ

Before we start talking about what the problem weโ€™re trying to solve looks like, letโ€™s take a look at a background story that will help us highlight and understand the scenario better.

The Present User Journey of a BRT user.

โฌ†๏ธThe Present User Journey of a BRT user. โฌ†๏ธ



As we can see above, The BRT system, despite its merits, has been plagued by a multitude of issues that hinder the overall commuting experience which gives room for improvement and opportunities. ๐—จ๐—ป๐—ฐ๐—ฒ๐—ฟ๐˜๐—ฎ๐—ถ๐—ป๐˜๐˜† regarding bus arrival times, the lack of information on available seats, the distance to the nearest bus stop, and concerns over passenger safety have all contributed to commuter frustration. Also, The incessant traffic congestion which arises due to the enormous transportation of millions of people in the city of Lagos has made the Service Quality of the Bus Rapid Transit (BRT) system be adjudged by bus commuters as not up to standard due to its inefficiency to transport people swiftly because, in a "hustling and bustling" city like Lagos, time is crucial. The inadequate facilities and inability to provide maximum security and safety to the consumers. Since creating value for customers has been a vital source of competitive advantage, some of the major problems hindering the efficiency of the BRT are the above-highlighted demerits.

GOALS AND OBJECTIVES ๐Ÿฅ…

The ๐™‚๐™ค๐™–๐™ก of this project is to design a Mobile Application for the Lagos State Government that will address the already identified constraints and help increase the user experience of the BRT. The system will accommodate the high levels of demand in the face of a dilapidated infrastructure of limited capacity, ensuring that operations are sustainable by utilizing the appropriate delivery structures, establishing the appropriate regulations, and fleetly connecting the commuters to their destination in the easiest practice.

RESEARCH ๐Ÿ“

Several research methods were employed in the cause of this project in other to empathize keenly with the users of the BRT and to have a raw idea of how the Problem is to them and the best way to improve and implement the solution.

  • ๐—ฆ๐˜‚๐—ฟ๐˜ƒ๐—ฒ๐˜† ๐Ÿ“ฐ

After the project kicked off and the background research check was complete, we defined our research strategy and objectives. Understanding the target audience and their challenges was our priority. First, we built an online survey using Google Forms and shared it in various relevant communities. In just a few days, we received 45 submissions. Based on these, we identified 5 common pain points, which led us to the next step.

A photogrid of two screenshots from the survey response.

โฌ†๏ธ A photogrid of two screenshots from the survey response. โฌ†๏ธ



  • ๐—œ๐—ป๐˜๐—ฒ๐—ฟ๐˜ƒ๐—ถ๐—ฒ๐˜„ ๐Ÿ—ฃ๏ธ

During the empathize phase of the research part of the project, we conducted user interviews to build new personas and interact with the users. Together with the team, we prepared an interview script with 10 open-ended questions, focusing on our target audienceโ€™s values, motivations, and daily routines. In 4 days, we recruited and interviewed 4 users remotely. The result and the evaluation of the interview were what brought the pain points in the Define stage and the need for this project. The Interview findings were referenced throughout the entire design process.

The transcript of the interview with one of the respondents.

โฌ†๏ธ The transcript of the interview with one of the respondents. โฌ†๏ธ



  • ๐—จ๐˜€๐—ฒ๐—ฟ ๐—ฃ๐—ฒ๐—ฟ๐˜€๐—ผ๐—ป๐—ฎ ๐Ÿ‘พ

After the survey and Interviews, We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviours. So, we choose two out of the respondents and created 2 personas for each of our user segments. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.

User Persona of one of the respondents, Ayodele.User Persona of another respondent, Blessing.

โฌ†๏ธ User Persona of another respondent, Blessing. โฌ†๏ธ



  • ๐—˜๐—บ๐—ฝ๐—ฎ๐˜๐—ต๐˜† ๐— ๐—ฎ๐—ฝ ๐Ÿ—บ๏ธ

The empathy map was birthed from the key points of the user persona. It helps us identify the problem weโ€™re solving and gives us a clear perspective of what the users go through and what needs to be done.

DEFINE

After the thorough and intense research carried out in the empathize phase, weโ€™re able to get a clear picture of the major problems and pain points users of BRT experience and want improvement on. In the same regard, weโ€™re able to identify solutions to those pain points which thus birthed the introduction of some features that will help improve the user experience of the app.

  1. ๐—–๐—ต๐—ฎ๐—น๐—น๐—ฒ๐—ป๐—ด๐—ฒ๐˜€/๐—ฃ๐—ฎ๐—ถ๐—ป๐—ฝ๐—ผ๐—ถ๐—ป๐˜๐˜€ โš ๏ธ ๐Ÿ”ด

  • Stressful Seat Reservation Process: The process involves transacting (buying tickets) and verification. Users donโ€™t like the stress that comes with queueing up to buy a ticket either by cash or by using the Cowry card at the bus stop when the bus comes around. Itโ€™s stressful and time-wasting. They want a seamless and more efficient process that can be reduced to just verification. Like booking for the bus before the arrival of the bus. When the bus arrives, theyโ€™ll only have to go through the authentication process and not the process of buying the ticket and authentication.

  • Insecurity of commuters: With some reported cases of attempted kidnap and harassment, users are worried about the insecurity factor of the BRT.

  • Location and Real time tracking: Time is important in a city like Lagos. Users donโ€™t just want to wait hopelessly at the bustop with no information of when the bus will arrive or whether thereโ€™s even available space on the bus. They also want to be able to see the route the Bus will ply. They want to have access to these information to help them make informed decisions.

  • Price: The inconsistency in price is also a major hindrance for potential users of BRT. This product is designed to have Commuters enjoy a consistent price with respect to their destination.

  • Payment and Subscription; People want the option of a subscription model where they can pay for recurring trips which will save them the stress of paying on each particular ride. Importantly, the mode if payment too which will see them avert the stress of physically funding the conventional cowry card before they can pay and access the bus. This problem brought the introduction of e-wallet.

2. ๐—œ๐—ฑ๐—ฒ๐—ฎ๐˜€ ๐—ฎ๐—ป๐—ฑ ๐—ฃ๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜ ๐—™๐—ฒ๐—ฎ๐˜๐˜‚๐—ฟ๐—ฒ๐˜€ ๐Ÿ’ก

  • Ride Ordering: A user-friendly feature that allows commuters to book a ride, specify their desired destination, and get linked up with a coming bus going that route In a bid to ensure a convenient and efficient public transport experience.

  • Nearby Bus Tracking: A real-time map feature displaying the locations of nearby BRT buses, along with their estimated arrival times, enabling users to plan their journeys accordingly.

  • Seat Availability and Reservation: Users can view the number of available seats on approaching buses and reserve their preferred seats in advance, guaranteeing a stress-free commute.

  • Traffic Updates: Live traffic situation reports are integrated into the application, providing commuters with alternative routes and helping them avoid congestion hotspots.

  • Secure Digital Wallet: A seamless and secure payment system allows users to credit their digital wallets, enabling hassle-free payments for rides, as well as the purchase of airtime and related services.

  • Enhanced Safety Features: The inclusion of an SOS button within the application provides commuters with a quick and reliable means of alerting authorities during emergencies, prioritizing passenger safety.

DESIGN

  • ๐—จ๐˜€๐—ฒ๐—ฟ ๐—™๐—น๐—ผ๐˜„? ๐—ช๐—ฒ๐—น๐—น, ๐˜„๐—ต๐˜† ๐—ป๐—ผ๐˜. ๐Ÿ˜…

The importance of user flows and journeys can not be underestimated in designing a product. A major percentage of our targeted users are digitally savvy and are familiar with the conventional mode of the majority of digital products. Thus, we decided to make use of the normal flow they are familiar with in the course of building an intuitive product.

User Flow

โฌ†๏ธ User Flow โฌ†๏ธ



  • ๐—ฆ๐—ธ๐—ฒ๐˜๐—ฐ๐—ต/๐—Ÿ๐—ผ๐˜„ ๐—ณ๐—ถ๐—ฑ๐—ฒ๐—น๐—ถ๐˜๐˜†? ๐——๐—ฒ๐—ณ๐—ถ๐—ป๐—ถ๐˜๐—ฒ๐—น๐˜†. ๐Ÿค—

After the flow of the design was defined, the interfaces were sketched and roughly drafted using pen and paper before it was sketched on the Figma board and made up the low fidelity.

Few selected low fidelity screens.

โฌ†๏ธ Few selected low fidelity screens. โฌ†๏ธ



  • ๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป ๐˜€๐˜†๐˜€๐˜๐—ฒ๐—บ! ๐Ÿ‘จโ€๐Ÿ’ป

We know not every product needs a design system. But remember the goal of this project and in a bid to prioritize scalability and to make changes easier in the future, we create a design system for this project.

ColoursShadows.TypographyButtonsRating, navigation bar and calendar.Cards and Decision Options.

โฌ†๏ธ Cards and Decision Options. โฌ†๏ธ



Our design system is equipped with over ๐Ÿญ,๐Ÿฌ๐Ÿฌ๐Ÿฌ ๐—ฐ๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜๐˜€ and over ๐Ÿฎ๐Ÿฌ๐Ÿฌ ๐˜€๐˜๐˜†๐—น๐—ฒ๐˜€ which makes it quite impossible to share everything in this case study. This is the link to preview the full design system.

Interface Design

  • ๐—Ÿ๐—ผ๐—ฐ๐—ธ ๐—ฆ๐—ฐ๐—ฟ๐—ฒ๐—ฒ๐—ป/๐—ฆ๐—ฝ๐—น๐—ฎ๐˜€๐—ต ๐—ฆ๐—ฐ๐—ฟ๐—ฒ๐—ฒ๐—ป. ๐Ÿ›…

The lock screen is the first screen users see when they wake their device, it often shows necessary notifications upon permission. The lock screen showing notifications from the LagRide app is shown below.

The splash screen is a brief introductory screen displayed when you open the LagRide app. It provides a visual transition as the app loads.

Lock Screen & Splash Screen

โฌ†๏ธ Lock Screen & Splash Screen โฌ†๏ธ



  • ๐—ข๐—ป๐—ฏ๐—ผ๐—ฎ๐—ฟ๐—ฑ๐—ถ๐—ป๐—ด ๐—ฆ๐—ฐ๐—ฟ๐—ฒ๐—ฒ๐—ป โ†•๏ธ

The onboarding screen came after the opening/splash screen. It gives a brief introduction of what the app offers and what the user should expect.

Onboarding Screen

โฌ†๏ธ Onboarding Screen โฌ†๏ธ



After the onboarding screen, thereโ€™s a smooth flow of authentication where youโ€™ll be directed to create an account or log in if you already have an account.

The filled screen to create account and to login.

โฌ†๏ธ The filled screen to create account and to login. โฌ†๏ธ



In the cases of forgotten passwords, thereโ€™s provision for a seamless password recovery process that will reset the password and verify using the registered email address.

The password retrieve screens.

โฌ†๏ธ The password retrieve screens. โฌ†๏ธ



  • ๐—›๐—ผ๐—บ๐—ฒ ๐˜€๐—ฐ๐—ฟ๐—ฒ๐—ฒ๐—ป ๐Ÿ 

The home screen is the first screen a user encounters after onboarding and successfully logging in to the app. This screen is carefully designed to bring the primary objective of the users to the fingerprint. Ride ordering makes up the major part of the home screen where users can easily insert their location and check for nearby buses. This screen also links to other pages of the app using the navigation bar.

Home screen.

โฌ†๏ธ Home screen. โฌ†๏ธ



  • ๐—ฅ๐—ถ๐—ฑ๐—ฒ ๐—ผ๐—ฟ๐—ฑ๐—ฒ๐—ฟ๐—ถ๐—ป๐—ด ๐Ÿš

The user is provided with an intuitive interface to order their ride by simply clicking the โ€œsearch routes and pricesโ€ button. They will then choose the departure day, confirm their location & destination address and will then be availed with information about rides going that route and price.

The screens during the bus ordering process.

โฌ†๏ธ The screens during the bus ordering process. โฌ†๏ธ



After choosing their preferred bus going towards a particular route and time, theyโ€™ll have all the information about the order to confirm and book. After clicking on the โ€œbook tripโ€. They also need to choose and reserve a seat. The screen will show the available and unavailable seats position in the bus and the user can choose from the available ones.

Order Information and Seat Reservation Screens.

โฌ†๏ธ Order Information and Seat Reservation Screens. โฌ†๏ธ



After reserving the seat, the user can then choose a method of payment to confirm their order. Different methods of payment are made available to the user to choose from. After payment, the user will have the e-ticket which will be used for access to the bus.

Payment method and ticket screen.

โฌ†๏ธ Payment method and ticket screen. โฌ†๏ธ



  • ๐—ง๐—ถ๐—ฐ๐—ธ๐—ฒ๐˜ ๐—ฉ๐—ฎ๐—น๐—ถ๐—ฑ๐—ฎ๐˜๐—ถ๐—ป๐—ด ๐ŸŽŸ๏ธ

Before the arrival of the bus, the user will be able to track the bus and will be duly updated about the movement of the bus and how soon the bus will arrive. Notification of the booked bus movement will be sent from time to time to the user. Upon arrival, the user only need to get his/her QR code scanned at the entrance which will validate the ticket and give the user access to the bus.

The Notification, QR code and welcome screen.

โฌ†๏ธ The Notification, QR code and welcome screen. โฌ†๏ธ



  • ๐—˜๐—ป ๐—ฟ๐—ผ๐˜‚๐˜๐—ฒ ๐ŸšŒ

When the bus is en route, the user will also have information like the movement of the bus on the map. It will also notify the user when theyโ€™re close to their destination. Importantly and one of the major goals of this project, the user will also have the option of sending a ๐—ฆ๐—ข๐—ฆ ๐—ฆ๐—ถ๐—ด๐—ป๐—ฎ๐—น in case of emergency. This feature is to address the security concerns of Commuters and users of the BRT.

Bus enroute screen.

โฌ†๏ธ Bus enroute screen. โฌ†๏ธ



  • ๐—ช๐—ฎ๐—น๐—น๐—ฒ๐˜ ๐Ÿ’ธ

The wallet screen of the navigation bar provides the user with an e-wallet that can be used to make ๐™ค๐™ฃ๐™ก๐™ž๐™ฃ๐™š ๐™ฉ๐™ง๐™–๐™ฃ๐™จ๐™–๐™˜๐™ฉ๐™ž๐™ค๐™ฃ๐™จ. The wallet can be funded and transactions like airtime, data, utility bills, BRT bus payments etc. can be made using the app both for the users and third parties.

Wallet Screen.

โฌ†๏ธ Wallet Screen. โฌ†๏ธ



  • ๐—›๐—ถ๐˜€๐˜๐—ผ๐—ฟ๐˜† ๐—ฎ๐—ป๐—ฑ ๐—ฃ๐—ฟ๐—ผ๐—ณ๐—ถ๐—น๐—ฒ ๐Ÿ‘ฅ

The history page shows the userโ€™s previous orders and the profile page gives room for the users to ๐™ฅ๐™š๐™ง๐™จ๐™ค๐™ฃ๐™–๐™ก๐™ž๐™จ๐™š ๐™–๐™ฃ๐™™ ๐™จ๐™š๐™ฉ ๐™ช๐™ฅ their account. The user can also save location which is in a bid to save the user the stress of searching for regular and recurring orders.

History and Profile and saves location Screens.

โฌ†๏ธ History and Profile and saves location Screens. โฌ†๏ธ



  • ๐—”๐—ฐ๐—ฐ๐—ผ๐˜‚๐—ป๐˜ ๐—ฆ๐—ฒ๐˜๐˜๐—ถ๐—ป๐—ด๐˜€ โš™๏ธ

Account settings screen.

โฌ†๏ธ Account settings screen. โฌ†๏ธ



  • ๐—ข๐˜๐—ต๐—ฒ๐—ฟ ๐˜€๐—ฒ๐˜๐˜๐—ถ๐—ป๐—ด๐˜€

Other settings screen.

โฌ†๏ธ Other settings screen. โฌ†๏ธ



Testing

After the design, we put the product to the test to see if weโ€™ve been able to ๐˜€๐—ผ๐—น๐˜ƒ๐—ฒ ๐˜๐—ต๐—ฒ ๐—ฝ๐—ฟ๐—ผ๐—ฏ๐—น๐—ฒ๐—บ๐˜€
and below is the journey of the users that we tested with.

User Journey 1User Journey 2

โฌ†๏ธ User Journey 1 & 2 โฌ†๏ธ



As you can see, for the first user journey scenario, the user is availed with useful information and experienced a seamless journey using the platform.
But for the second scenario, the user was disappointed halfway but with the information he had access to, he didnโ€™t have to waste his precious time waiting for a bus thatโ€™s not coming. The information helped him make an informed decision that salvage the situation by seeking alternative as soon as possible.

CONCLUSION AND NEXT IMPROVEMENT.

In the course of this project, I was immersed in the research and design part and I think it sharpened my knowledge and understanding of user research. It was awakening and insightful. I learnt vital lessons that are even beneficial and consequential to other projects Iโ€™m working on. I acquired proficiency in techniques like interviews, observations, and usability testing. Engaging with users early on validated assumptions and enabled iterative design. These lessons are now deeply ingrained in my approach, ensuring future projects are user-centric. ๐—Ÿ๐—”๐—š๐—ฅ๐—œ๐——๐—˜ amplified my understanding of the importance of user research and its impact on creating meaningful design solutions. Even though a lot of work has been committed to this project in a bid to improve the user experience of the ๐—•๐—ฅ๐—ง ๐˜€๐˜†๐˜€๐˜๐—ฒ๐—บ, it can still get better and thereโ€™s always room for improvement. Here are a few improvement opportunities to improve the performance of this project.

  1. ๐—œ๐—บ๐—ฝ๐—ฟ๐—ผ๐˜ƒ๐—ถ๐˜€๐—ฒ ๐—ง๐—ถ๐—ฐ๐—ธ๐—ฒ๐˜ ๐—ฅ๐—ฒ๐—ฑ๐—ฒ๐—บ๐—ฝ๐˜๐—ถ๐—ผ๐—ป
    An upgrade of this project can think of a better way to seamlessly redeem tickets in the process of verifying the ticket at the bus stop. Which will save users the time of scanning the QR code to gain access to the bus.

  2. ๐——๐—ฒ๐˜€๐˜๐—ถ๐—ป๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—”๐—น๐—ฎ๐—ฟ๐—บ
    A feature like Destination Alarm will make the upgrade a worthy one because there are situations where commuters donโ€™t know if they are already at the bus stop and should alight or if theyโ€™re probably lost in the comfort of the bus and doze off. The destination alarm will notify them that they need to alight.

  3. ๐—™๐—ถ๐—ป๐—ด๐—ฒ๐—ฟ ๐—ฃ๐—ฟ๐—ถ๐—ป๐˜ ๐—”๐˜‚๐˜๐—ต๐—ฒ๐—ป๐˜๐—ถ๐—ฐ๐—ฎ๐˜๐—ถ๐—ผ๐—ป
    If this project continues, the fingerprint authentication technique can be introduced to enforce a more secure product. Especially with the implementation of the e-wallet, a more secure mechanism has to be put in place to safeguard the finances of the users

๐™๐™๐™š ๐™—๐™š๐™จ๐™ฉ ๐™ฅ๐™ง๐™ค๐™™๐™ช๐™˜๐™ฉ๐™จ ๐™™๐™ค๐™ฃโ€™๐™ฉ ๐™›๐™ค๐™˜๐™ช๐™จ ๐™ค๐™ฃ ๐™›๐™š๐™–๐™ฉ๐™ช๐™ง๐™š๐™จ. ๐™๐™๐™š๐™ฎ ๐™›๐™ค๐™˜๐™ช๐™จ ๐™ค๐™ฃ ๐™˜๐™ก๐™–๐™ง๐™ž๐™ฉ๐™ฎ. ๐™๐™๐™š ๐™จ๐™–๐™ข๐™š ๐™–๐™ฅ๐™ฅ๐™ก๐™ž๐™š๐™จ ๐™ฉ๐™ค ๐™œ๐™ค๐™ค๐™™ ๐™˜๐™–๐™จ๐™š ๐™จ๐™ฉ๐™ช๐™™๐™ž๐™š๐™จ.

Thank you for reading this case study!
Want to work with me? Feel free to contact me here [email protected]

This project was jointly worked on and supervised by Egbemode Abayomi, and Bisiriyu Tomiwa.

Written by Ibrahim Akeyewale

What are your thoughts?๏ปฟ

Create sites with AI