Lucia Bustamante

Nobly Back office Re-design

Product Designer

— PROJECT NAME

Nobly Back office


— ROLE

Product designer


— DATE

2017


— CLIENT

NoblyPOS


Context


Nobly’s cloud-based backoffice suite produces reports as beautiful as they are powerful. The Backoffice generates 32 different reports. See what’s selling and what you’ve got in stock in real-time, or dive deep into your sales with end-of-day analytics. 



The problem


The old Backoffice was not usable, it was scarce in reports, and complex high-frequency tasks were not intuitive enough. This was being a problem for the company since the Backoffice is the tool that customers have to manage and monitor their business. The improvement of the tool was crucial to increase the level of satisfaction and credibility with the product.



Goal


Increase engagement by building new reports and redesign the existing reports improving the user experience and adding more data visualization. Improve the overall experience by designing more easy to use flows.



What was done


Reports and flows were carefully redesigned with a focus on complex reports and inventory screens. New charts and visuals were included to introduce the user to the data little by little using progressive disclossure.

The user interface changed to a more clean look and feel in wich the main focus is the data. In this new stage, a Design System was created to facilitate the handoff with developers and maintain consistency.


Metrics


Business impact

Decrease churn


Traction Metric

Month-over-Month Growth


Outcome metrics

Quick understanding on how to use new reports

Perform complex tasks fast and easily




Conversion


⭐️ All clients migrated to the new BO

⭐️ More user retention and engagement

⭐️ Increased product reliability​​​

⭐️ New customers onboarded


How might we design a backoffice that increases customer retention and is delightful to use?

Interviews


Interviews with restaurant owners were conducted to understand their pain points and business needs, through finding out how they used the back office on a daily basis.


👎😫 We found that the stock functionality was not useful enough and was not easy to use, so they ended up using another method for stock control, like other products or even spreadsheets. 


👎😫 They needed reports that did not exist in the system and expressed the desire to be able to scan the information more quickly.  






This was the old Backoffice design


NEW BACK OFFICE DESIGN

Stock and Reports

Backoffice Sign in page

New Stock Capability 👇 Before and After


Stock functionality was segregated into different capabilities such as units and measures, and ingredients, which are all interconnected at the same time. It was a collaborative creative process in conjunction with developers and customer support who obtained first-hand data that allowed us to take advantage of opportunities.


Add Products as Standard or Unit Pricing. More flexibility and power when adding pricing, and variations to items. Modifiers as a new addition.

Variations widget, with an easy management of attributes and values.

The Stock functionality, allows now the creation of Standard and Complex products (combos, several variations and mofidiers, dependencies).

Capability for linking to other product stock.

Dashboard and Reports Redesign 👇

Dashboard:  3 new widgets were added, and improved layout. The new style incorporated cards more rounded with subtle shadows.

Sales summary report: A new widget was added at the top of this report, displaying the main stats at glance. Relevant sales stats were added under the chart, to delve more into the data, in the table.

Hourly sales heatmap: This report was just a table with plenty of numbers and was very hard to scan.

A heatmap was incorporated to help the user quickly scan by color.

Profits and costs report: This is a brand new report that users were asking for, it shows the profits and costs trends.

Brand new report, Staff sales multilocation. It shows sales stats for all company locations.

Backoffice Design System 👇

The components were built from scratch, which made development more agile and was a plus for consistency.


Nobly Go, the mobile version of the Backoffice 👇

https://www.noblypos.com/nobly-go


Mobile Functionality:

Add new products from the cellphone

View reports and filter

Stock management

BUSINESS IMPACT

100% of clients migrated from the old to the new BO 🎉

Increased user retention and engagement

Increased product reliability​​​

New customers onboarded in the NoblyPOS suite


Designed with  for Nobly POS. 

Copyright © 2019/2020 Global Retail Technology Limited. All rights reserved.