Working alongside one of their UX Designers I helped Just Eat to create a better post-order experience in their consumer app by adding live map tracking, improving the map interface and proposing concepts for features to further enhance the user experience.

We then tested these features and concepts with real users in regular user testing sessions and enhanced our designs based on the feedback.

The brief

What they wanted

Just Eat had recently bought a similar food delivery service based in Canada called SkipTheDishes and, along with it, the ability to add live order tracking.

My main task was to help integrate live order tracking into their takeaway app. In addition I was also asked to help improve the existing map interface and propose any new features to further enhance the post-order experience.

[LEFT] The existing map interface (showing the current driver location, updated at intervals, not live), and [RIGHT] the live tracking as seen in the SkipTheDishes app.

My approach

Research and understanding

Knowing that the developers would first have to integrate the existing API before making any adjustments, my initial approach was to study the SkipTheDishes app, compare with what we currently had and then determine the bare minimum we would need in order to create an MVP to test and build upon.

I then looked at other products using live order tracking to see what problems were already solved and what features we might want to include.

After picking apart Skip’s interface we had a clear list of elements we would require to provide the basic experience on which we could test, iterate and improve.

The MVP

Applying what I learned

Having broke the new feature down into its basic elements I could then apply it to the existing Just Eat components which would give us at least a fuctioning base model to start playing with and testing with our customers.

Some of the basic UI elements in the SkipTheDishes app.
A simple replacement of icons, colours etc, and we have functioning feature that fits with the rest of the app.

Enhancements

Updating the map interface

While there were a lot of elements to cover in the UI (a lot more than we expected), the tricky part was creating something that was clear and intuitive to use, while also looked good, was on-brand and felt in-sync with the rest of the app.

The main areas we needed to focus on were:

  1. Where and how to show the ETA countdown
  2. Restyling the map UI elements
  3. Review the map style
  4. The progress info
  5. The summary panel and driver information
  6. Key user actions

We also needed to take a look at the existing map interface and define what were the components and features we have and what we would need.

Development of the countdown timer UI attached to the courier pin.

Showing the options on a map background makes a huge difference.

This style was chosen as it was easier to see exactly where the driver was.

How the pin UI would work in different positions on the map.

Breaking down the key features users would need on the map.

I used a google map custom styler to simplify the map to show only what users needed.

This was the chosen style based on simplicity, colour scheme and the desired level of information.

Planning all the steps we need to consider when notifying the user.

In order to understand if we’re missing anything I decided to write the notifications out like a conversation.

The actual alerts and notifications we send to the user.

The post-order screens after the UI refresh and adding the new tracking features.

Area for concern

The problem of the multidrop

When we set out to add multidrop, a feature that allowed drivers to handle several deliveries in one journey, the first challenge was simply how to show it on the map in a way that made sense. As I explored different approaches, I realised another issue: users might not be comfortable with other customers seeing exactly where they lived. I pushed to address this concern and worked on a solution that gave users clarity without compromising their privacy.

Some initial sketches for multidrop.

Early explorations of the multidrop map UI showing the concern of user privacy.

User testing

Getting feedback

We conducted live user testing sessions every 2 weeks where we would run real users through prototypes, ask questions, A/B test designs, perform card-sorting and other useful tests, which we were able to watch from our observation room.

We would then review the data and make changes to our objectives if necessary.

One of the user-testing sessions.

We conducted card-sorting sessions to test what features were important to users.

Conclusion

The final product

Comparing the map as it was before I started (left), the updated build-ready design (middle) and what we proposed for the future tracking experience (right).

Future thinking

Improvements and suggestions

While we had very specific requirements for the current roadmap, we were able to spend time on further enhancements to be considered for the future.

A re-evaluation of the order summary content to place the most useful information nearer the top.

Concept design for future version of the order tracking feature.