PlantPals
Visual design for a gardening app
Concept project as part of General Assembly’s UX Design Immersive course. This was a 4-day design sprint.
The brief
For this concept project I was tasked with creating the visual design for a mobile app where gardeners can connect, learn and share tips. It includes an index of common plants with instructions for care and top rated tips from the app’s community. The deliverable was to create the following 4 pages:
- Onboarding — what the user sees the first time they open the app
- Content heavy page — showcasing the app’s core feature
- Navigation — menu allowing the user to move within the app
- Profile — page where the user can view and edit their account settings
Discovery phase
The discovery phase was all about defining the brand’s image. What key messages and feelings did I want to convey and be reflected in the app?
To answer this question, I used a number of visual design methods that enabled me to explore the brands values, its personality and traits.
The keywords and traits that I felt were most reflective of the brand’s value were:
- Is nurturing but not mothering
- Is about community but is not exclusive
- Offers support but is never condescending
- Makes you feel contentment but not lazy
- Is ethical but not judgemental
I set about searching for design inspiration that invoked these brand values through warmth of colour and simplicity.
Seeing the images as whole in a mood board allowed me to draw out insights about the brand’s personality and the app’s potential visual style. A sans serif font and simple layout promoted community and ethics. The natural earthy tones made for feelings of nurture, contentment and support.
The shades of green, red, orange and brown jumped off the page and led me to do further exploration of colour for the app’s palette.
To help narrow down the primary colour to use in the app, I wanted to see it come to life in a brand name and logo.
I settled on PlantPals as the app name because it sounded friendly and selected on a teal colour for its warmth. As a secondary colour, hot pink was a complementary colour to teal that I thought would work well for call-to-action elements, especially as it is similar to red-shaded colours often seen in plants.
Lastly, I searched Google Fonts for something simple but captivating, selecting ‘Poppins’ for my typeface.
Design phase
This was an iterative process that started first with basic sketches on paper. Given the tight timeframe, I then moved straight onto a high-fidelity colour version to quickly capture and iterate on feedback gathered from my network, fellow classmates and teaching staff.
I now had a good idea about the app’s visual style. Before cracking onto sketching out the screens, I did another quick mood board of competitor apps and apps that shared the brand’s personality.
I incorporated the design elements I saw into the sketches, focussing on a clean and simple layout.
The first high-fidelity iteration was all about getting an idea about how the different design elements came together, especially the balance of colour and typeface hierarchy. A quick round of feedback suggested I should darken slightly the primary colour to offer a greater contrast with a white font colour. Therefore, I reset the colour palette based on a darker teal primary colour.
I fleshed out the screens more fully, making the onboarding screen particularly bold to draw people into the app but then scaling back to more subtle tints on all other pages so as not to distract the user and shift the focus to content.
I sought a second round of feedback, which was, overall, positive. Users found the design to be very clean and that the colour palette was well balanced and reflected the brand’s personality. However, there were certain design elements that needed tweaking:
- Spacing too narrow in boxed texts
- Shadowing not consistent
- Font size too small in some places
I addressed these points in the next iteration as follows:
- Increased the spacing in boxed texts
- Changed the shadow of the light teal background on the content-heavy Screen to a dark teal shade, rather than the initial grey
- Brought up the minimum font size to 14 and kept its use to a minimum, opting for 16 in the body text
Next steps
I shared my improved designs with my classmates and teaching staff. By and large, the distribution, ratio and use of colour were rated highly. Key learnings to take on board in a next iteration centred on incorporating more white space into content-heavy screens for better visual hierarchy, consideration of finger width for clickable buttons, and a splash of the secondary colour on the onboarding screens. Further, as a general point, the design could benefit from greater and consistent brand reinforcement throughout the content screens to remind the user of the brand and its image.
Challenges and key learnings
The greatest challenge for me on this project was getting the colour scheme right. As someone without a visual design background, I knew what didn’t work but couldn’t identify immediately how to fix it. I learnt from a classmate with a background in graphic design that the easiest way to do this is to not reinvent the wheel — take inspiration from colour schemes present in existing designs that fit with the brand’s personality. A great lesson for next time!
