UI/UX Case Study: LUDES Point of Sales
Designing POS applications that are seamless and easy to use
Project Summary
This project focuses on how to design a beautiful and comfortable POS UI to use, which can add a list of items, calculate purchases quickly, this application focuses on small shops in Lombok NTB.
My Role
My task is to design and implement a system that has been designed in the form of UI, designing User Flow that is convenient to use, I collaborate with the mobile dev team to build this application. several processes doing an Ideation, Research, Design, Deliver
Main Role
- Ideation Project with a team (Understand)
- Research
- Wireframe
- Design
- User Flow
- Usability Testing
1. Ideation Project with Team (Understand)
In this project I try to dig deeper into my understanding of its products such as the scope of the project which is limited only to the POS app which later this POS can optimize the process of input and service of offline stores or similar businesses, with a working time of just one month for later then continued handover to the team the developer.
2. Research
Research in the form of design patterns, competitor research, user research, user persona
Design Pattern
Design pattern aims to see the reference design patterns such as screen order more or less like user flow but made more simple to give an idea of how later the application will run, this design pattern more or less see other application patterns as references, in this case I use the website mobbin.design which provide hundreds of patterns from various applications.
Competitor Research
This Competitor Research is conducted to see the advantages and disadvantages of competitor applications further analyze how competitors are. Not to imitate the design, this competitor application we research from PlayStore see which applications are most commonly used by users in Indonesia.
Among the many choices most used in Indonesia are Moka and Pawoon. Both of these applications we research more to see what insights can be obtained.
Concept
Because my role is more dominant to UI Design with minimal experience to implement some research for UX and the products being developed are products that start from zero, so we decided to directly design the design, capitalizing on prior research insight.
Color
Determine the Primary color.
The reason for choosing colors with pastel purple as primary colors are because behind purple brings a calmer feel to the user because there are too many who use colors like for example blue like the data below
Indonesia is one of the countries that uses blue in its products because this color is the most comfortable in the eyes of the users so it is suitable for use, but to make our products more different we choose a purple color that is more close to pastels so that later on each device screen is not too contrasting because different color production devices each screen is different. We also consider this color selection as a safe color that is comfortable to see.
With various color derivatives intended for illustration needs and other components such as icons and CTA (Call to Action).
Typography
Font selection is influenced by several aspects such as the complete Font-weight to complement the UI design needs, ensuring that the font is readable or comfortable to read. This time we decided to use Open Sans as a font family because this POS (Point of Sales) application with a cashier platform must be fast in making transactions so the selection of fonts with a high level of readability is one of the considerations.
Font weight in Open Sans is complete, so it can complement the needs when designing UI like Headers or Content.
3. Wireframe
To provide an overview of the UI that will be built wireframing becomes an important foundation in the initial process when starting to design,
Actually the process of wireframe can be done in the beginning when starting to design or ideation, but I put it in the middle of the process because before I have to do research to get insight into how a good POS application, after insight is obtained, the next step is to create a wireframe from insight that has been collected.
A wireframe that I grouped by feature, this makes it easier during the interview process to stakeholders and other teams.
Why do interviews with wireframes? because this makes time not wasted during the design process, asking for possibilities that occur in the system, application flow, and possibility to be developed in the form of wireframe to the developer team and stakeholders facilitate the revision process because it is still in the form of a rough picture, compared to interviews with design digital ready-made, will waste a lot of time. In this project, every interview I get a lot of insight into each session so that when it’s finished, the next process will be an easier and minimal revision.
4.Design / High Fidelity Mockup
Figma is the software that I use when designing high fidelity for the LUDES app, this process starts to develop the results of wireframes and insights from previous research results in the form of real design because before I spent quite a long time in the wireframe process, so when the design process with Figma I just need to continue until the handoff process to the developer.
5. User Flow
The advantages of using Figma, like one-stop-shopping, starting from HI-FI design, user flows, then hand-off design can all be done with Figma without any additional applications such as Zeplin, because of the collaborative features I can share the link design to the front-end or mobile dev directly and mobile dev can directly see the user flows that I have created.
The purpose of making the user flows is to assemble the design into a unified system as a whole, the developer needs to know the flow of each screen that has been made, share feedback about the possibilities that can occur in the user flow.
6. Usability Testing
To ensure and measure the level of confusion on the product being developed, Usability Testing is very important to do, considering this is a step to reduce the time to work on the product, because before further developing the design team has gathered some insights from potential users, and then other teams just need to develop it into a more tangible form.
Usability Testing this time we are looking for cashier respondents who are experienced enough, in one coffee shop in the city of Mataram. There are several scenarios that we are trying to do:
- The user tries to make a transaction with the customer
- The user tries to add an item
Why do we only try 2 scenarios? because basically this product is a product (Point of Sales), the most important thing is to see how quickly the cashier serves customers in front of them.
At the end of the Usability Testing test, we got a lot of insights as well as some recommendations from the cashier’s perspective, then we collected these insights and made them as analytical material to revise the next UI form,
In the design process this time I learned a lot of things,
UI design not only pays attention to aesthetic appearance but the usefulness of some of the components that we have assembled as product views.
Thank you for reading my case study, I am very hopeful and happy if you have input and suggestions, let’s discuss through:
Email: aanjuniorr@gmail.com
Social media Instagram/Twitter @laluaann s
Behance https://www.behance.net/laluaann
Dribbble https://dribbble.com/laluaann
