BoardSmart
School Bus Tracker App UX case study
The Project:
BoardSmart is a mobile application that I created for a University at Eastern Mediterranean University to help improve the transport services. As the sole UX designer, I designed this project from inception to final design through research, ideation, and UX design principles.
Duration: 3 weeks
Role: Product Designer, UX Researcher, Interaction Designer
Tools: Adobe XD, Adobe Photoshop
Context
It is very annoying when you plan your bus trip to the class using the bus schedule but end up waiting for an extra hour because the bus is caught in traffic or does not come at the time when it is supposed to. I was tasked with providing a mobile application that would allow students to time their trips more accurately by tracking the real-time location of the bus.
The Process
- Research
- Define
- Ideate
- Prototype
- Iterate
Research
Surveys & Interviews
To understand the habits of students and how they approach the effectiveness of relying on the bus timetable, what issues they were facing and what features would be beneficial to them, I surveyed 10 different regular bus users. I wanted to know how the users will answer depending on how often they use the bus service, so I separated my findings by users that were Casual and Regular commuters.
The surveys and interviews helped me understand more about the needs and frustrations of my users, and I was able to pull a few key findings that would help shape my project:
- “Dummy it down”
Users were unwilling to take time to learn complex processes for an app, especially considering the fact that they already had their systems to cope with the unreliability of the bus schedules. As such, I knew I had to “dummy” it down so that the users don’t need extra “coaching” to be able to add this to their routine.
2. Custom Notifications
As expected, there was a definite difference in user routes between commuters of the bus. I decided that bus route notifications should be tailored to suit each user’s usual route.
User Stories
Finally, I created user stories that I could use to better understand the potential needs of commuters, to help decide on the functional requirements for BoardSmart, and that I could refer to throughout the project to keep focused.
Define
Problem Statement
Commuters need a way to find easily understandable and reliable ways to plan their trips before heading to the bus stop because they need to make informed and safe decisions about their activities for the day.
User Persona
One of my key findings from my user research was the fact that users of varying levels of the bus transport have similar needs, although there were 2 user personas namely -Casual bus user and Regular bus user, the only difference was the frequency at which they encountered such problems. So I used the regular bus user profile as a focal point for this research.
Mental Model
Core Features
With a better idea of my user and their needs, I identified three core features that I wanted to focus on for the product.
Select bus route
A select bus route feature that would allow users to search for bus information on a particular route.
Check bus availability
A feature check bus availability to let the commuter know if the bus is full so they can plan accordingly.
Set reminder
A “set reminder” feature helps the commuter get notified of their custom trip.
Site Map
Ideate
Low fidelity wireframes
Since simplicity and ease of use are some of the biggest aims of BoardSmart, I didn’t want to make more screens than I had to. This would help emphasize the core features better. I sketched out the mainframes I would need first, then added the secondary pages later. I played with variations of the screen arrangements till I settled on a version I believed will satisfy my user’s needs.
Test
Usability Testing
This phase was one that was very crucial to the entire project. From this phase, I was able to identify the features users were finding useful and the features they were having difficulties with. I was able to create scenarios that would involve tasks about the main features of the app and they left a review of their experience using the app. I compiled and analyzed these results using an affinity map.
Results
There were mixed reviews by the users of the app, in order to know the way forward, I classified the reviews to know what to keep and what to remove/add based on positive and negative feedback respectively.
Positive
- The app was simple and easy to use
- Information was easy to access
- They understood the color reference
Negative
- There was no feature to check for the bus schedule on the app
- The splash page animation took a long time to load
Iterate
Design Changes
Based on the data I got from the user feedback, I made necessary adjustments to accommodate the needs of the users this involved me creating new features and new pages to meet these needs.
I made a new page to add a feature to check the bus schedule, I had thought with a feature to set a reminder for when the bus leaves, it will be irrelevant to have the bus schedule on the app.
I also added an onboarding sequence to provide users with valuable information before moving to the home screen. I had thought the app will be simple enough to navigate without aid, and also to save the user’s time.
I reduced the animation of the splash page because some users thought there was a bug or it was bad Wi-Fi when the animation played for a long time.
Based on this feedbacks, here are some of the changes I made:
Initially, the home page was accessed immediately after sign in. I added a transition page that provides new users with valuable information on what to expect and how to navigate the site. I reduced the time delay for the splash page as users got impatient waiting that long.
I added a feature to get access to the bus schedule, this could be done by an external link.
Design Language System
To ensure consistency throughout the mobile app, I created a system to help keep me in check.
Final Product
Reflection
What could be better?
Although my color palette was heavily based on my client’s institution’s color theme, I believe I could add more richness to the quality of the color by using different shades of the same color.
Being my first project, I was really eager to jump into AdobeXD to start designing, which made me get stuck in the middle of the process and pushed my timeline back somewhat. My process could be more streamlined and sped up if I stick to the fundamentals and save the design for last.
So what now?
I was really excited to get my first UI/UX project out there, but I’m not going to lie, this was way tougher mentally than I had expected given the scope of the project. I learned a lot working on this project especially in the research area. I also learned how similar UI/UX principles overlap with the Architecture principles I learned in school. During this project, I was able to create a system and a workflow to carry me through my projects.
I have a couple more projects on my list to start after this project, but first I’m going to take some time off to clear my head a bit and learn more.
Feeling chatty? Talk to me on Twitter or LinkedIn
Check out the Prototype for BoardSmart here.
