The Knitting Lab
Designing a UI that won’t tie you in knots
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
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.
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.
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.
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.
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.
