E-Commerce Brand, Web Design, & Style Guide

Output

STUDENT PROJECT (FICTIONAL)

Role

BRAND, INTERACTION, & UI DESIGNER, STRATEGIST, RESEARCHER

Background

For school, I conceptualized a fictional e-commerce brand for college students. Based on interviews, I determined students’ needs for affordable supplies online and quick shipping times due to limited budget and time. This brand became Check Mark. Their online shop sells school supplies with focus on user convenience through automatic price matching and fast delivery.

Objective

I was asked to apply Check Mark’s brand values to a visual identity and web design that would communicate reliability and efficiency over competitors.

Strategy

From competitive analysis, I determined that red and blue are common for office supply brands. While competitors do offer price match, I couldn’t find this mentioned in the purchase process. The mandates became that Check Mark had to communicate a non-corporate tone and be clear about their conveniences.

Design

The logo symbol takes after an ant head. The insect’s hard-working nature symbolizes reliability and productivity. The green links to economical value. Orange is optimistic. The lack of corporate red/blue makes Check Mark approachable to college students. The typeface balances curve and edge which communicates their strong will, yet friendly nature to customers.

Check Mark’s responsive web design was created with usability principles in mind for desktop, tablet, and mobile view. The shapes, colours, and typography complement the logo and further communicate the brand’s tone and values.

The full Check Mark web design can be found here.

A web style guide was created as a reference for maintaining consistent brand identity for hypothetical website additions. Guidelines for implementing visual elements such as typography and icons are indicated.

The Check Mark web style guide can be found here.

Challenges

In translating the web design from desktop to mobile, I wanted to ensure product listings were consistent so users knew where to “Add to Cart”. For mobile, this meant adapting titles and the ‘Price Matched’ label. I kept the title’s first half and the tag icon as the critical identifiers that would communicate those elements to the user while maintaining consistent listing sizes.

Licensing

Icons in this project were provided by FontAwesome (modified colour): https://fontawesome.com/license/free