top of page

Supersmart Shopper App

CASE STUDY

Supersmart is a B2B/B2B2C company that develops solutions for smart shopping in retail stores, primarily in supermarkets and convenience stores. Among its products is a 'Scan and Go' application that enables a cashierless shopping experience. You scan the products, pass through a terminal that cross-references the cart/basket weight with an image recognition system, pay, and exit.

​

The application is beneficial for clients who cannot develop a native app or for those with an app lacking the capabilities of the Supersmart application

About the Project

The old app, developed by a freelancer in late 2015, lacked ongoing updates and design oversight. With the VP of Product, we decided to rebuild from scratch, aiming for a faster, user-friendly experience aligned with our new branding. Our main goals were to reduce wait times, boost sales with tailored discounts, support multiple languages, offer various features, and notably deter product theft, streamlining operations away from traditional cash registers. I was involved from concept to the finished product.

✍🏼 My Role

Concept, sketching, visual design, wireframing, icons, design system, prototyping, dev handoff, design reviews, and support through development.

UX Design Lead (Hands-on):
👫 Team

1 UX Design Lead

1 UX/UI Designer
2 Product Managers
1 Technical UX Writer

2 Full-stack Developers

🧰 Tools

Figma

Adobe Illustrator

Miro

Slack

Jira

Whiteboard

Pen & Paper

Old Design

Research Approach

To understand how users interact with the Scan & Go app in real-world conditions, we used a combination of on-site observations, user interviews, and close collaboration with the product team. This allowed us to uncover usability issues, feature gaps, and platform inconsistencies - both from the perspective of end users and the business.

User Pain Points

  • Difficulty scanning items quickly and accurately

  • No support for managing multiple carts/baskets per session (a common user and business request)

  • Long wait times for staff assistance during errors

  • Desire for alternative product suggestions (cheaper/similar)

  • Need for in-store navigation assistance

  • Strong motivation to minimize time spent in-store

research 01.png

Product Team Pain Points

  • Limited scanner screen area reduced confidence & focus

  • Outdated visuals and iconography misaligned with brand refresh

  • Inconsistent UX across Android and iOS platforms

  • Poor color hierarchy lowered button visibility

  • Non-modular design blocked scalable feature expansion

  • Weak branding presence in-app

User task flow

Before diving into wireframes, we focused on building a clear and complete user flow. This helped align the entire team around each step of the shopping journey from scanning to checkout, while making sure we didn’t miss any edge cases or critical interactions. By mapping the flow early, we were able to anticipate where users might get stuck, simplify repetitive actions to ease cognitive load, and design an experience that’s fast, clear, and efficient. This foundation gave us the clarity and confidence we needed to move into the wireframing phase with everyone on the same page.

Detail 7.png

Wireframing Concepts

Based on the research and task flow analysis, we developed three wireframe concepts representing different UX approaches.We created interactive prototypes and shared them with key internal stakeholders and product champions for hands-on feedback. Insights from these sessions led us to a refined fourth concept that combined the strongest elements of all three into a cohesive direction.

Concept 1
Concept 2
Concept 3

Decisions Based on Research

Streamlining the user journey for a quick and efficient checkout and validation process.

Optimizing User Journey:

Empowering users to independently troubleshoot errors without assistance.

Error Resolution Empowerment:

Undertaking a comprehensive redesign of the entire User Interface for improved usability.

Complete UI Overhaul:

Supporting over 15 languages seamlessly in a cross-platform environment.

Multilingual Cross-Platform Support:

Design System

Since we were rebuilding the app from scratch, and no design system existed in the company, we used this opportunity to kickstart one. We began by creating components specifically for the Scan & Go app and gradually expanded the system to support our entire product suite (including the web dashboard, the touchscreen checkout, and other internal tools).

New components were added and refined sprint by sprint, in parallel with live development. This allowed us to build a scalable, shared language between design and development while ensuring everything stayed consistent across platforms.


Of course, the process came with its own set of challenges we had to carefully navigate

Challenges

Challenge: Ensuring seamless collaboration between designers and developers.

Cross-Functional Collaboration:

Challenge: Complexity in integrating the design system into existing code.

Integration Complexity:

Solution: Emphasize the importance of clear documentation and training.

Expectation Management:

Solution: Involve all stakeholders early for effective communication and collaboration.

Stakeholder Involvement:

New Design

increase revenue by 20%
Reduced shopper waiting time by 42%
17% More Returning Users
Transaction per hour went from 64 to 100

Achievements

🚀 Key Improvements

Enhances scanning experience with a full-size screen for increased visibility.

Full-Size Scanner Screen:

Users can now resolve common issues—like unscanned items, invalid barcodes, item removals, or personal belongings in the cart—directly through the app, without needing assistance from store staff. This improves flow, reduces wait time, and strengthens the autonomous experience

Troubleshooting Assistance

The entire interface was reworked with a focus on simplicity, speed, and accessibility—making it easier to navigate and more pleasant to use

User-Friendly UI:

Separate projects for Android and iOS, ensuring platform alignment.

Platform-Specific Projects:

Established new branding on the website/dashboard for a cohesive visual identity.

New Branding Integration:

Support for 15+ languages, with a responsive design that adapts across different scripts and layouts. Fully localized and consistent across the product suite

Flexible Multilingual Support:

Increased flexibility to seamlessly integrate new features.

Enhanced Flexibility for Features:

Thank you for taking the time to review my work. If you're interested in further discussion or have any inquiries, please feel free to get in touch.

Let’s connect!

© 2024 Yoni Levy

  • LinkedIn
  • Dribbble
bottom of page