The School Bus Tracker was developed to address parents’ concerns about the safety of their children’s commute to and from school. This app allows parents to track their child’s bus in real-time and provides a monthly report on driver performance. For a comprehensive overview, check out the full case study here.
STEP #1: DESIGN
On the app’s homepage, our goal was to make crucial information easily accessible for parents:
- Driver’s info
- Pickup and drop-off status and ETA
- Delay notifications
- Access to the live map
To achieve this, we designed a homepage with different card statuses: full cards for incomplete pickups/drop-offs and smaller cards for completed ones. Each card contains the information mentioned above.
STEP #1: CHALLENGE
Caregivers are often in a rush and have limited time, so displaying essential information clearly was crucial. We worried that having various types of cards conveying a lot of information might overwhelm users and result in missing important information or having a hard time figuring out how to interpret the card stages or read the ride information.
Let’s see what we can find from analyzing our home page using the Attention Insight plugin and interpreting attention heatmaps
The first insight: Analyzing the predictive eye tracking heatmap generated by the Attention Insight plugin revealed that 34.8% of attention was on the first card, 18.7% on the second, and 19.7% on the last card. This imbalance needed addressing since each card pertains to a different child.
The second insight: The focus analysis showed that the pickup/drop-off information sentences were not receiving enough attention. While this information is crucial for caregivers, we need to make it more prominent.
The third insight: There is an unwanted attention to the page title which in our case is not that important, with simply changing it to a more similar title we probably would be able to lose some of that attention that was misplaced.
STEP #1: REDESIGN
The first insight: To reduce cognitive load, we consolidated the cards into a single design. This also included a clear CTA for the live map, differentiating clickable cards from non-clickable ones.
We removed titles from outdated information cards to avoid them looking like CTAs.
Instead of using a different structure, the active card was distinguished by adding CTA buttons and a stroke, effectively indicating an active ride without overwhelming the user.
The second insight: We decided to shorten pickup/drop-off information sentences and bold the important times.
The third insight: We also changed the homepage title to “Home”, which is more familiar to users and doesn’t draw much attention.
STEP #1: RESULTS
Here you can see how our changes led to a more balanced screen design and focused attention on the right places.
A more balanced screen design, directing attention to key areas.
Comparing both versions, the new card layout achieved a more even distribution of attention: 39% and 33% compared to the previous 35% and 19%.
The report card, being less critical than the ride cards, appropriately garnered less attention at 23%.
This redesign significantly improved our user experience, making crucial information more accessible and understandable for busy caregivers.
The increased focus on ride information in the updated version was also evident in the focus analysis.
Considering these changes were applied to the wireframe, further improvement will be done by adding appropriate icons and colors to enhance the focus on important information.
