top of page

MenuSifu Insight

MenuSifu Insight

MenuSifu Insight

new-logo.gif

MenuSifu Insight

A customizable cloud report service that helps restaurant owners to monitor and manage their businesses remotely

UI Designer
UX Designer
Product Manager
PRODUCT MOCKUP_edited.jpg
Team

Product manager/ Product designer (me), 2 Developers 

Platform

Web, Mobile, Pads, POS system

Duration

12 months +

01 CONTEXT

Why did we start this project?

MenuSifu is a POS (point of sale) software start-up that serves almost 10,000 restaurants in the United States. We began developing it in 2020. We found that because of the industry growth, the old local POS report was not able to fully support our clients' requirements anymore, so our company decided to develop a new report product to handle the situation.

The local report on POS

02 RESEARCH

What are the pain points for our users?

There are 3 major problems I summarized through user interviews and observations. Based on these problems, I also identified the corresponding requirements.    

01.

Isolated data & Local access

Each POS report only runs individually at each local POS for each merchant.

" I have multiple restaurants, and I don't want to check each of my restaurants' reports one by one. I want to overview my businesses' statistics at once. "

" I am not usually at my restaurant all the time. Can I monitor my business performance anytime anywhere? "

02.

Data loss

The backup data was on a local disk which got lost or broken by accident sometimes.

" The hard disks at my store were broken because of the flood. All the historical data disappeared! "   

03.

Unified structure & Contents

All the report structures and layouts were the same for all the users on the local POS report. 

" I don't want to see the 'staff performance report', and the 'tip out report'. They are not important for my business. Can you remove them?"

" The 'sales comparison report', and the 'staff performance report' help me a lot, but I don't regularly check the 'attendance record report'. Can you rearrange them? "

Highlights and corresponding requirements summary

Summary 01

Clients need a more secure place to backup data.

Summary 02

The chain restaurants need a centralized report to oversee all the stores and monitor business operations remotely.   

Summary 03

Different types of restaurants need customized adjustments within the report structures to handle business efficiently.  

03 PROJECT GOAL

A cloud based report dashboard that can be accessed through personal devices and is 
customizable to serve different user personas.  

04 APPROACHES & SOLUTIONS

How do we decide on the customized content?

There are a few criteria that need to be clarified. Who will be using the product? What is  the most useful content for them? Those are the two most effective factors based on our observations. 

01.

4 User personas

Although the product is generally serving all our clients, the roles under each business would have different priorities for the report contents. Therefore, I identified the 4 user personas through interviews and competitor studies, and summarized their attributes.

personas.png

Boss

  • Business overview

  • Care about trends

  • Cross merchant comparison

personas.png

Operator

  • Monitor business operations

  • Make quick decisions

  • Staff management 

personas.png

Analyst

  • Needs detailed content

  • Specific formats

  • Keeps the records

personas.png

Wanderer

  • Used to POS report

  • Doesn't know what they want

  • Basic access

02.

6 Business types

Another key factor that decides the content is business type. I categorized the various restaurant types based on their attributes, and highlighted the most relevant report contents for each type of restaurant. 

food5.png

HOT POT

Inventory data and cost controls.

Group 32.png

CASUAL DINNING

Table turn over rate, labor expenses.

FOOD8.png

FAST FOOD

Efficiency, speed, 3rd party channels.

food4.png

FINE DINING

Dining experiences, service performances, tip systems.

FOOD7.png

BAR & CLUB

Area sales, item sales, inventory for the drinks.

FOOD9.png

CAFE / BAKERY

Engaging digital experiences, CRM.

This is how we decided on the content to generate the report.

personas.png

Operator

FOOD7.png

Bar & Club

report icon.png
04 APPROACHES & SOLUTIONS

How do we generate the content efficiently?

To accomplish our goal, I then worked with developers to figure out more efficient and accessible technical solutions. The biggest upgrade is that we created the "Edit tool" that allows non-developers to edit the report in a quicker and easier way.

05 DESIGNS & ITERATIONS

How to make a better overall user experience?

The POS report was made years ago, so in addition to overall fundamental structure improvements, there is also room to improve overall layout, content optimization and visual designs. Moreover, we also designed the mobile app for cross platform usage. 

Content & Layout Optimization

UI Design & Data visualization

Mobile interaction improvements

05 DESIGNS & ITERATIONS - 1

Improve the user experience by optimizing content and layouts   

01.

Optimize the menu

There are over 40 pages on the POS report. I found many of them were duplicated or misplaced. I began by reorganizing the menu based on the observation and interview results to improve accessibility.

Before

Old report on POS: User has to go through different flows to get to "cash payment", "cash in/out", and "cash register activities" reports yet these reports are highly related in content, so they are usually used at the same time. 

POS menu3.png
POS menu2.png
After

New design: Adjust the menu structure and put all these cash related reports under the same page so users can get the desired information all at once. 

Wix Report Cash flow.png

02.

Optimize the layout on the landing page

There is rich information on the POS report landing page with all the visualized charts that cover the business overview. I wondered if this was the best layout and content when I was redesigning the landing page. 

Findings

The most frequently used report is called the "total report", which is hidden in the landing page. Users need to click the top-right icon to get the popup and they use this report everyday.   

POS report.png
image.png

Old Pos report - landing page

Total report

What should I do?
Chef.png
A) focus on the visual updates and not break the existing users' mental models?
B) move this most frequently used report to the landing page to improve accessibility
Run AB testing!

Prototype A: Keep the positioning, just make some visual improvements on landing page 

Prototype B: Get rid of the original layout and put the "total report" on the landing page

Which one did users like the best?

Prototype A: 6/25 (24%)

 

Prototype B: 14/25 (56%)

 

No opinion: 5/25 (20%) 

Based on the research. I decided to move forward with B)

Pie Chart for AB testing result.png
05 DESIGNS & ITERATIONS - 2

Visual / UI improvement and data visualization

01.

Choose the color

The theme colors are from the POS design, and I created the report service to fit into both light/dark mode when running on local POS system.

order page - dark.png

POS dark mode

order page -light.png

POS light mode

#122862

#727C91

#E0E7EC

#FAD896

Wix Report landing page.png
Color Palette
Color palette.png

I made the color palette for the product based on the POS's new design look and our company's branding references.

Colors for Charts
Cloud report chart libary color palette.png

Another color library is specifically for the charts on the report, which requires many more different colors.

02.

Charts for the reports

The charts are designed to fit with the theme colors and should be recognizable and visually comfortable at the same time. Additionally, it needs to work for both modes (dark/light).

Line Charts

Color with low saturation is not recommend since the line is thin, and the color tones have to be recognizable.   

color code linechart.png
color code linechart.png
line chart light.png
line chart copy.png
Group Bar Charts

Limit the number to 5 in a group, and the tone (color hue) for the bars should have a flow to create visual comfort

color for group bar chart.png
color for group bar chart.png
group bar chart light.png
Group bar chart.png
Group of charts(dark)_edited.png

03.

Design System

I applied a 12 column grid and a 8pt linear spacial system for my design system standard.

Typographic

Fonts.png

Buttons

button for wix.png
05 DESIGNS & ITERATIONS - 3

Mobile Interaction Improvements

To improve accessibility, we also developed the cross platform mobile app. Here are some iterations and design decisions I made when I brought this web-based service to the mobile app.  

01.

Redesign the tabs on mobile

Different tab designs create different expectations on mobile  

Observation

The sliding bar that was inherited from the web design indicated the page swiping function on mobile, and users would accidentally swipe to another page when they were just trying to navigate a horizontal table inside the page.

Dark mode.png
082065f5d7b560b8f9c4c66c94b1429e.png
Dark mode.png

Tabs on web - Sliding Bar

Design updates

Based on the testing results, I disabled the swipe function, and updated the tab design to look more like a button than a sliding bar. And users would now tap on the tabs to switch the page instead of swiping.  

old slide bar design mockup.png
image_edited.png

Original design on mobile

new slide bar design mockup.png
image_edited.png

Updated design on mobile

02.

Filter design iteration

When running on the mobile app

Observation

The customized filters were placed individually in the web version to maintain accessibility. However, the same design took up too much space that should have been for the report contents on the mobile version.

Dark mode.png
082065f5d7b560b8f9c4c66c94b1429e.png
Dark mode.png

Tabs on web - Sliding Bar

mock up for mobile filter old design.png

Original design on mobile

Design updates

Based on the testing results, I designed the filter component that groups all the filters to save space on the mobile app. Although the new design added more steps to set up the filter, it increased the readability and was visually cleaner.   

new slide bar design mockup.png
mock up for mobile filter new design.png

Updated design on mobile

mock up for mobile filter new design.png
06 LAUNCH THE PRODUCT
iteration mockup.png

In 2021, we launched the product - MenuSifu insight. We now have about 3,000 clients using the product, and the numbers are still increasing.   

MenuSifu Insight is online now

06 LAUNCH THE PRODUCT

What's next?

01.

Feedback system

To further improve the product, we built these channels to approach our users. Now, we can gather and analyze feedback and put it into the iteration cycles.   

24_7-removebg-preview_edited_edited.png

24/7 technical service

survey monkey.png

SurveyMonkey

GA4-x-Bookassist-blog.png

Google Analytics

02.

Stable growth of users

We can see the increase in clients using the service, and there is a jump after we stopped maintaining our old report product in 2022

image.png
07 RESPONSIBILITIES

My responsibilities as a product owner

As the only UX/UI designer and product owner on the team, I have taken the responsibilities of the end to end product design and management process. Here are the contributions I made to the project.

mobile wireframe.jpg

Research (interviews, competitor analysis) 

Ideations

UX Design (Blue print, User flow, Wireframe)

Information architecture

Prototypes

Testings and iterations

Product development planning (evaluation)

Monitoring development process (adjustments)

Self testing, reevaluating and bug tracking

QA testing (partially participate)

The Launch

High fidelity UI design 

Post-launch monitoring & iteration

cycle arrow.png
As UX/UI Designer
As Product manager
cycle arrow3.png
cycle arrow2.png
08 IN THE FUTURE

What else I can do better?

There were a lot of findings after we got users onboarded to the product. Upon observing the data, I thought about how to improve my process for future projects. Here are two great examples.

01.

More research on identifying our TA

The returning users were stable but the retention rate was low

GA active users.png

Returning users: users who have visited your website or app before

GA retention rate.png

User retention: shows the percentage of users who return each day in their first 42 days

Observation

The daily retention rate dropped dramatically for the same group of user in the certain period while the returning users were pretty consistent. This meant many of our users were not using the product on daily basis

Research

I talked to our clients and found out that part of our users, especially local small business owners, actually had no strong motivation to use the cloud report since they were in the restaurant all the time and the old POS report worked just fine. This made me think, who are the people that use our product frequently? 

Assumption

Therefore, I made a hypothesis based on this observation:  

"If I exclude the small local business owners, then the retention rate will increase"

Take away
GA grphic.png

After filtering out the single local business users, the retention rate increased from 15% to over 50%. This finding helped us identify users who had higher engagement, so that we could prioritize exploring their needs in the future.

02.

Mobile first UXUI design

I designed this web-based cross platform service for desktop users because I assumed that most of users would use the web to analyze and monitor their business developments. 

image.png

Observation

The majority of users are using the mobile version, which was different than our expectation. Therefore, my next mission will be improving our mobile app's structure and interactions to provide a better user experience of MenuSifu Insight. 

bottom of page