EcoScan
UX Concept

EcoScan is a mobile application designed to provide users with insights into the environmental impact of the products they purchase. By scanning barcodes or searching for items, users can access sustainability metrics such as carbon footprint, water usage, energy consumption, and overall eco-ratings. With a focus on user-centered design, EcoScan makes eco-conscious decisions easier and more accessible for everyday consumers.

EcoScan loading animation

Problem Statement

Many consumers aspire to make eco-friendly purchasing decisions but lack accessible and reliable information about product sustainability. Studies show that 73% of global consumers are willing to change their consumption habits to reduce environmental impact, yet 42% find it difficult to identify sustainable products (Nielsen, 2018). EcoScan bridges this gap by offering an intuitive platform for environmentally conscious individuals to evaluate everyday items, find more eco-friendly alternatives, and align their purchasing decisions with their values. The app simplifies complex sustainability data into a user-friendly format.

Information Architecture

The EcoScan app is designed to create an intuitive, user-centered experience with clear pathways and minimal taps required to access critical information. The design supports both linear and exploratory browsing, ensuring that users can either follow a straightforward journey or dive deeper into specific areas of interest. This organization of information enhances usability, helping users make informed, eco-friendly purchasing decisions with ease.

I organized the content into three main sections: a ‘Scan’ page for product discovery; the ‘Cart,’ which holds the users' product cards; and a ‘Home’ section, where users can read about sustainability, explore new eco-friendly products, find stores nearby, access their app settings, and navigate to all other pages. Each section is interconnected via the ‘Product Information’ page and a navigation bar, allowing users to seamlessly move from scanning a product to exploring detailed product metrics and discovering eco-friendlier alternatives.

Wireframe

To create the wireframes for the EcoScan app, I began by defining the primary user goals and key functionalities that needed to be represented in the interface. I mapped out the essential user flows, focusing on tasks like product scanning, viewing product information, and exploring alternative product suggestions.

I used a low-fidelity approach to quickly iterate on layout ideas and test usability. I sketched out the core screens (above) in Balsamiq, starting with the Home Page and progressing through the Product Search/Scan, Sustainability Ratings, and Alternatives & Suggestions pages. Each wireframe was designed to highlight the most critical elements, such as scan buttons, valuable product information, and navigation options, ensuring a logical flow and easy access to information.

I conducted informal usability tests by sharing the wireframes with a small group of target users. Their feedback helped me refine the layout and ensure that the design met user expectations. This iterative approach allowed me to address potential issues early, ensuring a smooth transition to the first design phase. By grounding the design in real user feedback, I ensured that EcoScan addresses genuine pain points and delivers a user-centered experience.

Accessibility Considerations

I tested the color contrast ratios using a Contrast & Accessibility Checker in Figma to ensure compliance with WCAG standards. The primary green (#125A41) and light blue accent (#E4F0EC) consistently met or exceeded the AA and AAA contrast thresholds, with ratios such as 7.01:1 for normal text and 7.64:1 when paired with neutral backgrounds (#F7F7F7). These choices ensure readability for users with visual impairments or color perception difficulties.

Typography was another focus, with font sizes exceeding the minimum accessibility recommendation of 11px, ooand alignment optimized for readability. Helvetica was chosen for its high legibility across various screen sizes.

Additionally, all swipeable components were created with adequate spacing to prevent accidental interaction(Google Material Design Guidelines, 2021).

Lastly, the light blue-green accent color is used to signal interactivity, such as swipeable areas or actionable elements, helping users easily identify navigable content.

High-Fidelity Design

Data Display

On the product information page, users can click into the metrics grid to open a detailed graphic that visually represents the data points and compares alternative products to the one they’re currently viewing.

Swipe Navigation

Allows users to swipe right to return to the previous page on all screens. This feature enables users to navigate intuitively, making the app easy to learn and use.

Expanded Product Information

This collapsible section allows users to easily explore a product’s eco-metrics, providing context for better decision-making. To remove items from the cart, users can simply press down on an item for a few seconds, prompting a red minus symbol to appear in place of the arrow —functionality inspired by Apple’s iPhone interface.

Filtered Cart View

This filter is designed to optimize and simplify cart management. Users can sort items by Eco Score, price range, category, or distance, ensuring that their cart aligns with their sustainability and budget preferences.

Takeaways

While designing EcoScan, I revised and refined my work several times. During usability testing of the initial wireframes, I felt that the Home Screen felt cluttered and lacked a clear visual hierarchy. To address this, I incorporated a carousel design to provide a more focused layout, resulting in a Home Screen that is both engaging and intuitive.

Another challenge was balancing font sizes with the volume of information displayed, particularly on data-heavy screens like the Product Information Page. Initially, oversized fonts caused important details to feel cramped and overwhelming. By changing the typography, I was able to display sustainability metrics and product details in a way that’s both visually balanced and easy to read.

Thank you for taking the time to explore this project. If you’d like to learn more about my thought process or discuss the design in detail, I’d be happy to connect!