Redesigning the Drive Portal

Problem to solve

Should we get rid of the web Driver Portal? Is it bringing value to the company?

Assumptions

After redesigning the mobile app I wanted to update the Driver Portal. It had the same outdated design as the mobile app. The product VP didn’t see the value in investing in a redesign, assuming drivers would use the native mobile app and not a web-based platform.

Resurrecting an overlooked resource

Dark, monotone design now out of step with the new mobile design
Inconsistent alignment or design direction

Research

I started by looking at Google Analytics which gave us the site traffic and device information. I then worked with a UX researcher and we added a Hotjar survey to the site to find out more details about tasks and user patterns.

Findings

The data showed many people were accessing this site on their mobile devices which we had not anticipated. Survey results also showed that people were searching for stations, planning trips and starting sessions. Another revelation was that many users worked in cell restricted offices, such as call centers so users were using the web portal to monitor charging sessions and respond to Waitlist notifications. With these new findings, we were able to convince management that updating the site was worth investing in to support many of our drivers and support station owners.

Finding stations and monitoring ranked  higher than anticipated
Surprisingly, drivers used a browser on mobile to complete tasks

Redesign

The most effective approach to the redesign was to align it with the new mobile app, identifying key information based on user profiles.

Bottom sheet details translated well to a card design

A card-based design worked best for a responsive design and the larger map area allowed a popover detail using the card layout. The final design was built around reusable components for a cohesive look and feel with the mobile app.

Documentation to show which fields to include in the new card design
Components were built to improve design and ensure consistency
Applying components to the station list

I mapped the mobile functionality to the web design to ensure feature parity and a consistent logic

New Driver Portal using components
Responsive design now supported mobile viewing to accommodate the users we discovered in our research  
Mobile and web apps now feel related  and give users a seamless experience no matter which platform they access

Lessons learned

  • Challenging assumptions and collecting data are vital to help make informed decisions on product roadmaps.