Restaurant POS app

Reposeat

Reposeat

Reposeat is a POS software for efficient restaurant management experience. It is designed for restaurants, cafes, bars & small outlets. Some of its features are billing, KOTs, recipe management, stock management, role management, debt management & offers/promotions.

Company

Cluebix Software

Project date

June 2019

Problem & challenge

POS software often tend to have many options on the screen and sometimes the users felt overwhelmed and frustrated. In the previous version of the software, we had the same issues. Although this software was to be designed from scratch, we took it as an opportunity to learn what went wrong and solve certain issues.

My Role

I was an in-house designer for Cluebix. My roles include research, wireframing, UI design; convert from design to HTML, CSS & Js using Angular 7; check design heuristics while designing as well as in the development phase; maintain a design system

We took agile approach and proceeded with the iterative process of research, prototyping, evaluation & development for each module. The project went for testing once it was released as an MVP.

Research & Planning

I started with gathering information from the existing app and evaluated the pain-points of the existing software users. We asked our current users about their experience, what are their pain points and what they think would be helpful to add/update in the software. I researched about a typical POS software, did some competitive analysis and created a mood board for necessary features to cover in the software.

Sketches & Wireframes

Our users (cash/bill manager) spend most of the time on the billing screen. I started with sketches and lo-fi layouts.

Reposeat sketches

The screen was divided into 4 main sections: navbar, table section, items section, main-billing section. There was a discussion about the navbar on-top vs left, but we eventually went with the left-side navbar.


Here are some initial lo-fi wireframes.

Reposeat lofi

UI elements & components

To maintain consistency and ensure efficient design to dev handover, I developed a modular design language based on reusable components and their states, such as cards, list items, and controls. I have covered a few here:

Reposeat components

Hi-fi wireframes

After trying some fonts, colors & icons, it was time to convert into hi-fi wireframes. I started with the 'Items page' where we can add/edit item-category & items, then continued with the 'Tables page' & 'Billing page'.

Reposeat Hifi UI design

Conclusion

The project's biggest challenge was designing the billing page and position the 4 components (navbar, table section, item section and billing in the screen) effectively without missing essential elements. I was able to overcome this by doing plenty of research & discussions during design sessions. We tested the software with the current users as a replacement for the older version. The feedback we received was very good.

Reposeat billing page

This was my first big project and I learned that taking small steps and breaking bigger problems into smaller bits is a good way to go. Being the only designer in the team, it was really challenging to make the right decisions. I learned a lot from this project.

CaseStudies

Let's worktogether

Portfolio 2021

Designed and developed by me

info

Built with ❤ using

Adobe XD
Adobe XD
Design tool
Gatsbyjs
Gatsbyjs (React)
Frontend
GSAP
GSAP
Animation
Locomotive
Locomotive
Smooth scroll
Sanity.io
Sanity.io
CMS
Netlify
Netlify
Hosting