Takeaway.com Case study

Takeaway.com Hub experience process, focusing on identifying and implementing the most effective navigation pattern

Background:

Takeaway B2C application, holds verius of external products within.
One of them is Takeaway for Business. Which I led the user experience.


The Hub, situated as a webpage within a native application presented a unique
challenge in terms of design, requiring careful consideration of the limited screen
real estate on the mobile version.

Additionally, the design had to accommodate browser
navigation within the application framework.

Back to drawing

While the MVP version consists of five main features, in the mature
product we have more than double.

Seeking inspiration online from various applications using diverse navigation patterns, focusing on the fintech and payment sectors.

Breaking down elements on the screen and exploring a fresh design approach resulted in the decision to focus the navigation in one place.
I came across an insightful article that supported the decision.
This solution would enhance navigation focus and increase the product's potential scalability.

From MVP to Full Scale product

In the non metuere version (MVP) me and product team map the must have capabilities
to be shown in the applications.

  • Balance overview

  • Card

  • Link personal card

  • Disabled card

  • Share balance

  • Disable card

Given the tight timeline for the MVP release,
led me to plan a basic fundamental structure and navigation, involving a user friendly interface with clear UI of users budget and essential functionalities. 

I categorized elements and functions into two groups:
Balance usage & Cards functions
This allows users to easily locate their target features.
I choose a clear navigation element between these categories using
Toggle component from the design system.

However, from user experience the navigation was complex and confusing,
and the UI wasn’t clear.
In addition to the Toggle component it became necessary to UI to have
secondary categories under each one. The selection navigation element chosen for this purpose was the Tab component.

Starting to plan the full product. 

As the product reached a certain point, after more then a year, additional capabilities and requirements were built on top of MVP framework, the initial release helped in getting valuable data about users behavior in the application. 

The next phase involved revisiting all the capabilities, considering the future
roadmap of the product.
This phase occurred during a pause in development, providing an opportunity to strategize and contemplate growth.
allowing for a more reflective and forward-thinking approach.
Translated the Hub into clear and native experience.

Recorded during a user research session: