Background
Medspeed is a healthcare logistics company that transports equipment, medical records, specimen, and all kinds of materials and supplies. Users of their application can be nurses, doctors, and administrative staff.
The Ask
Users wanted a way to look up a courier's ETA to their location and what items they were scheduled to pick up. Most users were using a printed out schedule that was given to them during implementation, but they wanted real time data and updates. The product owner wanted something similar to Google Flights UI, with filters, icons, and badges.
Requirements Gathering
The product owner gathered the requirements for this feature and passed them along to me. It was a mix of things he wanted to implement and things users asked us for. For the interactions with the search inputs and filters, he deferred to the Google Flights UI. I knew that our users frequently use their phones to access the app, so the page needed to be fully responsive. Ideally, I would have liked to get more time talking to users directly and ask for their thoughts on this feature.
Design
I used Bootstrap's 12 column grid system to make a fully responsive table that collapsed into cards on the mobile view. I removed any non-essential data that appears in the mobile view to make it more condensed and concise.
What I would Improve
It was a challenge to meet the product owner's design requirements while still making an intuitive user experience for this very specific feature our users were looking for. While users seemed to understand how to use this feature, they weren't really sure when to use it. If I could iterate on this design, I would remove a lot of the extra clutter. Users weren't utilizing the filters, because they found the data they were looking for on the page. My initial design was similar to a bus or train schedule, showing only the next hour's pickups and dropoffs.