Case study: Focusing on the user interface

5 min readMay 15, 2021

A concept project focusing on UI Design, over a 1-week sprint on a UXDI course with General Assembly, London.

My Role:

This was a solo project, therefore I covered all aspects as a UI Designer for the App.

Four iPhone mock-ups, showing the four-step on-boarding process of the app.

The Brief — Deliverables

To create the following 4 pages:

Onboarding — What the user sees when they open the app for the first time
Navigation — A menu allowing the user to navigate within the app
Product Listing Page — A filterable page listing all products
Product Display Page — A page featuring information about the product and the ability to “Add to basket”

Who is Buddy?

Buddy is a mobile app allowing budding gardeners to buy plants to start a garden or greenhouse.

It features an index of the most common plants and crowdsourced instructions on how to take care of them. There is an online shop, so you can start your garden easily.

Mood-boarding

I wrote down all the feelings that I got about Buddy from the brief and used this to search for images online.

However, my first mood board accidentally led me down a different path than I actually had in mind for Buddy, as I got carried away with nice images and pulling out colours from these.

A mood board made of images such as greenhouses, botanical gardens, balconies, terracotta pots, coloured succulents and colours taken from these, such as, deep purples, plum, blue, then greens, pinks and oranges. — Mood-board №1 — focusing on greenhouse structures and botanical gardens.

When I realised this was taking me off-piste I went back to start again with a fresh mood board.

This timekeeping in mind, The Urban Gardener— someone who might have a garden or balcony or maybe just house plants. The words I was using were — friendly, energetic, fun, and optimistic. Trendy, original, eclectic, casual.

This took me onto my second mood board, however, I wasn’t totally happy with this either feeling like the palette was just a bit ‘too trendy’.

A mood board using images of indoor plants in living room/home settings. Colours taken from these shown in circles. Colours are hues of pink, orange and greens. There are also some experiments with font ‘nixie one’ in different sizes. — Mood-board №2 — focusing on interiors and indoor plant jungles.

I also really struggled in the beginning to find a font I could connect with, primarily because I didn’t enjoy the brand name ‘Buddy’, it didn’t go with how I pictured the brand as for me this refers to ‘a friend’ and not the intended ‘budding gardener’.

Again, I went back to one of the first images I really liked when I had been researching images of greenhouses. I liked it because of the structural effect, lines and architecture.

After a group critique, I was inspired to research a more editorial style of design. This was great as it also gave me much more ideas in terms of font and I felt like I could connect with it better.

Mood board with central image of a greenhouse structure with black and white checkered floor. Other images show magazine/editorial layouts including plant images and text. There is a large text image saying ‘wild rose’ in two different fonts. There are also three colours in circles in pink and green taken from these images. — Mood-board №3 — Greenhouse to Editorial.

I was able to settle on a font and colour palette I was happy with. So then moved into competitive and comparative research.

Competitive + Comparative Research

I found there weren’t many gardening apps to look at, mostly websites, but I would get around this by viewing them on my phone in small-screen format. As you would expect, nearly all followed a green colour palette, which is why I wanted to try something different.

Therefore for comparative, I decided to look at beauty and cosmetics as a number of these follow an editorial design style — for example, Aesop and Le Labo.

Design

I approached the design in a very experimental way, trying out lots of different ideas, to begin with for particular components — such as buttons, navigation bar, and image boxes. With a focus on lines and a somewhat Art Deco style.

Four wireframes, one in orange and the others in greyscale. Experimenting with ideas.

I then tried to introduce some illustrations and sketches as this is something I’m not very comfortable with as a designer, in the past — usually keeping to line, colour and texture.

Six wireframes, partly in colour and greyscale. Very rough, showing design experiments.

Four coloured, high-fidelity wireframes showing the on-boarding pages with added black-line illustrations of a plant.

Proposed Solution

Smart Animate

For this project, I played around with the Smart Animate function on Figma to create a more realistic and fun prototype. This did make it a little challenging in the time available, as again, it was very much experimental, learning on the way and it wasn’t always straightforward.

Have a go on my finished prototype!

Next Steps

There is a lot more that could be done with this project as it was very quick and focused.
Develop more pages.
Look to create some fun animations and interactions.
Gather user feedback on the design, branding, layout and usability.

Key Learnings:

I was shocked at how much I struggled at the beginning of this project as I was not following the usual Double Diamond Design structure. I was excited about the freedom, to begin with, but it took some trial and error to find my direction.
I loved getting to grips more with Figma and Smart Animate.
I enjoyed being able to progress more with my understanding of colour theory, and typography and how these both relate to branding and portraying feeling and emotion.

Thanks for reading, you can find me on LinkedIn and Twitter.

Bootcamp