Data and delivery information ready at your fingertips.
Project Background
Understanding the Problem
In order to truely understand the problem we spoke directly to the Fulfillment Managers and Delivery Drivers who requested help. It quickly revealed why a solution was under was soarly needed.
Fullfillment Problems
Fulfillment Managers have been using multiple stat tracking apps to monitor the performance of products at locations, and was only tied to store ID’s. This made it hard to associate ID’s with real locations, people, and even other metricsin other applications, leaving these managers frustrated and more open to mistakes.
Delivery Problems
Delivery drivers had similar issues. While they do not use as much of the metrics shown to Fulfillment Managers, they do need the visual association and quick access to directions.
Diving into the details, we found that some drivers would route their next location while driving away from the last to maintain efficiency. Many complained the process of finding the next location and routing was cumbersome and required more effort than services they used outside of their job like Google or Apple Maps. This is where the bonus request was added for stringing together multiple locations into a single automated route.
Project Kickoff
Scope and project Definition
Meeting with the project's PM and a few of the RedBull developers, we quickly defined solution concepts, requirements, a timeline, and the limitations:
Problem Statments
Fulfillment Managers do not have a centralized place to quickly browse their assigned locations for updates and metrics leading to additional cognitive load to making critical informed decisions.
Delivery Drivers struggle to find, select, and start the next stop on their routes efficiently leading to frustrations, delays, and in some cases unsafe driving conditions.
Defining Requirements
Map Page (Home) Map view with numbered markers for each location in the viewable space. List of locations viewable on the Map. Search Bar for filtering list and map view
Location History Displays all locations the user has opened in the app
Location Details Page Quick Directions linkSpecific Metrics for the location (finite list)
Map Page (Additional Requirments) Must follow RedBull Design System GuidelinesMust be responsive (Mobile first Design)Menu Button for future functionalityMaintain easy of use. One handed operability.Bonus request to ideate on Custom Route creation (Stringing multiple locations together into one route for deliveries)
Design Phase
Designing with users on speed dial
One fact I love when working on internal tools is the direct access to my users. No prolonged studies sourcing test users and sorting out times. With this in mind I dove quickly into the iteration and testing phase.
Map View
This page would serve as the home/landing page and allow users to search, filter, and select the location they are looking for. I focused on providing 2 key features:
Prioritizing Information: Using location data to dsiplay relevant locations and providing key information in the list view for easy identification.
Functional Familiarity: Mapping key features to locations familar to the user from other map based applications (search, filter, listview, locate me, zoom)
History View
History view is toggles by the history icon that uses the users account and recent selection history to build a list of location the user. This history was to be used as a proto-feature to allow users to build their own routes by reversing their history.
Bonus Challege: During implementation it was agreed on that the additional time it would take to set up the database to store a history is better left in the next iteration that includes a more direct approach to route building. For the purposes of this prototype this feature has been left in.
Locaton View
The details page had a finite list of information and graphics, but some data sets or graphics were larger than others. To keep this page functional on mobile and usable with a single hand I wanted to keep all the information for a particular data set visible on any device which led to one of the more interesting challenges of this design.
Challenges: - How do I condense each section to fit on mobile? - What device should I target for as my minimum device size? - How should users get between each section reliably framing the information?
Solution
The Final Iteration
I drafted layouts for each section into cards that fits on mobile using the iPhone 8 as a minimal device size. The selection of the iPhone 8 was based on device data from RedBull's other apps.
Once I knew each card would fit on our target devices, I used used replaced free scrolling with a Drag interaction to jump between cards reliably framing each sections data for the user.
Once that felt natural I added in a visual indicator for which section you were on with clickable links to jump between sections. Currently each section is represented by a dot, but future iterations will consider the inclusion of icons to represent each metric.
Wrapping Up
Puttin it all Together
Once we got sign off for these screen and buy in from dev, managment, and our users, the next step wa delivering Hi-Fidelity interaction design for testing through a comprehensive prototype.
Prototyping
I love this step as it begins to iron out design decisions made earlier in the process including the microfeatures/ interactions involved in things like dropdowns, drawers, and page transitions.
Using the prototype above we were able to build out and test this application with our user base, gaining critical insight and making the last design tweaks before we handed over designs for development.
The last part of this project was to provide the team with direction on the next iteration involving the implementation of Establishing and using routes. While the history feature was scraped for the MVP it gave way to additional discussion around this feature and the ability to take a list of locations, optimize a route, and pass that new route back to the driver for directions.
Some Improtant Questions
Are routes established and consistent or revised day by day?
Are Managers and Drivers always working with the same set of locations? Are there outliers?
Should the user be able to “Like” or “Favorite” a location for quick access?
Should routes be a thing you make on the fly?
Can we optimize the route or should the user be able to rearrange the route to optimize it themselves?
Can these multistop route be passed into the users prefered directions application or will we need to create an alternate solution?
With these questions I provided 2 directions for them to test and iterate with.
Version 1
My Routes builder
Best for consistant/ rarely changing routes, this version allows the user to add locations to a custom group/list with feature to tweak these lists as needed.
Version 2
Building Routes on the fly
Best for day by day routes, this route builder lets the user create a route quickly from the map or add location screen. Combined with the first direction the user could save these routes for future use.
Version 3
My Locations + Route Builder
Best for drivers or managers with a fixed list of managed locations. Here the user can add location to "My Locations" in the locations details page. Once the list is created the user can go to "My Locations" in the menu and select directions.
Additionaly in this version the user can long press a single direction to switch to an "Add more stops" mode, letting the user set up their route without leaving the page.
Conclusion
RESULTS AND TAKEAWAYS
This project was completed in 3 weeks which included additional minor tweaks as the project went through development and some requirments were changed for production needs. My last contact with the project was an enthusiastic sign off from the PM and overwhelmingly positive reception of the prototype by the Fullfillment Managers and Drivers.
Unique to this project was the intent to ideate on a solution for a V2 while the MVP was being designed. While I spent time designing for the route builder, the route optimization faces a few challenges that will need to be researched before the next faze of this project.
Methods to optimize routes
Selecting the closest location then chaining the next closest location to the most recent.
Sampling all possible routes and comparing drive times
Implementing Multistop Directions
Sending multistop route data to a directions app like google maps
Building a "Next stop" feature that allows each stop to be sent one at a time to the drivers Map application of choice
Final Thoughts
I think this project went particularly well and I enjoyed getting to work with the talented people at RedBull. I was delighted to get to work with a Design System as fleshed out as RedBulls was with their own custom Wiki and developer component intergrations. This project was also a perfect example of MVP design getting the low hanging fruit early and quickly without bogging down development timelines so we can deliver an impactful product quickly then make iteration on that product based on real world usage and feedback.
Thank you for getting this far. I put a lot of effort into these case studies and its nice to see people get to the end... even if they skip some pieces. Have a great rest of your day!