What Is Eco Cart

Eco Cart is the concept and visual design of an eco-friendly online store. The products sold are clothing, furniture and accessories. The goal of this design project is to bring out and explain the key message of the store (awareness and support of ecologically friendly products) using structure and visual elements. 

The design was done in a mobile-first approach and the main screens were translated into desktop format.


UX Design

  • Research
  • User flow
  • Wireframing
  • Testing

UI Design

  • Visual branding
  • Mobile interface design
  • Responsive design

Tools and Resources

  • Sketch
  • Figma
  • Unsplash
  • Icons8
  • Sketch App Sources

Creating The Brand

Mood and Color Choice

It was important to first establish the tone and feel of the brand by taking into consideration the goals, brand message and products of the store. 

Eco Cart Is selling products made of eco-friendly material only. The colors used are green, beige and brown tones representing nature and plants as well as organic material like cotton or bamboo fiber.

Brand Principles

As additional guidelines, I used the core principles of Eco Cart: ‘Ecological Awareness’ and ‘Quality over Quantity’. The style of writing is polite and aims to educate the customer about eco-friendly shopping. 

The texts are written in an easy to understand language without slang words. The overall appearance of the store is clean and visually representing the value of environmental awareness.

Logo Design

For the brand logo, I decided to go with a minimalistic and geometrical style combining the symbol of a shopping cart with two leaves. The aim was to convey the message and theme of Eco cart in a simple and easy to remember visual. The Logo can stand as an Icon alone or can be combined with the name of the store underneath like shown in the examples.


Following the style of the logo I created a set of Icons that are used throughout the application. The overall style is minimalistic and uses outlines instead of filled shapes.

App Structure

User Flow

After visualizing the brand identity and some key elements like iconography, I visualized the structure of the app as a user flow. 

This user flow was used as a guideline to create all the screens.


To layout the structure of each screen I designed  Low- and Mid-Fidelity-Wireframes. Taking into account all the previously established brand guidelines and overall structure of the application. Down below are some examples of Mid-Fidelity-Wireframes.

Interface Design

Home Screens

The next step was to translate the wireframes into a visual design and setting up every screen to cohesively portray Eco Carts design style, mood and message.

For the home section, I wanted to give a first introduction to the store and its theme and to let the user familiarise themselves with the three product categories instead of being bombarded with tons of products and sales. Each category is featured and explained in a slider covering almost the entire screen.


To make the navigation through the online store easy and intuitive I used a navigation bar at the bottom of the screen giving the user the option to switch between the home section, product list and their profile which features their personal wish list of items. Simple and clear icons are used to display each navigation choice.

To look for an item directly the search button in the top right corner can be used.

From the product list, the user can choose between the main categories and subcategories that narrow down the search.

Eco Cart In Action

Prototype And Responsive Design

To showcase some parts of the application I created a prototype with Figma. Additionally, I made responsive desktop designs for the main screens of Eco Cart to show how it would look on another device.

Thank You For Viewing

Follow Me On

Copyright © 2020 Elena Sandfort