Ethan Spetnagel

      About
      Resume
      Portfolio


EcoScan

UX Concept Project

   
EcoScan loading animation

Background

EcoScan is an app that helps users quickly evaluate any product's environmental impact to help make informed decisions. By scanning barcodes or searching for items, users can access sustainability metrics such as carbon footprint, water usage, energy consumption, and overall eco-ratings. The app simplifies sustainable shopping by offering features like alternative product suggestions, a shopping cart for managing selected items, and a map to find nearby eco-friendly stores. With a focus on user-centered design, EcoScan makes eco-conscious decisions easier and more accessible for everyday consumers.  



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.  
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




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.  


High-Fidelity Design

     
Home Screen Carousel
The Home Screen Carousel introduces users to the app's primary functionalities: accessing the cart, exploring products, reading up on sustainability, and finding stores nearby. This carousel visually connects users to products while maintaining an eco-conscious aesthetic. 
Product Scanning Feature
This feature allows users to scan a product or its barcode for sustainability information, such as carbon footprint, energy consumption, and water usage. This functionality streamlines the process of evaluating a product’s environmental impact, helping users make informed choices quickly and conveniently.    
 
   
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. 
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.        

Accessibility

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).    








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!



Sources


Go Back:
Lucinda Rose Gold Tattoo Visualizer
Cardioscape Splash Screen Design

Next Project:
Slug Soap

Skip Ahead:
Slug Radio
SF Weather Tracker
Fox & Lion Bread Graphic Design
Casa Nidal
Artwork

Home