MenuSifu Insight
MenuSifu Insight
MenuSifu Insight
MenuSifu Insight
A customizable cloud report service that helps restaurant owners to monitor and manage their businesses remotely
UX Designer
Product Manager
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.
Boss
-
Business overview
-
Care about trends
-
Cross merchant comparison
Operator
-
Monitor business operations
-
Make quick decisions
-
Staff management
Analyst
-
Needs detailed content
-
Specific formats
-
Keeps the records
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.
HOT POT
Inventory data and cost controls.
CASUAL DINNING
Table turn over rate, labor expenses.
FAST FOOD
Efficiency, speed, 3rd party channels.
FINE DINING
Dining experiences, service performances, tip systems.
BAR & CLUB
Area sales, item sales, inventory for the drinks.
CAFE / BAKERY
Engaging digital experiences, CRM.
This is how we decided on the content to generate the report.
Operator
Bar & Club
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.
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.
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.
Old Pos report - landing page
Total report
What should I do?
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)
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.
POS dark mode
POS light mode
#122862
#727C91
#E0E7EC
#FAD896
Color Palette
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
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.
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
03.
Design System
I applied a 12 column grid and a 8pt linear spacial system for my design system standard.
Typographic
Buttons
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.
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.
Original design on mobile
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.
Tabs on web - Sliding Bar
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.
Updated design on mobile
06 LAUNCH THE PRODUCT
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 technical service
SurveyMonkey
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
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.
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
As UX/UI Designer
As Product manager
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
Returning users: users who have visited your website or app before
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
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.
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.