The Knitting Lab

Designing a UI that won’t tie you in knots

The Knitting Lab prototype UI
The Knitting Lab prototype UI

What was the challenge?

Duration: 1 week design sprint

My Role: Branding, UI Design

Tools: Figma, Google Fonts, Coolors, Blush, Able

Result: Prototype

What did I learn from it?

  • Establishing brand values, using positioning statements to prevent these being too broad
  • Mood boarding
  • Colour Theory
  • How to choose Typefaces, font choices and pairings
  • How to create an appealing UI that communicates this brand

Brand Exploration

Key Words + Values

Text branding statements for The Knitting Lab
Positioning Statements for The Knitting Lab

Some kindred brands I thought share these values included Etsy, Wordery, Ethical Superstore and Hay Design.

I liked the idea of playing around with a lexicon related to knitting, but with more modern associations. From ‘Crafty’ I thought about adjectives like industrious, mischievous, creative, deductive.

Physical settings came to mind like workshops, blacksmith yards, objects like tools and even laboratories which perhaps has a more contemporary, scientific feel.

This planted the seed of combining lab imagery and language with knitting themes as part of the core brand.

A mood board to encapsulate the brand aesthetic
A mood board to encapsulate the brand aesthetic

Colour Choice

This work informed my palette choices — I wanted to use colour as a tool to express the brand values, as well as evoking a calm, relaxed response from the user in keeping the reasons why people knit — to unwind.

A picture of a colour palette
The colour palette I settled on

Accessibility is a key concern for me — I tested each colour against AAA standards using a plugin called Able to ensure typefaces would be legible.

Typeface Choice

Speaking of typefaces, how did I settle on these?

For this I thought back to my brand values and the image I wanted the app to project. The aim was for The Knitting Lab to evoke the cosy, traditional feel associated with the activity, whilst having a modern ‘scientific’ twist.

Using FontPair to ensure they worked well together, I chose Poppins as more of a clean, sans-serif font for headers, and PT Serif for longer headlines and body text with a little more of an old fashioned vibe.

Typeface with H1, H2, H3, H4, H5 and body text sizes and styles
Here’s the typeface set-up

The end result + next steps

The UI design went through several iterations.

Initial feedback raised issues such as an opal background making the whole experience too dark, with more light shades needed, and menu icons taking up too much space on the screen. I opted for illustrations on the onboarding screen to give more of a playful, personal experience.

4 iterations of the on-boarding screen
4 iterations of the on-boarding screen

After testing of my final designs, there are still some areas to consider, including:

  • There was considerable confusion as to whether the logos were clickable.
  • Many users felt the header bar was too narrow.
  • Some users disliked having the hamburger menu at the bottom, preferring it in the top left.
  • The room was split on the use of the Coral colour for accents — some lovers, some haters. Certainly divisive enough to consider a rethink — at least softening if not removing the colour altogether.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
James Green

I am a Content Designer at Essex County Council, with a background in the music industry.