The Cart is an online store with an intuitive navigation, smart filtering, modern and clean design.

Scope:

  • Art direction & Brand visual identity

  • Wireframe, UI design, Prototyping

1. Understand (users/business)

Brief extract

Design a web responsive app for a store that would be particularly valuable for people who struggle to find the items they want in traditional stores.

Most of the users will be proficient with technology but will greatly benefit from basic navigation and clean design.

Differentiation

2 common paint points with online stores:

  1. It’s difficult to “feel” the product since we deal with a flat screen:

  2. Numerous items, competing for attention, clutter the screen, resulting in a confusing UI .

Check out how The Cart’s UI design addresses these issues.

2. Ideate

User flow

Before building the user flow, I use a flexible function map where ideas are placed and moved around until confirmed. The function map is based on gathered user stories that list up all the tasks that users must be able to accomplish with the app.

3. Execute

Visual identity

The Cart’s brand design goal is to make everyone feel at ease and welcomed to the store while while enjoying sleek and memorable visuals.

  • While The Cart aims to be the staple of on-line shopping by offering an easy and smooth experience, it ambitions to attract all types of shoppers, including sophisticated ones, looking for high-end products. 

    Hence the visual identity I built reflected these 2 principles:

    Bold & Balanced: visually impactful, but never tacky.

    Classy & Accessible: Sophisticated but unassuming.

  • “The Cart” app name express the ambition to be the simplest, most intuitive shopping app on the market.  It ambitions to become the generic term for on-line shopping.

    The logo communicates this simplicity with lowercase. While it is playful and friendly, with a rounded typography, it also conveys the idea of quality by incorporating a diamond shape that is often associated with customer satisfaction in e-commerce iconography. 

  • The primary palette is limited to 2 color tones to express the simple and straight forward spirit of the brand. It allows for enough contrast for readability on busy e-commerce screens.

    However, I avoid harsh contrast by replacing white with a greenish off-white and black with a dark green. This has a soothing effect and reduce screen fatigue for users eyes. The dominant color, green, is also soothing and relaxing. A relaxing palette is especially appropriate since people can be doubtful when buying on line. (They cannot touch and confirmed by themselves the quality of items; which can be cause for stress).

  • Item The brand paires Bodoni Egyptian and Barlow Condensed. These two typefaces offer great contrast.

    Bodoni Egyptian is stylish, giving a high-end look and feel to our brand, but the all cap usage makes it more accessible and adds energy.

    Barlow Condensed is very well balanced simple and practical when it comes to place a lot of items’ specs and descriptions in narrow spaces. Its rounded corners add softness and match the logo style. description

Low, high fidelity wireframes
& early usability test

Leveraging early usability test feedback for implementing changes between mid and high fidelity wireframes.

Responsiveness

Previous
Previous

FitFood

Next
Next

KnowScan