Diva Self Checkout
Role
UI/UX Designer
Tools
Figma
Whimsical
Year
2023
Problem
Diva is a brand under Logo Yazılım A.Ş. that offers innovative solutions in the retail sector. The Diva Self-Checkout product provides special checkout stations in markets and technology stores, allowing customers to complete their payment transactions independently. This system aims to reduce congestion at traditional checkouts, enhancing the customer experience and minimizing the time spent in checkout lines.
During the project, usability issues in the interface were identified, and UX and UI improvements were implemented.
Solution
With a user-centered approach, the identified issues were addressed, and a decision was made to optimize the entire checkout process.
Process
In the project, we planned a five-step process. Although we were unable to conduct user interviews due to time constraints, we made efforts to gain valuable insights through internal team discussions.
Step 1
Stakeholder Interview
Step 2
Heuristic Evaluation
Step 3
Task Flow & User Flow
Step 4
Wireflow
Step 5
Hi-fi Mockups & Handoff
Step 1
Stakeholder Interview
In the initial phase of the project, we conducted comprehensive discussions with internal stakeholders to gain a deeper understanding of the product and the associated issues.
During this process, we thoroughly addressed existing problems, gathered insights on the product's strategic goals and directions, and performed a competitive analysis. This in-depth analysis provided a crucial foundation for identifying project requirements and potential areas for improvement.
Step 2
Heuristic Evaluation
Simultaneously with the internal stakeholder discussions, we conducted a heuristic evaluation of the existing interface. During this evaluation, the most frequently encountered issue was related to error prevention. We compiled the findings and recommendations into a comprehensive report to be used as a reference in the subsequent phases of the project.
Step 3
Task Flow & User Flow
Based on our research, we redesigned the existing user flow while largely preserving its structure. During this process, we resolved identified critical issues and addressed potential dead ends and problem areas with appropriate solutions.
Task Flow
User Flow
Step 4
Wireflow
We developed wireframes based on the flowchart we created. Leveraging insights from earlier phases of the project, we outlined the screen designs and defined the content structure.
Wireflow
Step 5
Mockups
After completing the wireframes, we created mockups using components from the Logo Design System and handed them off to the development team.
Images and product information are subject to change