Logo for Fit to a Tee - One-Of-A-Kind, Vancouver-Designed T-Shirts

Brand Definition

What Do We Do?

Fit to a Tee is a Vancouver-based t-shirt company that makes limited edition, short run, one of a kind t-shirts. We design unique styles which are only available for one month, so that everything stays nice and fresh.

Who Are We?

We're Vancouverites - people just like you. We're professional artists and graphic designers with energy and creativity to spare, who want to share our work with the people of Vancouver. We love making t-shirts and being proud of what we wear.

Why Fit to a Tee?

We're all about great, sustainable design. Buying from Fit to a Tee means supporting local artists, and wearing awesome, local tees. Plus, our t-shirts are made in Canada from a 100% bamboo tri-blend, totally sweatshop free. That's right, they're environmentally and socially conscious, too.

What Do We Want?

We want you to look great in a t-shirt that few other people can call their own, and we want you to feel great about wearing it. Check us out!

Visual Branding

Fonts

The Fit to a Tee site uses Arkhip Regular for its logo, as well as Montserrat (Bold for high-level headings, Regular for lower-level headings), and Hind (Regular for paragraphs, Semibold for strong tags).

Colours

Fit to a Tee primarily uses two colours - teal and orange - as well as shades of gray. While the grays are used to demonstrate varying levels of content, teal is used for high-level headings, and orange is used for clickable or linked items (such as anchors).

The main colours used on Fit to a Tee's site - orange, teal, and shades of grey.

Usage

The fonts used on Fit to a Tee's site - Arkhip Regular for the logo, Montserrat (Bold for high-level headings, Regular for lower-level headings), and Hind (Regular for paragraphs, Semibold for strong tags).

Example Paragraph

Fit to a Tee is a Vancouver-based t-shirt company that makes limited edition, short run, one of a kind t-shirts. Bursting with personality and with new designs every month, you're sure to look fresh in our one-of-a-kind tees. Check out our monthly styles!

Image Style

The following images are examples of how t-shirts might be displayed on the store.

Blue t-shirt with a bike on the front, with a family standing on the bike seat. Green t-shirt with two mountains on the front, with the taller mountain thinking about a knife and fork. Yellow-green t-shirt with a picnic basket on the front, containing a chicken drumstick, a glass of lemonade, and a watermelon slice. Yellow t-shirt with two trees that have legs, walking to the right. Purple t-shirt with a UFO flying in from the background and abducting a man with a tractor beam.

Icon/UI Style

The following icons are examples of how iconography might be used on the site. The focus is on thick rectangles and circles, for bold emphasis and easy viewing.

Icon examples, including button styles, hamburger menu, cart icon, and watch icons.

Tasks and Wireframing

Filtering Shirts

Customers can use multiple filters (for example, size, gender, and colour) to narrow their search for a shirt that suits them. Newly filtered results are then viewable.

4K Display

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Smartphone

A smartphone wireframe showing Fit to a Tee's homepage, with the user selecting the filter option for all of the shirts. A smartphone wireframe showing Fit to a Tee's filtering options for shirts, including colour, gender, and size. A smartphone wireframe showing Fit to a Tee's homepage, filtered specifically for shirts for males in medium sizes.

Smartwatch

A smartwatch wireframe showing Fit to a Tee's homepage, with the user selecting the hamburger menu at the top. A smartwatch wireframe showing Fit to a Tee's hamburger menu. The user scrolls down A smartwatch wireframe showing Fit to a Tee's hamburger menu, with the user selecting the filter option A smartwatch wireframe showing Fit to a Tee's filtering options (gender, size, and colour).

Comparing Colours

Once customers have decided to take a closer look at a shirt, they can quickly switch between different colours to determine which shirt they'd prefer.

4K Display

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Smartphone

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Smartwatch

A smartwatch wireframe showing Fit to a Tee's homepage, with the user selecting the t-shirt that they want to view. A smartwatch wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting the colour option. depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Understanding Sizes

Sizes can vary across stores - a customer may be a small at Fit to a Tee and an extra small somewhere else. They can use the size guide tool in order to figure out how a Fit to a Tee t-shirt will fit them.

4K Display

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Smartphone

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user expanding the size guide tool. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the size guide tool now expanded with details on the chest, neck, and sleeve dimensions of each size.

Smartwatch

A smartwatch wireframe showing Fit to a Tee's homepage, with the user selecting the t-shirt that they want to view. A smartwatch wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting the size option. A smartwatch wireframe showing the different sizes. The user selects
							the size guide option at the bottom. A smartwatch wireframe showing the size guide. The user selects the medium size. A smartwatch wireframe showing the size guide for medium shirts. This page contains info concerning chest, sleeve, and neck sizes for medium shirts.

Viewing Past Styles

Although styles are only available for one month, customers may want to view past styles and see if Fit to a Tee has typically offered shirts that suit their style.

4K Display

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Smartphone

A smartphone wireframe showing Fit to a Tee's homepage, with the user selecting the hamburger menu in the top left corner. A smartphone wireframe showing Fit to a Tee's hamburger menu, with the user selecting the option to view past styles. A smartphone wireframe showing Fit to a Tee's past styles page, which shows past styles from August and July 2015.

Smartwatch

A smartwatch wireframe showing Fit to a Tee's homepage, with the user selecting the hamburger menu at the top. A smartwatch wireframe showing Fit to a Tee's hamburger menu, with the user selecting the option to view past styles. A smartwatch wireframe showing Fit to a Tee's past styles page, which shows past styles from August 2015.

Proceeding to Checkout

If a customer has added a shirt or several shirts to their cart, they can proceed to the checkout where they may edit their pending orders and begin the payment process.

4K Display

A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, with the user selecting a different colour. A smartphone wireframe depicting one of Fit to a Tee's t-shirt pages, in a different selected colour than before.

Smartphone

A smartphone wireframe showing Fit to a Tee's homepage, with the user selecting the 'view cart' option in the top right corner. A smartphone wireframe showing Fit to a Tee's cart page, in which the user has two pending items and chooses to delete one from their cart. A smartphone wireframe showing Fit to a Tee's cart page, in which the user now has one pending item and chooses to proceed to the checkout from there to complete their purchase.

Smartwatch

A smartwatch wireframe showing Fit to a Tee's homepage, with the user selecting the hamburger menu at the top. A smartwatch wireframe showing Fit to a Tee's hamburger menu, with the user selecting the cart option. A smartwatch wireframe showing the user's cart, with the user selecting the first shirt. A smartwatch wireframe showing one of the user's orders. The user chooses to delete this item from the cart. A smartwatch wireframe showing the user's cart. Now that there is only one item, the user selects the bottom button to proceed to the checkout.

Bibliography