Implementing the Dashboard Monitoring onto Moka POS mobile version — a UX Case Study

Overview

The research was done using Food & Beverage business field. We found there are some limitation in using POS mobile apps that needs to monitor sales and cash flow. There are many existing POS (Pawoon, Dealpos, Gobiz, Larispos, etc) where also have a huge number of user.

Existing Dashboard Moka POS

Meanwhile Dashboard Monitoring feature is only available on Tablet or Desktop while for mobile is unavailable. So we help to create Dashboard Monitoring design in Moka pos mobile device where user can access monitoring every time and everywhere easily and analyse sales in the simple way.

Project Goal

“How might we’s”

  • How might we make dashboard monitoring in Moka POS mobile version to help user can access monitoring everywhere and every time?
  • How might we make this more seamless experience and easy to read by user so user can easily analyse their sales?

Design Thinking

My role and team:

Empathise

Research Topic

How do business owners monitor Dashboard process currently in Moka POS?

  • Open and Turn on the laptop or PC.
  • Open the Browser.
  • Visit https://backoffice.mokapos.com/.
  • Register and Log in Back office Moka POS.
  • Click the Outlet filter to select the outlet they want to see.
  • Click Calendar to select the date range that that want to see.

Potential User Interview

  1. Business owner who uses Moka POS on their business, has many outlets, and mobile activity.
  2. Someone who is also a business owner and cashier at the same time.

In in-depth interview, we ask several questions such as:

  1. What obstacles did you encounter while using the POS for your business activity?
  2. What do you think about dashboard monitoring in POS currently?
  3. What do you expect for the POS that you use?

Define

Affinity Map

Affinity Map

Synthesis

Synthesis

User Persona

User Persona

Ideate

User Journey

User Journey

Design Principles

1. Clean

2. Consistent

3. Useful

4. Fast

Prototype

Sketch

Sketch

HiFi Prototype

Dashboard Monitoring

Besides displaying information, summary also become button, if user tap sales so dashboard monitoring will display sales detail, and if user tap product so dashboard will display product detail and so are the others.

Dashboard Monitoring

According Law of Proximity “Objects that are near, or proximate to each other, tend to be grouped together.”

We divided dashboard monitoring into big three section or cards so user can scan and read easily.

Summary

Summary

Trend/Structure

In this card we also display percentage ratio with last period, wether plus or minus.

Trend/Structure

Last Record Overview

Last Record Overview

Dashboard — Sales and Profit

Beside that, bar chart also easy to tap compared line chart to see sales and profit detail. Below the bar chart, we disclose the last sale or profit review.

Dashboard - Sales and Profit

Dashboard — Transaction

For transaction, we display number of transaction and method payment that used by consumer. This is important for user or owner because with that information they can make discount campaign with the method payment such as Ovo, Gopay, Dana and other.

As same as the sales and profit dashboard, we also display the last method payment that consumer used.

Dashboard — Transaction

Dashboard — Product

Dashboard — Product

Usability Testing

User Feedback

  • Based on the research and test concluded, the flow and usability are quite clear for use. The application can be used as an alternative to doing monitor and analyse sales, profit, transaction and product their outlet.

Content

  • The dashboard monitoring page can be shared to public deliver such as investor, company partner and stakeholder. So it can help owner to present their financial summary if they want to find new investor.
  • Participant requested download feature in last record overview.

Iteration

Following the final prototype design after iteration

Final Prototype

Click here for full prototyping.

Conclusion

Throughout the process, we realised that what we do is far from being perfect.

Thus, we know what to do in the future:

  • Research about other feature such as report, inventory, employee, and other
  • More research about finance and accounting.
  • And more usability testing.

Tools

Figma: to create the design system and prototypes.

Miro: used to collaborate and gathering all of the ideas.

Slack: used to communicate along with the member

Notion: organizing project work in collaboration and described the job description of each member in the team and also for task scheduling based on Design Thinking and scrum process.

Draw.io: used to make an user flow, Information Architecture Diagram, and Customer Journey Map

I hope you learned something as well. If you enjoyed reading this article, please leave and any feedback on the comment section. Thank you.

UI/UX Designer