Integrating Route Prediction with MBus App
MBUS - Integrating Route Prediction Model Transportation App
MBUS - Integrating Route Prediction Model Transportation App
Course Project
Back-end Development
Prototype
Background
During the Winter of 2023, I took an 'Intro to Programming' course and was give a vague task: 'Improve something, somewhere' (I am not joking). My teammates and I had just experienced our first Michigan Winter, and if you know anything about Ann Arbor- we are very familiar with never-ending constructions and strong winters. We decided to tackle the pressing issue of students late to class or stranded at bus stops, due to the lack of real-time bus monitoring. We all coded and I took an extra step to visualize it.
During the Winter of 2023, I took an 'Intro to Programming' course and was give a vague task: 'Improve something, somewhere' (I am not joking). My teammates and I had just experienced our first Michigan Winter, and if you know anything about Ann Arbor- we are very familiar with never-ending constructions and strong winters. We decided to tackle the pressing issue of students late to class or stranded at bus stops, due to the lack of real-time bus monitoring. We all coded and I took an extra step to visualize it.
My Role
Developer
UI/UX Designer
Developer
UI/UX Designer
My Contribution
Contrbute
API Development
User Interface
API Development
User Interface
Tools
Python
Figma
Python
Figma
Teamwork
Joshua Nicolson
Devyani Jain
Joshua Nicolson
Devyani Jain
Current issues in the MBUS SYSTEM
Bus routes lacks adaptability and fluidity
Bus routes lacks adaptability and fluidity
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Hard to access frequently used routes
Hard to access frequently used routes
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Language barriers
Language barriers
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Unreliable route timings and frustrations
Unreliable route timings and frustrations
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
Doesn’t reflect real-time predictions. Just a permanent schedule. eg: construction, snow and traffic delays.
The SOLUTION
Timeline
Project timeline for Phase I and Phase II
Phase I: Developing the Route-Prediction Model
Phase I: Developing the Route-Prediction Model
Phase I: Developing the Route-Prediction Model
USER Data structuring and API integration
USER Data and API integration
User Data and API integration
The Ride API has unorganized data
The Ride API has unorganized data
Python-based backend fetched and organized data using:
Dictionary that store bus stop IDs as key and arrival time as values
Nested List that presents sequential data for bus routes
Python-based backend fetched and organized data using:
Dictionary that store bus stop IDs as key and arrival time as values
Nested List that presents sequential data for bus routes
Python-based backend fetched and organized data using:
Dictionary that store bus stop IDs as key and arrival time as values
Nested List that presents sequential data for bus routes
Impact: Organized data allowed faster access and a clear relationship between user-selected stops and arrival times
Impact: Organized data allowed faster access and a clear relationship between user-selected stops and arrival times
Impact: Organized data allowed faster access and a clear relationship between user-selected stops and arrival times
Handling user input
Handling user input
The system required users to enter a six-digit stop ID to search a stop!
The system required users to enter a six-digit stop ID to search a stop!
The system required users to enter a six-digit stop ID to search a stop!
A dictionary that
mapped bus stop names to their stop IDs
A dictionary that
mapped bus stop names to their stop IDs
A dictionary that
mapped bus stop names to their stop IDs
Impact: Now, users can look up a stop by it’s name and not the bus stop ID number
Impact: Now, users can look up a stop by it’s name and not the bus stop ID number
Impact: Now, users can look up a stop by it’s name and not the bus stop ID number
Error Management
Error Management
The API failed to return data for specific requests due to delays, missing information, or inconsistencies in route schedules
The API failed to return data for specific requests due to delays, missing information in route schedules
The API failed to return data for specific requests due to delays, missing information, or inconsistencies in route schedules
Solution: Add error handling parts
Validating API data before display
Providing alternative feedback or default messages
Solution: Add error handling parts
Validating API data before display
Providing alternative feedback or default messages
Solution: Add error handling parts
Validating API data before display
Providing alternative feedback or default messages
Impact: Minimized the risk to displaying inaccurate data
Impact: Minimized the risk to displaying inaccurate data
Impact: Minimized the risk to displaying inaccurate data
The class was over at this point, but I thought…
"What would this back-end system look like if it was implemented visually?"
The class was over at this point, but
"What would this back-end system look like if it was implemented visually?"
The class was over at this point, but I thought…
"What would this back-end system look like if it was implemented visually?"
So I went ahead and visualized it.
So I went ahead and visualized it.
So I went ahead and visualized it.
Phase II: Designing the Interface
Phase II: Designing the Interface
Updating the Challenge
Updating the Challenge
Updating the Challenge
How might I design re-design the M-Bus application implementing the route prediction model to improve the experience?
How might I design re-design the M-Bus application implementing the route prediction model to improve the experience?
How might I design re-design the M-Bus application implementing the route prediction model to improve the experience?
Phase II: Designing the Interface
User Interviews
After looking at The Ride and current M-Bus app
After looking at The Ride and current M-Bus app
After looking at The Ride and current M-Bus app…
I interviewed 10 Sophomore students at The University of Michigan from different majors.
I asked them about their current experiences with the Bus system and tracking it down.
I interviewed 10 Sophomore students at The University of Michigan from different majors.
I asked them about their current experiences with the Bus system and tracking it down.
I interviewed 10 Sophomore students at The University of Michigan from different majors.
I asked them about their current experiences with the Bus system and tracking it down.
Users expressed uncertainty and unreliability with the current MBus system on campus
Persona & journey
An Overview of a User's Journey on the Bus
An Overview of a User's Journey on the Bus
An Overview of a User's Journey on the Bus
Both, the persona and journey mapping helped inform pain points, which areas to be focused and how the current prediction model can be impactful.
Both, the persona and journey mapping helped inform pain points, which areas to be focused and how the current prediction model can be impactful.
Both, the persona and journey mapping helped inform pain points, which areas to be focused and how the current prediction model can be impactful.
Identifying points of friction and emotion through different action points when using the system
Assessing the old UI
What can be improved?
What can be improved?
Analyzing the current MBus application and my areas of opportunity
Visualizing the route prediction model
Low-fidelity wireframes
Visualizing the route prediction model
I iterated over these wireframes a couple of times. Looking back would have conducted usability testing to iterate further :(
Confidence when you travel on campus
Confidence when you travel on campus
M-Bus Transportation App
M-Bus Transportation App
M-Bus Transportation App
Catch your bus, not the stress. The U-M Bus App gives you real-time updates and instant access to your favorite routes, so you’re always on time
Catch your bus, not the stress. The U-M Bus App gives you real-time updates and instant access to your favorite routes, so you’re always on time
Catch your bus, not the stress. The U-M Bus App gives you real-time updates and instant access to your favorite routes, so you’re always on time
Low-fidelity wireframes
Takeaways and reflection
Takeaways and reflection
Expanding Impact
Expanding Impact
Expanding Impact
TAKEAWAYS
Previous
Smart Energy System for Jeep Electric Vehicles
Smart Energy System for Jeep Electric Vehicles
AI/ML & AR/VR Solutions
Oversaw end-to-end Process for Development
and design
/AR/VR Design
/AI/ML
Next Project
New Design System & Developer Tools
[Lucid Motors]
New Design System & Developer Tools
[Lucid Motors]
New Design System & Developer Tools
[Lucid Motors]
Sole UX Design Engineer, delivered immediate and long-term solutions
Oversaw end-to-end Process for Development
and design
/Design_System
/Cross-functional_experience