Harmless Store dashboard with meal and eco-action gauges

Project 03 / 04

App Design · Sustainable Living

Harmless
Store

An interactive prototype for an ethical food retail app — combining daily meal tracking with eco-conscious shopping in a calm, purposeful interface.
Interactive Design
Mobile Retail App
Adobe XD
2024
Harmless Store dashboard featuring 75% Daily food intake gauge and eco-action trackers

The Harmless Store concept — dual gauges track daily meals and eco-actions in one unified interface.

Overview

Ethical shopping,
without friction

Harmless Store is an interactive prototype for an ethical food retail app — combining daily meal tracking with eco-conscious product shopping in a calm, purposeful interface.

The app helps users track their daily food intake while discovering sustainable products. Two interactive gauges visualise progress: one for meals, another for eco-actions like "Save Water" or "Eco-Conscious Shopping."

Users can log meals by category, complete sustainable actions, and shop discounted eco-friendly products — all within a minimalist interface designed to reduce cognitive load.

User Research

What users actually
need

Research into existing meal tracking and shopping apps revealed clear patterns in user expectations. These insights shaped the prototype's core functionality.

Daily meal tracking

Users prioritise simplicity and speed — pre-saved meals, barcode scanning, and autocomplete for common foods. Visual macronutrient breakdown helps inform dietary choices.

Shopping features

Personalised recommendations, discounted sustainable products, and seamless transition from recipe discovery to ingredient shopping are recurring expectations.

User Personas

Designed for
real people

Emma

28 · Marketing Specialist

Lifestyle: Busy urban professional, values convenience and sustainability.

Goals: Maintain balanced diet while reducing carbon footprint through responsible shopping.

Pain points: Limited time to plan meals; existing apps feel cluttered or ignore sustainability.

James

35 · Fitness Coach

Lifestyle: Active, health-conscious, enjoys structure and measurable progress.

Goals: Track daily macros; support environmentally conscious businesses.

Pain points: Overwhelmed by feature-heavy apps; wants personalised recommendations.

Influences

Learning from
the best

Four apps shaped the design approach, each contributing unique insights:

MyFitnessPal

Massive community feedback revealed what users expect from tracking apps.

Lifesum

Minimalist analytics page inspired the clean UI and gauge design.

ASOS

Sleek, modern visuals influenced the shopping page layout.

Amazon Fresh

Product organisation and information hierarchy guided the shopping experience.

Data Visualization

Tracking made
intuitive

Eco-Action tracking interface showing 50% progress

Eco-Action Gauge: Tracks sustainable habits and turns abstract data into tangible achievement.

Food intake interface showing 40% impact score

Meal Gauge: Links to daily food category logging to visualize environmental impact.

The Analytics page features two interactive gauges. Each completed task raises the user's impact score, providing immediate feedback on their sustainable journey.

Interaction Logic

Visualizing the
User Journey

Analytics process flow diagram

Process Flow — mapping the logic from selection to impact score validation.

User Flow · Shopping

From discovery
to checkout

Shopping user flow diagram showing path from category selection to payment

Shopping flow — curated eco-friendly products organised by category.

Users browse discounted sustainable products by category, with quick actions to add items to cart. The flow minimises friction while highlighting eco-conscious choices.

Interaction Design

Visual feedback
at every stage

Empty tracking gauge wireframe at 0%
25% completion tracking wireframe
100% completion tracking wireframe

Gauge states — empty, partial, and complete — providing clear progress feedback.

The dual-gauge model visualises daily progress for both meals and eco-actions. Each state is clearly communicated through the gauge fill level, reducing the need for numerical readouts.

Functional Wireframes

Detail where
it matters

Meal logging accordion UI wireframe
Order summary and checkout wireframe

Meal logging accordion (left) and streamlined checkout (right).

Every interaction is carefully considered — from expandable meal categories to the final order summary. The interface maintains consistency while adapting to different tasks.

Identity

A palette of green,
a symbol of renewal

The colour palette draws from nature — greens that evoke health, sustainability, and plant-based living. This reinforces the app's core values without needing explanation.

The logo story

The logo transforms a mushroom cloud into a flourishing tree — a visual metaphor for turning something harmful into something harmless. This duality reflects the brand's ethos of renewal and sustainable future.

Conclusion

Ethics, simply
executed

Harmless Store demonstrates that ethical shopping and daily tracking can coexist in a calm, intuitive interface.

By focusing on core needs — meal tracking and sustainable discovery — and drawing inspiration from established apps, the prototype delivers a focused experience. The result is an app that makes responsible choices feel effortless, not educational.