top of page

MENUSIFU
INSIGHT

WHAT IS MENUSIFU INSIGHT

MenuSifu Insight is a cloud report service for business owner to monitor and manage their business remotely, and analyze the data collecting from the local menusifu POS to advice the business improvements.

FREE Phone XI.png

WHY WE STARTED?

MenuSifu is a POS software company, and serves almost 10,000 restaurants at United State. Recently, with the industry growth, the old local POS report is not able to fully support our clients' requirements any more.

The local report on POS

3 MAJOR PROBLEMS

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

1
ISOLATED DATA & LOCAL ACCESSES

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

people said.png

I don't want to check each of my restaurants report one by one. I want to overview my businesses at once. 

I don't usually at the store all the time. Can I monitor my business performance anytime anywhere? 

people said.png

Summary

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

2
MISSING DATA

The backup data was at local disk which got lost or broken by accident all the time.

people said.png

The hard disks at the store was broken because of the flood. All the historical data were gone!   

Summary

Clients need a more securer place to backup the data.

3
UNIFIED STRUCTURE & CONTENTS

All the report structures and layouts are the same on the local POS report for all the merchants. 

people said.png

I don't want to see this A,C,E,F reports. Can you take it off? 

Report A, E helps me a lot, but report C and D is not what I need.

people said.png

Summary

Different types of restaurants need customized 

adjustment within the report structures to handle the business efficiently.  

So we need...

A cloud based report dashboard that can be access through the personal devices and be easily customized to serve different user personas.  

HOW IT WORKS

Based on the research results, we design this frame of the report dashboard to support the requirements. 

Original process

POS.png

{ }

Hard code by developers in few days case by case

charts.png
access contral.png

New approach

POS.png
cloud upload.png

Editing Tool

database.png
edit tool.png
charts.png
access contral.png

Batch local POS data to cloud and create the relevant agents

Even I can use editing tool to generate reports in few hours

THE CONTENTS?

Before we generate the report contents, there are few criteria need to be clarified. Who will be using the product? What are the useful contents for them? There are two most effective factors base on our observation. 

1
User Personas

I identified the 4 user personas through interviews and competitor studies, each of them has different perspectives and behaviors on report.  

personas.png

Boss

  • Business overview

  • Care about trending

  • Cross merchant comparison

personas.png

Operator

  • Monitor business operations

  • Make quick decisions

  • Staff management 

personas.png

Analyst

  • Need detailed content

  • Specific formats

  • Keeps the records

personas.png

Wanderer

  • Used to POS report

  • Don't know what they want

  • Limited accesses

2
Business Types

Secondly, I categorized the various restaurant types based on our client list and their attributes, which would require different focuses on the reports.  

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.

GENERATE REPORTS

With these research results and the new development approaches, we can generate the most relevant contents for specific user by editing tool and authorization system.

personas.png

Operator

FOOD7.png

Bar & Club

report icon.png

PRODUCT DESIGN

Besides overall design concept, the POS report which was made years ago also has rooms to improve in overall layout structures, content optimization and visual designs. 

Content & layout optimizations

UI design & data visualizations

Cross platform interaction design

CONTENT OPTIMIZATION

There are over 40 pages on our POS report, which I found many of them were duplicated or misplaced. To optimize the contents and layouts to improve the accessibilities and efficiency, I started to reorganize the report pages and created prototypes for testing. 

1
Optimize the Menu

The original POS report menu was a mess, I tried to reorganize the menu structures based on the testing and interview results. 

Old Pos report menu

POS menu3.png
POS menu2.png

Cloud report menu

Wix Report menu.png

In this example, the old POS report has more than one place to check the cash related data, which got combine and reorganize in the new menu structures. 

Wix Report activities.png

Another example is that based on our research, I found there were few tables of sensitive activities that our clients check regularly such as void order, discount given, price override...etc. However, they all were on the different pages at old report menu, so I put them together at a new category: "Activities" to increase the accessibility, and it turns out pretty efficient according to feedback from our clients. 

2
Optimize the Contents

Conducting the research results, I created few prototypes to test on the report content improvements. 

POS report.png

Old Pos report - landing page

checked.jpg

This is the "Total Report" that users use everyday for close out, and it was hidden in the top-right button at landing page. 

My Assumption: Having the most frequently used "Total Report" at the landing page can increase the accessibility and efficiency.  

Prototype A: Keep the total report inside the popup and reorganize the landing page contents, making the visual improvements.

Prototype B: Get rid of the old contents, and pull the "total report" out to the landing page.  

Testing Results

Prototype A: 6/25 (24%)

 

Prototype B: 14/25 (56%)

 

No opinion: 5/25 (20%) 

Pie Chart for AB testing result.png

Conclusion: With the testing results, I eventually choose the type B as our approach for the content improvements on landing page.   

Group of charts(dark)_edited.png
Group of charts(dark)_edited.png

DATA VISUALIZATION

I also worked on the UI/ Visual design. Creating the chart library, identifying the color code, and developing the design system.

1
Theme Colors

I choose the color that align with the POS design as our theme color so that our users won't feel off when access to the cloud report from POS. And there are dark/ light mode on POS, I have to make sure the color combination runs well on both mode.  

POS dark mode

order page - dark.png

POS light mode

order page -light.png

#122862

#727C91

#E0E7EC

#FAD896

Cloud Report

Wix Report landing page.png
2
Chart Library

The color that is used for the charts need to align with product theme color, but at the same time, it has to be recognizable and visually comfortable. Moreover, works for both theme mode. 

L_D bar.png

Some other examples

line chart copy.png
line chart light.png

Line Charts

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

color code linechart.png
color code linechart.png
Group bar chart.png
group bar chart light.png

Group Bar Charts

Limit the number to 5 in a group, and the tone(color hue) can be closer to create the visual comfort

color for group bar chart.png
color for group bar chart.png
3
Design System

To better completed the product and create the cohesive visual design, I also work on the design system developments.

Typographic

Fonts.png

Color palette

Color palette.png

Color for charts

Cloud report chart libary color palette.png

CROSS PLATFORM INTERACTION

While we are developing this web-based cloud report dashboard, I realized that many of our user tend to access the reports through mobile devices, therefore, we made the service cross platform. Here are some examples I made to adapt the mobile interaction.

1
Tab Design Iteration

Tabs on web - Sliding Bar

082065f5d7b560b8f9c4c66c94b1429e.png
Dark mode.png
Dark mode.png
old slide bar design mockup.png

Original design on mobile

new slide bar design mockup.png

Updated design on mobile

The sliding bar that was inherited from web design indicated the page swiping function on mobile, and users would accidentally swipe to another page when they were just trying to scroll inside the table on the page. As a solution, I disabled the swipe function, and updated the tab design to look more like a button than a sliding bar.

1
Filter Design Iteration

Filters on web - individually 

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

Original design on mobile

new slide bar design mockup.png

Updated design on mobile

The filters were laid out individually at the web version to keep the accessibility. However, the same design took too much space that should be for the report contents when it goes to mobile. Therefore, I design the filter component that groups all the filters to save the space. 

mock up for mobile filter new design.png
mock up for mobile filter old design.png
iteration mockup.png

ITERATION & IMPROVEMENTS

A year after, we launched the product, but it's not the end. We kept gathering the feedback and monitoring user behaviors to improve the product.

1
Feedback System

The typical two ways that we use to get the feedback from users are the survey on the side menu, and the 24/7 technical support team which is what our clients mostly use. All the requirements will be evaluated and then go into the design iteration process. 

survay.png
analytics.jpg
082065f5d7b560b8f9c4c66c94b1429e.png
2
Google Analytics

Besides interview users to gather feedback, we also use google analytics to keep tracking on users' behaviors, and use the data to help us on design decision making and testing.

CASE STUDY

Here is an example of how I used Google analysis to analyze the the problem and provide a further improvement directions. 

 

Observation: The returning users were pretty consistent after we introduce the product to all our clients, but the daily retention rate dropped dramatically on the same group of user in the period, which means many of our users were not using the product daily bases

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

1
Identify the problem

So I started to talk to our clients and found out that there are part of users especially local small business owner actually have no strong motivation to use cloud report since they are in the restaurant all the time and the old POS report works just fine. 

2
Assumption

Therefore, I made an assumption based on this observation:  

"The retention rate would increase if I exclude the small local business"

3
Result

After the roughly implementations, we can then see the changes on the google analytics. Here is the outcome:      

GA grphic.png

The retention rates increased from less than 20% to over 50%. In conclusion, although this product serves all types of our clients, there are still users who have higher engagement that we should be focusing on exploring their requirements and needs.     

MY RESPONSIBILITIES

As the UXUI designer and product owner in the team, I have taken the responsibilities of the end to end product design and management process. Here are the tasks that I have completed.  

mobile wireframe.jpg

Research (interviews, competitor analysis) 

Ideations

UX Design(Blue print, User flow, Wireframe)

Information architectures

Prototypes

Testings and iterations

Product development planning(evaluation)

Monitor development process(adjustments)

Testing, reevaluate and bug fixing

QA testing(partially participate)

Launch

High fidelity UI design 

Monitor & iteration

report 2devices mockup.png
bottom of page