Menu builder

Complex menu building web application

Menu builder is one of the biggest redesign projects I am in charge of at Bypass Mobile. It cost 6 months for my team to do research, design ,test and iterate. The goal of the redesign is to help our users to get their job done faster and smoother, which in turn makes their lives much easier.

My Role

1. Researcher: I interview users and gather feedbacks about current menu building process. I analyze support tickets and data to drive design decisions. I dig deeply into users' real needs behind the scene.

2. UX Designer: I cooperate with other team members to utilize the research results and bring conceptual ideas and solutions. We reconstruct the information architecture, redesign user journey, and build an efficient tool to help our users to achieve their goals.

Problems to solve & Who are the users

The goal

To help our users to finish their tasks, even if they don’t have ‘all the pieces’ ready.

Problems of current product
  • Un-happy path: Hard to go through the menu building flow smoothly.
  • Lack of context: Hard to know what’s on a menu.
  • Hard to navigate: Hard to find/edit/create a required object.
    • Who are the users
  • Concession managers who manage the back of the office.
  • Suite managers who manage menu item price for suites.
    • What do they need
  • 1. Quickly find, create and edit a menu/item/modifier group.
  • 2. Quickly assign or remove items from menus.
  • 3. Quickly manage a required object to continue the menu building process.

    • Research...More Research

    Seeking potential solutions
    On-site interviews - understand people's problems

    Shadowing the real users on site is always fun and very valuable. I can get more feedbacks than I expected. For example, the guy in the right image. We talked about our products almost all day long and I was surprised by the way he operated our product - it was way more efficient than I thought, which gave me a lot of inspirations.

    Example questions:

  • What do menu managers do when they are building a menu from scratch?
  • What do people do if they want to change an item's modifier options?
  • What do people do if they want to track item inventory?
  • What do people do about the menu before the event?
  • What do people do when they want to edit a menu item price during an event?

    • We also try to define users' psychological feeling in the user journey.

  • When and where they feel happy or unhappy about the product.
  • The stress level they experience when building a menu.
  • The amount of time they spend when building a menu, etc, etc.

    • Research similar products

    To compare various solutions, I did a lot of research about how other products solve similar problems. SquareUp and Shopify are two products that give me a lot of inspirations. Also, some products that are not related to the industry are valuable. The design patterns they use can often enlighten us in coming up with our own solutions, such as Google Tag master and Stripe.

    Research across the current product

    I cooperated with the PM and the product lead to shuffle our old information architecture and reorganized it into a more reasonable structure. We built a new user journey based on that, and redesigned design patterns to make it smoother and more user-friendly.

    Designing the solution

    Increase pleasure and decrease stress
    Decrease learning and navigation cost

    We start to analyze how many jumps users need to make, in order to build a comprehensive menu (5-10 items and 1-2 categories).

    We separate our users into different groups: fully trained, mid-trained and new users. We try to remove the "roadblocks" from the paths that users want to go through, and make the product more forgiving and friendly for less-trained users.

    Redesign the design patterns

    To decrease the cognitive cost and give users more context to get the information they need easily, I redesigned the flows based on our new design system. The chart below is showing some basic design patterns I came up with for the menu builder, and what problems are solved by these patterns.

    Go through designs with PM and support team and gather feedbacks

    Support team and PMs always give me valuable feedbacks. Support staff are the ones who understand our users deeply. They know all the drama from real users: they have been yelled at by stressed users, and be thanked by happy users as well. As a designer, I consider them as my close design partner and also my "Beta users" for the very new designs.

    Design decisions & User testing

    During each step, we do make lots of design decisions to move forward. User testing is one of the ways that can help us to make decisions about micro-interactions and design patterns.

    We usually run internal testing with different groups of users.

  • External tests with users who have no context: design interactions.
  • Support staff who are trained and know the products: give reasonable results.
  • Beta users: gather more realistic feedbacks and data.


    • A glance of outcomes

    Here I'll summarize some main user experience improvements of the redesigned menu builder. Below you can see how it helps our users get their job done faster and easier, while also increasing task success rate and users' happiness.

    A better search

    A new and better search system that supports menu and item search.

    Visible, understandable, and logical

    Giving user more context and information of menus. Allow users to easily expand and collapse a menu. Allow users to view and edit menus and items easily. Help them to build a clear mental model of the menus, items and modifier groups.

    Edit menus/items with context

    Allow users to understand what's inside a menu, review menu and item details settings. Allow users to quickly edit without leaving context.

    Decrease navigating cost & finish tasks smoothly

    Content Switcher can help users switch between menus, items, and modifier groups index.
    Create/manage in dropdown can help the user create the required content when it does not exist.
    Multiple panels can help users manage different objects in one place.
    Shortcuts can help users assign/remove items quickly.

    The designs can help users finish multiple tasks and achieve their goals in a happy path.