Project
ResDiary Resdesign
Summary
ResDiary is a no commission
restaurant management system.
Role
User research, prototyping, user testing, UI design
MODERNISED OUR CORE PRODUCT
ResDiary is one of the market leaders when it comes to restaurant management software but the system itself looks dated and complicated. We wanted to improve the visual design, make better UX/UI, and create a feel of enjoyment when they are using our product.
CHAPTER ONE
WHY?
For an ordinary restaurateur, clarity and simplicity are the two key principles they seek in a booking system.
The industry for digital restaurant booking systems is really competitive. New companies have taken a large piece of the market with their modern look systems which are easy to maintain and use.
That's why we have noticed quite a few of our customers have turned into these new products even if they lack in functionality compared to ours.
​
That's what ResDiary aims for. Simplicity and clarity were the key principles to redesign and update our restaurant management system while keeping our advanced functionality.
RESDIARY VS COMPETITION
Our current system is really confusing and
complicated compared to the rest of the
competitors.
​
There is no hierarchy, the UI is busy and no
user friendly at all.
GATHERING INSIGHTS
According to our cancellation feedback forms, one of the main reasons customers switched was the complicated UI of our product.
We started by looking our cancellation forms which include a "reason for cancelling" section, and it was enough to understand that our UI was the main problem. Another really helpful asset was our product board, where customers can leave feedback, requests and product improvements.
​
To understand our users behaviour we send out surveys and jumped into Google analytics to monitor their actions, paths, which components and functionalities they are using the most and which ones are creating extra "noise".
CHAPTER TWO
STARTING FROM THE TOP
Get the navigation right, was a logical place to start.
Looking at the data and talking to customers, made it clear that a lot of people were having a hard time navigate through our system or even finding the tools they wanted. Search, book, print, messages were all very different use-cases,
and that distinction had to be clearly delineated in the app's navigation.
Old nav - section 1
Old nav - section 2
THE ISSUES
No more icons please
The navigation overall was cluttered. Icons in some cases didn't make any sense at all. Yes, they look modern and cool, but using them without a clear reason, create extra noise.
​
Main actions
Main actions of the diary were getting lost. According to analytics,
people were using just a few during service.
​
Alerts
The absence of a notification centre was clear, and was creating an
overwhelming result.
DESIGN CHALLENGES & PITFALLS
Redesign of the navigation means not to create something completely new and foreign for current users.
It was important to decide what we wanted to achieve and how we were going to do this.
-
Create a new navigational system with minimal changes to UI on current screens. This was to reduce rework, it was important to remember we weren’t re-designing the whole app.
-
Make sure the design hierarchy is correct for what we are trying to achieve. What sections are we going to expose and how will the design do this?
-
Create a clear sense of orientation, making sure each section easily and instantly distinguishable.
-
Keeping the designs native. Doing this would enable customers to feel at ease on their platform and reduce confusion around app navigation and usability.
-
Optimising for first time users. Educates the new users on what every section of our app does and how they can use it.
“Engagement, user satisfaction and even revenue can be increased by exposing menu options in a more visible way.”
​
Zoltan Kollin
FINAL NAVIGATION DESIGNS
Through a series of prototypes we arrived at a new navigation UI, that highlights the most important section of our system. The new navigation was prototyped, shared internally and tested with users. Results were pretty good since our majority of our clients liked the change and made their experience less stressful.
Before
New
CHAPTER THREE
MORE THAN THE NAVIGATION
Along with the navigation redesign, we improved more sections of our diary to match our new fresh look.
In addition to navigation, we had to provide improvements to other parts of the system that people need. Looking at the grid, we made the booking cells bigger, icons are clearer, areas can be minimised/expanded, timeline is easier to read.
Before
New
BOOKING LIST
To bring the booking list in-line with our new style, we reworked it and made some improvements there as well.
BOOKING SUMMARY
Similar with the booking summary. Improvements had to be made, and according to our user's feedback in our product board, important information were missing about the booking.
Before
New
DESIGN SYSTEM
Consistency is crucial.
To maintain consistency and ensure efficient design to dev handover, we have developed a modular design system based on reusable components and their states, such as list items, and controls. Every component can be rearranged and combined with others while maintaining design consistency and recognisable UI patterns for the user.
LEARNINGS
Faster development, easier life
The introduction of design system was a really helpful aspect. It needs a constant reference, particularly when operating within teams.
Document everything
It was a slow start, there was nothing like a site map or a breakdown of booking summary's features, flows and so on. We had to document everything and make clear all the previous behaviour and functionality our system has.
It made our lives so much easier and we can use these documents for the rest of our projects as well, which will make the whole process faster.