EcoScan
UX Concept Project
EcoScan is an app that helps users quickly evaluate a product's environmental impact to help make informed decisions.
Contents
s- Background
- Problem Statement
- Information Architecture
- WireFrame
- Type & Color Palette
- Acessibility Considerations
- High-Fidelity Design
- Takeaways
Background
EcoScan is a mobile application designed to provide users with detailed 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. 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
Information Architecture
The EcoScan app is designed to create a 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 nav bar, allowing users to seamlessly move from scanning a product to exploring detailed product metrics and discovering eco-friendlier alternatives.
Wireframe
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, valueable 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 ensuring 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.
Background
#D3D3D3
Primary
#125A41
Secondary
#9BBFB4
Accent
#E4F0EC
Color Palette
The color palette for EcoScan was designed to align with its eco-conscious purpose and user-friendly design. Each color plays a specific role in enhancing the user experience:
Background Grey
- Provides structure
- Highlights text
Primary Green
- Represents sustainability
- Green is associated with nature and tranquility, promoting a sense of calm and reducing anxiety (New York Post, 2024)
- Used for actionable elements like navigation and call-to-action buttons
Secondary Green
- Applied to backgrounds and supporting content to maintain visual balance
-
Creates a calming and approachable aesthetic.
- The color green reduces eye strain and enhances readability, improving overall user comfort (IOSR Journal Of Humanities And Social Science, 2023)
Light Blue-Green Accent:
- Used as contrast for data displays and specific interactive elements.
- Signals interactivity and guides users to swipe back to the product page or home screen
Type
I chose Helvetica as the primary typeface throughout the app to achieve a clean, modern, and legible design. Helvetica’s neutral and timeless aesthetic ensures that the focus remains on the content and functionality of the app, aligning with the goal of providing an accessible and user-friendly experience.
Accessibility Considerations
I tested the color contrast ratios by 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, and 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 interactions (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
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
The Product Scanning Feature allows users to scan a product
or it’s 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.
or it’s 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.
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.
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.
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.
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!
Next Project:
Slug Soap
Skip Ahead:
Slug Radio
Fox & Lion Bread Graphic Design
Casa Nidal
Artwork
Go Back:
Cardioscape Splash Screen Design