A 5-Day Sketch challenge: Growing a gardening app from the ground up
Our third project as part of General Assembly London’s 12-week UX Design Immersive course was all about honing our visual design skills using the graphic design tool Sketch.
While our second project also found us using Sketch, this week’s work saw us take a much deeper dive into visual design and branding strategy, taking in mood boards, brand affinity, personality traits, mind mapping and typography in order to create polished high-fi prototypes.
This is the story of our week’s work.
Assessing the brief
This week’s brief was to build a visual identity for a mobile app optimised for iPhone 8 screen dimensions.
We were given three options for the type of app. I decided to build a gardening app, which would allow ‘budding’ gardeners — pun intended– to network and share pictures and tips through blogs, forums and picture uploads.
For this project, we used the double diamond approach, dividing the process into four phases — discover, define, design, deliver.
The Discovery phase
Following a day spent introducing ourselves to core visual design principles, we kicked off our app by selecting some brand values that would give our app a ‘belief system’.
Noting that many gardening apps had a quite traditional feel, and wanting to reach out to a younger generation of keen, internet-savvy gardeners working in sometimes limited urban or suburban space, I went for the following: Modern, Growth, Sharing, Network and — this last one with the grow-your-own gardeners in mind — Harvest.
With this in mind, I created a mood board. I’ve worked in the branding space, so I was familiar with the concept and aims of a mood board — but I’d never built one myself. The board went through several iterations, but after a few reorganising exercises, some common themes started to present themselves.
You can see a curated selection from the mood board, along with some descriptors below.
The Definition phase
With a brand name in mind — Out The Back, a nod to those plucky weekend urban gardeners doing their best with the patch of land just outside the kitchen door — I started to work on some Goldilocks Statements, mapping out the character of the app. Not too broad, nor too narrow, but just right.
- Out The Back is accessible, but not glib
- Out The Back is informative, but not know-it-all
- Out The Back is welcoming, but not overbearing
- Out The Back is friendly, but not needy
- Out The Back is connected, but not cliquey
I also engaged in some other UX Design techniques, including mind-mapping, brand position, brand affinity and sketch exercises to develop a direction.
The brand positioning above maps out the main hallmarks of the app — tipping towards formal and serious, with clear monotone branding, but still accessible and simple to use.
Below, I brainstormed my brand affinities, choosing three existing direct and indirect competitors whose values would chime with the values of my own site. Gardeners’ World was a useful cue for the sort of content displayed on the site — editorialised hints for gardeners of all ages — while from Ikea and Instagram, I took the idea of a friendly, creative and inspiring community space.
The Development phase
This week’s project was heavily focused on developing our visual design abilities, so the Development phase began with the building of a colour palette. I built an initial colour palette using Adobe’s Color Wheel, aiming for a mix of natural and outdoor tones, along with the pale grey that I refined from my mood board.
I also developed typography for the app. I considered mixing up modern and handwritten fonts, but for my initial prototypes decided to use Ubuntu, a sans-serif font with a clean and modern feel. To introduce variety, I experimented with bold text, mixing up black, green and blue.
While in this project we didn’t engage in any in-depth user testing for reasons of time, we did engage in some mutual critiques in our afternoon workshop sessions, which supplied me with some valuable feedback. The buttons on the menu page clearly needed work, while unanimously people didn’t feel the blue text worked.
Although the colour palette provided a good starting point, I found it wasn’t giving me quite what I needed so later in the prototyping process I returned to the mood board and, using Sketch’s colour picking tool, grabbed some new colours, including a vibrant ochre colour taken from a picture of bee’s wax. This hue became a valuable part of my final prototypes.
The Delivery phase
Hey presto — four screens from a hi-fi prototype.
As you can see, plenty happened between my V1 prototypes and the delivery of these final screens. I introduced a new yellow/ochre shade, used for the logo, tab interface and secondary text; updated the logo to a ‘helping hands’ image, inspired by an idea I liked on my moodboard; improved and amended the symbols and buttons, including the addition of ‘back’ and ‘favourite’ buttons; and added in photos and some other aesthetic touches.
Next steps
From ideation to final prototype in four days — a project conducted under this sort of tight timeframe this is always going to leave some loose ends or unexplored avenues. Overall I was happy with the work, but if I had more time here’s what I’d do.
More microcopy. In particular, the menu page feels a little blank and could use some more call-to-action style copy — what are we looking at?
More relaxed spacing. In places, the pages feel a little cluttered — increasing vertical spacing would give a bit of valuable breathing room.
Beef up that logo. It looks good on the opening page, but from the second screen onwards it’s far too slight.
Back to the drawing board. I can’t help but think there’s some disparity between the minimal, greyscale colour palette and the bright photos and Instagram-style ‘social network’ interface. There’s a small degree of inconsistency here that I think would become more glaring as I built the app out further. Some further work at the Discovery/Definition stage — including user interviews or persona-building — might have focused the brief slightly better.
An alternative approach would be to stick with the aesthetic approach and icons, but go for a more content-heavy approach — forum, rather than feed. Or to put it another way: Reddit instead of Instagram.
Thanks for reading. If you want to talk to me about this project or anything else, you can find me on LinkedIn.
