The Happy Llama — A UI Case Study
In this week-long UI design project I designed an app for The Happy Llama; ensuring the brand’s values and mission were clearly communicated.
UI & Visual Design | 1 week sprint | Jan 2020
The story
The Happy Llama is a subscription service tailored towards knitting enthusiasts as well as beginners. Their key goal was to create an app which allowed users to get knitting project kits (which include yarn, needles etc.) delivered to their door. The app would also provide support along their journey towards completing each project through detailed instructions and video tutorials.
The brief
As the UI designer, I was tasked with the following:
Defining the brand
To create a successful and seamless user interface I needed to first define and understand The Happy Llama’s key values and goals. I did this by creating a brand personality framework. This involved a set of design exercises in which I was able to discover and define key words which best described the company’s personality.
To kick things off, I completed a word association exercise. The app was for a knitting company and so I began noting down all the possible objects and qualities that came to mind when thinking about the word “knitting”. This eventually led to a mind-map full of various ideas that could be part of The Happy Llama’s personality.
Defining Brand Values
The word association exercise allowed me to define a few conclusive words which best described the brand’s values. These were:
Setting limits
To ensure my design remained focused and aligned with the brand’s values, it was important for me to not only define who the company was but also who they weren’t.
As a brand, The Happy Llama was:
In summary
In creating a brand personality for The Happy Llama, I envisioned the app to be an opportunity to redefine knitting. Knitting is seen as an outdated craft for an older generation, however The Happy Llama aims to change that. Through the app users will be able to create trendy fashion-forward pieces that are made from sustainable eco-friendly wool.
The app would be for the crafty young millennial (18–25 y/o), who’s also conscious of their carbon footprint.
Discovering the Brand
Having set the limitations for the brand, I went onto explore and discover the ways in which the brand could communicate its values and personality through key design elements such as colour, illustration, composition and typography.
Composition
I wanted to create a simple, modern and minimalistic user interface to ensure the brand’s values informed the app’s visual style.
Illustrations
As I continued to build mood-boards, I found that many websites and apps used playful lines, rounded corners and organic shapes help create a relaxed feel.
Simple illustrations are often used to frame call to action areas and help break up bodies of text. They help create an engaging interface that is informal and friendly whilst ensuring the content remains digestible. This led me to dive deeper into the types of illustrations I would want to incorporate into my design.
Colour
The illustrations created a restful and calming atmosphere, not just through their organic shapes and patterns but also through their warm earthy colours. Both the shapes and colours worked holistically to create an overall relaxing tone.
I found that shades of beige, brown and green naturally aligned with the brand’s core values, as I continued to build my mood-boards.
Typography
Composition, Illustrations and Colours were not enough to reflect the brand’s values and personality. The typography style was also a key factor which determined the overall tone of the app. Each element and aspect of the interface would need to holistically work together to communicate the brand’s overall personality.
As a result, I found that a simple and clean typography style that is classic yet modern was best suited for what the Happy Llama wanted to achieve.
Designing the brand
Using the mood boards I began ideating my design concepts, creating quick sketches to test various ideas.
Style Guide
Having chosen the concepts for each page, I then went onto develop the sketches further by digitising the concepts on Figma. This allowed me to explore and experiment with various colour and text combinations.
As I built my design through continuous experiments and tests I also ran some accessibility tests. This ensured my app remained accessible and usable to both normal and colourblind users.
I found that the primary green colour “Forest” was the most ideal colour to use for the text as it was very dark and contrasted well with the lighter tones of the colour palette. For instances where the “forest” colour was the background, the primary “Cream” colour and accent “Sun” colour worked well as alternative text colours.
These tests helped finalise my style guide and end product.
The final product
Check out a demo of the product here:
What I’ve learnt
Theory is great but practice is better. Whilst understanding design theory is the foundation of any good design, I found that focusing on theory too much can sometimes hinder the design process.
I spent a considerable time trying to finalise the colour scheme through colour theory before I began designing — but how could I finalise my colour palette if I didn’t even know what my design looked like and what elements would go where?
In the end, I found myself going back and forth between theory and practice. Through practice, I experimented with different ideas, whilst theory kept me from going overboard with my explorations. Any good design process involves the seamless combination of both theory and practice — and this is what made my design process less challenging, more enjoyable and successful.
