The Yarn Pit:

Branding a subscription-based knitting company

Scope: 1 Week • Individual • Mobile App • Conceptual

Not your granny's sweater!

Group-13

When you think of someone knitting, who do you think of? What are they making?

ChristopherWalkinsKnitting-1
CurtKobainKnitting-1
RobinWilliamsKnitting-1

THE BRIEF

Create a brand identity for a fictional knitting subscription service.

To capture a new audience, I needed to bring a young, fresh, and hip feeling to what is considered a traditional craft.

The Product

A monthly delivery service for knitting packs straight to your door with cool and modern designs. I was asked to prototype a mobile app including the onboarding, navigation, product display page, and article page for the brand.

gucci_uncoventional
5ab8de38ead99-59d20a4578d41_inl3llp5g5kz__700
BowieBodysuit_rs-2

I looked at unconventional products to help give a new perspective. DIY fashion experience with projects from easy to bodysuit.

Summary of Project and Problem

This was a concept project to give a fictional knitting subscription service a brand identity. There were no limitations, so to make this project more personal, I thought up unconventional products and considered a new perspective.

I needed to bring a fresh and hip feeling to what is regarded as a traditional craft.

My Responsibilities and Process

I followed the double diamond design process and included a few creative thinking and branding exercises.

  • Researched direct competitors and knitting trends

  • Defined the brand values through word mind mapping

  • Defined the personality through brand affinities

  • Named the brand by researching song titles

  • Created mood boards for inspiration and definition

  • Determined an accessible color palette through testing

  • Created a style guide through typeface research and testing

  • Iterated upon designs based on feedback

Tools

  • Pen and paper

  • Figma

  • Notion

  • Slack

  • Zoom

  • Keynote

  • Photoshop

  • Type-scale.com 

  • Able: friction-free accessibility 

  • Coolors (color picker)

Key Deliverables

  • Hi-fi mobile prototype including 4 pages:
    • Onboarding
    • Navigation

    • Product display page

    • Article page (blog post)
  • Brand values
  • Style guide

  • Mood boards

  • Presentation

Results

All fonts and colors are accessible. I believe I have brought something fresh and hip to the market according to the brand values. Scroll down to see!

Keep scrolling to read how it happened.

DISCOVER

Research and giving the brand a personality

What are the brand values?

I used a mind-mapping exercise to think of words to describe the values. The brand values helped give direction to each decision.

Brand Values

  • Creative but fashionable

  • Expressive but guided

  • Unhurried but stimulating

  • Challenging but rewarding

  • Cool but not pretentious

Researching ideas and competitors

I researched trends in knitting, competitors, and celebrities who have taken up knitting or have artistic hobbies. 

YarnBombing-2
YARN BOMBING

The creative approach and colorful patterns were attention-grabbing.

WoolandtheGang
WOOL AND THE GANG

The critical competitor has given knitting a younger look and added hip hop influence to the name "Kool & the Gang."

Who would represent the brand?

I researched celebrities who have taken up knitting or have artistic hobbies and considered what car the brand would drive.

CaraKnitting-1
CARA DELAVINGE

The famous model is often found knitting backstage at fashion shows. Cara is the perfect combination of fun and cool.

kelyplatts_1
VOLKSWAGON MICROBUS

Customizable and unique, the perfect representative. Unhurried but stimulating.

It's not about speed; it's about enjoying the process.

DEFINE

After discovering inspiration and developing the brand values, it's time to start defining.

Naming the Brand

Taking a little hippie and a little hip-hop influence, I looked to song titles for naming inspiration.

THE YARN PIT

(inspired by "Gravel Pit" by the Wu-Tang Clan)

Mood Boards

I created a collection of images that felt like the brand and put them together into a few mood boards. 

The blue and white cloud patterns were eye-catching and memorable. Since clouds are fun, airy, and slow-moving, it seemed right.

1_1RiREWh3pKyyz2WRt5Wh3w
Moodboard_color

Choosing Accessible Colors 

I started with color samples from one of the mood board images. I would learn later that the blue and orange were too light and did not have enough contrast to be accessible. They were toned down in brightness to pass the contrast test.

Screen-Shot-2021-01-10-at-17.29.02

The bright and happy colors were appropriate with the values: creative and expressive.

Image Selection

The onboarding image is of a young, cool man wearing a fashionable knitted hat. Pictures of unique people wearing unconventional knitted pieces such as balaclavas are used throughout the app. These images represent a combination of cool and fun but are also creative and fashionable. 

Font Choices

  • The futuristic, geometric, shape-based typeface "Avenir Next" is commonly used in mobile apps; I chose it because it is easy to read.
  • The logo was a little more playful (to keep the young feeling) and a similar typeface called "Didact Gothic." There is also a thick puffy white outline around a few titles to reinforce the cloud theme and keep it fun.
Screen-Shot-2021-01-10-at-16.59.12

Style guide and accessibility suggestions

DEVELOP

Sketching, Digital Wireframes, and Iterations

Sketching initial ideas

I drew some initial sketches to consider all of the necessary elements. 

PenPaper_Screens

I forgot a few things and revised the low-fidelity wireframes later in Figma.

Moving to digital wireframes

Essential navigational items were laid out. The app needed to make sense before I could work on the UI design. As the fidelity increased, so did the detail and amount of information.

Onboarding iterations

  • Text on photos is generally insufficient for accessibility. Clouds were added to create more contrast and contribute to the branding.
  •  Clouds were used in the background to soften the model's serious expression and to keep with the brand values: cool but not too cool.

V1 Lo-Fi Wireframe

V3 Hi-Fi Wireframe

V5 Final Wireframe

Cover_Iterations

The onboarding page went up in fidelity quickly.

Product display page iterations

  • The "quantity" drop-down wasn't a good solution, and the symbols were confusing. It changed to  –1+.
  • Spacing needed improvement again and again. Attention was put to hierarchy and typeface size as well as vertical spacing.

V3 Mid-Fi Wireframe

V4 Hi-Fi Wireframe

V5 Hi-Fi Wireframe

PDPiterations

There were a lot of changes made to the Product Display Page.

DELIVER

The Prototype and Conclusions

Conclusions

  • The final design represents the brand's values.

  • Knitting has never looked so fun before!

  • The colors, fonts, and buttons are accessible.

Next Steps

  • Add more content
  • Confirm accessibility
  • Start knitting!

Personal Learning Takeaways

After my first critique with colors, I learned that I had a lot of accessibility issues. I found this frustrating but also learned to check for this every time. In my research, I noticed a lot of websites and apps are inaccessible. It was challenging to find accessible combinations and still make them appealing.

The Prototype

Feel free to look around and scroll to see everything!

ALL OF THE FRAMES

FinalFrames

Thank you for reading!

Selected Works

FLAVRUX Case Study

Made.comUX Case Study

Grower's GroveUX Case Study

Back to top Arrow