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.
Process
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.
Iconography
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.
Wireframes
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.
Navigation
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.
