big img.png

HOME

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, it seemed like the local POS report is not able to fully support our clients' requirements any more.

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

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

1

people said.png

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

Saving data at cloud is securer and can have a wider and more flexible usages. 

2

Besides showing all the operation data and facts, can you suggest us the business improvement and facilitate decision making?

people said.png

We can analyze the data collected from all different businesses and predict the trending to provide a better advices

3

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

Different type of restaurants need some customized adjustments on the report structure to handle the business efficiently

4

So we need...

A cloud based report dashboard that can be access through the mobile device 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 product. 

POS.png
cloud upload.png
database.png
edit tool.png
charts.png
access contral.png

Batch local POS data to cloud

Create & save agents on database

Pulling data from the collections

Use editing tool to generate reports

Access control for accounts

WHAT'RE 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?

Identify User Personas

First of all, we try to identify the user personas through interviews.

people said.png

Wanderer

  • Don't know what they want. 

  • Keep the old report content

  • Limited usage of report

people said.png

Boss

  • See the business overview

  • Care about trending

  • Comparing data 

people said.png

Operator

  • Monitor the business operation

  • Quick decision making

  •  Employee management

people said.png

Analyst

  • Need detailed contents

  • Work with numbers

  • Accounting / inventory manager 

Categorize Business Types

Secondly, we categorize the various restaurant types that would require different focuses on the business report. 

WechatIMG3677.png

Review Existing Report & Competitor Analysis

Lastly, We also study and analyze the POS report and the other competitors to understand the specific use of content. 

1024px-Square,_Inc._-_Square_logo.svg.png
5eb6362cc8e0bd63963c8b51_OFO-Partner-Icon-Toast-POS-ID-5074458f-a76a-4b3d-d793-412aa7cfcca
revel-systems-logo.png
clover-vertical-color-jun2014-300x300.png
logo 2.png

GENERATE THE RELEVANT CONTENTS

With all these research results, we can then generate the most relevant content for specific users with the editing tool and authorization system.

Ex:

Login user

people said.png

Operator

material-symbols_storefront-rounded.png

Fine Dining

fa_chain.png

Chain

report 2devices mockup.png
Group of charts(dark)_edited.png
Group of charts(dark)_edited.png

DATA VISUALIZATION

Here I created the chart library for data visualization usage. There are various charts such as Bar chart, stacked area chart, line chart...all of them have different usage and best represent the data visualization.    

Color code

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.  

line chart copy.png
color code linechart.png
color code linechart.png

Line Charts

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

Group bar chart.png
color for group bar chart.png

Group Bar Charts

Limit the number to 5 in a group, and the color should align with the theme color. The tone(color hue) can be closer to create the visual comfort

Light/ dark mode

L_D bar.png

There are dark mode and light mode of the app. The chart design has to consider the readability, so I have to avoid using the color that has very high/ low brightness, which gave me more constraints on designing the chart library.  

Cross platform

The report will be running on the different devices due to the purpose of usage. Therefore, setting up the breakpoints and having the design fulfill the different devices is considered when I designed the chart library.     

responsive.png

DESIGN DETAILS

Cross platform design

TABS DESIGN ITERATION

082065f5d7b560b8f9c4c66c94b1429e.png
Cloud report 1920_1080 table example (1) Copy.jpg
Cloud report 1920_1080 table example (1) Copy.jpg

I used sliding bars for the tabs on web, which is a very common and intuitive. 

When the sliding tab goes to the mobile, we found out that the user accidentally swiped to another page very often when they tried to scroll horizontally inside the table. And the test result also shows that our users are more used to the button style tabs on the mobile, which is why we have this cross platform design change. 

mobile main2.png
e6f3dbac4f332df76835418773d7b911.png
15d4903ffd54f3ad76007ffae8722fc5.png
mobile main.png

FILTER DESIGN ITERATION

Cloud report 1920_1080 table example (1) Copy.jpg
web calender open.jpg
082065f5d7b560b8f9c4c66c94b1429e.png

Each filter modules are listed out on the web version since there is enough space and it's a more accessible way.

mobile main2.png
e6f3dbac4f332df76835418773d7b911.png
15d4903ffd54f3ad76007ffae8722fc5.png
report dashboard 1.jpg
15d4903ffd54f3ad76007ffae8722fc5.png

Previous design

I tried to apply the same design on mobile, but it took too much space which should be used for contents especially when multiple filters are used. Therefore, I designed a filter component that contains all the filters as an alternative. 

Filters.png
15d4903ffd54f3ad76007ffae8722fc5.png

Current design

TABLE DESIGN ITERATION

table on web.jpg
table on web.jpg
082065f5d7b560b8f9c4c66c94b1429e.png

The table on the web has the fixed height and can be scrolling up and down easily.

e6f3dbac4f332df76835418773d7b911.png
table on mobile.png
15d4903ffd54f3ad76007ffae8722fc5.png

When using it on mobile, scrolling vertically inside the table against the whole page scrolling, so I added a rule on it: if the page contents only one table, then we keep the scrolling function inside the table, otherwise we ban the vertical scrolling and fully extend the table.

iteration mockup.png

DESIGN ITERATION & CONTENT IMPROVEMENTS

MenuSifu insight was launched a year after we started the project, and we still keep gathering the feedback and monitoring the user behaviors to bring the better version of the product. 

mobile wireframe.jpg

Interviews

Competitor analysis

Ideations

Testings

Design user flow

Design Wireframes

Iterations

High fidelity design 

Prototypes

Iterations

Developments

Launch

analytics.jpg
082065f5d7b560b8f9c4c66c94b1429e.png

HOW TO IMPROVE?

Besides interview users to gather feedbacks, we also use google analytics to keep tracking users' behaviors, and keep iterating the contents and interactions design of MenuSifu Insight.

WORK WITH DATA

In addition to all the product design works, I especially learned a lot more about how the data is processed and how it can be applied. Started from the original data field on POS, I literally went through the definitions and how they were affected by the POS activities, and figured out the formulas that would generate the final numbers that users want on the reports. I also learned how the data is batched and calculated affects the usability and efficiency of the end product. I found all these experiences helped me on decision makings and product designs.