Step 04 / 11

Structure before screens

The team first decided what goes where and how people move: the app’s map, a reorganised profile, the ordering journey from its first to its final version, sign up, and the restaurant side.

Scroll

01 · Information architecture

One navigation bar, four tabs.

IA-MVP- Ite.3 is the third iteration of the MVP information architecture: everything sits under Home, Search, My orders and profile. Hover a box, or focus the map and use the arrow keys, to trace its path back to the navigation bar.

02 · Profile New IA

The profile, reorganised.

2

groups under profile in IA-MVP- Ite.3: personal information and Setting

12

groups under Profile in the Profile New IA

Profile
Profile New IA working board: the Profile card above twelve light-green boxes with bullet lists
The original Figma board · open to zoom

03 · food ordering journey - Initial ver

The first ordering journey: a chain of yes/no decisions.

Found a restaurant? Found a meal? Add another meal? Each “No” loops back through the filter or search bar. Answer the diamonds to walk it.

    Initial food ordering decision flow board, from Start to end
    The original Figma board · open to zoom

    04 · Initial ver · screens and their contents

    Alongside it: what each screen needs.

    Under the decision flow, the same board lists the elements of every screen and what each card must show. Hover an element to light the screen it opens.

    Initial screen-content board: Home page elements, Restaurants, restaurant, menu, meal page, cart, track order, review
    The original Figma board · open to zoom

    05 · food ordering journey - Final ver

    The final journey: three ways in from Home.

    • screen
    • user action / button
    • list screen
    • decision
    • pop-up
    • start / end
    Final food ordering journey board, from Start to End

    06 · Initial ver → Final ver

    What changed between the two versions.

    Same journey, stage by stage. Switch versions to see what was removed and what was added.

    07 · sign up

    Three screens, then an optional profile.

    sign in → sign up → otp, then a pop up asks whether to set up the profile now. Four intake fields are tagged “not required”. Step through it.

    Sign up flow board: sign in page, sign up page, otp, profile pop-ups, set profile and end
    The original Figma board · open to zoom

    08 · Restaurant version · IA

    The restaurant side gets its own map.

    A Nav Bar with nine connected sections, each listing what it must show. Notification and Language sit on the board without a connector. Scroll the lists, or hover the map.

    09 · Accepting order flow

    Accepting an order: five ways out of Display Order.

    Adjust, accept, call the customer, get help or cancel. Adjusting needs the customer to accept; the red path is cancellation. Pick a branch to follow it to End.

    • Button
    • screen
    • pop up
    • decision
    • start / end
    • cancellation path

    Accepting order flow working board with its legend and the red cancellation path
    The original Figma board · open to zoom

    What this step produced

    1. IA-MVP- Ite.3navigation bar · 4 tabs
    2. Profile New IA12 groups
    3. food ordering journeyInitial ver → Final ver
    4. sign upsign in · sign up · otp · set profile
    5. Restaurant version · IANav Bar · 9 connected sections
    6. Accepting order flow5 branches · 1 decision
    Next · Step 05 Next, the structure is explored as wireframes, pixel boxes and a direction. Exploration