Lotte Department Store
POS UX/UI
Team
2 Designers (including me)
Project Duration
01 Jan - 31 Jan 2021
(1 month)
My Role
Build POS UI design systemsImproved POS usability and screen production

Overview

On this project, we were tasked with developing a new theme for Lotte Department Store's point-of-sale(POS) design and focusing on improving the user interface (UI). Throughout a one-month period, we worked based on wireframe documents provided by the planning team to create and deliver the redesigned POS interface. Taking usability and intuitiveness into consideration, we enhanced the existing POS UI through UX improvements.

As a final result, we delivered a new UI design system and approximately 200 pages of redesigned POS screens. All screen designs were created using Figma, and I created of main illustrations within the UI design using Adobe Illustrator. The final deliverables for development were provided through Zeplin.

Background

In the era of big data and cloud computing, there is a need to build platforms that leverage these technologies. This necessitates the digital transformation of traditional POS systems, and with the discontinuation of support for the existing POS software on MS OS, there is a demand for new OS-based POS UX/UI design.

Style Guide

We have created a style guide incorporating the brand colors of Lotte Information Communication and Lotte Department Store. For the POS system's default font, we have chosen a sans-serif typeface that offers excellent readability and is suitable for multilingual use: Noto Sans KR. As for the representative illustration for the POS system, I took charge of its creation. I designed an illustration that is simple yet sophisticated, featuring flat surfaces and lines with added patterns.

Design System

Since the primary users of Lotte Department Store's POS system primarily utilize tablets or computer monitor screens for their services, we recognized the need for a design system that could respond to N-Screen. To achieve this, we divided the entire screen into six columns, allowing buttons and designs to be placed flexibly based on the available whitespace, enabling the screen to adapt accordingly. All screen designs were created to align with this basic grid system and spacing, ensuring consistency among all screen components such as buttons and pop-ups.

Outcomes

The final deliverable consisted of approximately 200 UI designs based on the wireframes and functional specifications provided by the planning teams. The design originals were delivered through Figma, which contained the design files, and Zeplin, which facilitated development.

Two versions, Sales Mode and Return Mode, were created.

The images below showcase 10 approved screens out of the 200 UI designs, as approved by the company.