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

The Problems

The current scanner screen lacks sufficient coverage, limiting user immersion.

Limited Scanner Screen Immersion:

The current scanner screen lacks sufficient coverage, limiting user immersion.

Language Support Clarity:

Existing icons and graphics are outdated, not aligning with contemporary design standards.

Outdated Icons and Graphics:

Inconsistencies in user experience principles across iOS and Android platforms.

Inconsistent Platform Experience:

The current color hierarchy may lead to brand colors overshadowing essential buttons.

Color Hierarchy Imbalance:

Lack of a modular design framework, hindering the seamless integration of new features.

Non-Scalable Design:

The current app interface does not prominently showcase the new logo and branding.

Subdued Branding Presence:

User task flow

Using the user task flow Diagram was a helpful experience. It provided valuable insights into how users navigate our app. It helped me spot areas where users might encounter issues and allowed me to refine those pathways for better usability.

Research and user needs

The Product team conducted interviews with 20 customers in each operating country, collecting reviews and scores from both local and global customers to gain insights into their needs, problem-solving approaches, and prioritization methods for key improvement areas. Based on this research and subsequent analysis, three wireframed concepts for the main screens were developed. These options underwent testing with users and engagement from major stakeholders within the company to assess which concept would best serve the organization in the long term.