“Buddy”

Overview

This project was a one week solo project within General Assembly Immersive UX Course. I was asked to design a mobile app for plants, where the user can upload photos of plants, meet fellow plant lovers, ask questions about illnesses in plants and gardening tips, read articles and blogs, and purchase plants.

As a recent plant-mom, I found this project quite interesting and valuable as I wanted to reevaluate current plant-based apps and create my own version.

Project Brief — Problem

All the content and a rough structure of each page were provided by the tutor so I could focus only on the UI and Layout.

I created 4 pages:

1. Onboarding — What the user sees when they open the app for the first time

2. Navigation — A menu allowing the user to move within the app

3. Product Display Page — Info page and “Add to basket” for a product

4. Article page — A blog post

Outputs

• Brand Identity
• Colour Scheme
• Typography
• Imagery Guidelines
• Documentation

As it was part of the visual design week, the main focus was the visuals and getting a more in-depth view of the Sketch, colour palette, typography, how to choose the different sizes of the typeface for the titles, headings and text. We discussed the different ways of creating a moodboard, how to get inspired from other sources.

Users and audience

Any age, gender with any ethnic background. Plant lovers, people that want to connect through their hobbies and activities, people that they want to keep learning and constantly educate themselves.

Process and what I did

Tools used: Sketch

I started with doing some more in depth research, on the competitors.

I then thought about our brand values, and created a colour scheme and the typography based on the values I choose to have.

My moodboard

I did a brand exercise within the class with the instructor. One of the exercises was to choose 5 words that will represent the brand values of what I am building through a massive list, alphabetically ordered. The words that I chose, based on the brief and the feeling I wanted to give to the brand were:

• Accomplishment
• Education
• Happiness
• Self reliance
• Support

The following step was to go into a Zoom breakout room with another student and discuss if what I designed until that point is visible through the brand values.

Brand Affinities

“Accomplished but not arrogant”

“Educated but not academic”

“Happy but not silly”

“Self-reliant but not lonely”

“Supported but not needy”

The basis of my Visual Design Toolkit was ready:

Layout

Iconography

Colour

Typography

Having this ready I moved onto recreating my lo-fi hand sketches into a Sketch file, I used the iphone 8 viewport as the size to design.

Challenges

Initially, I followed the colour choices of my moodboard, although I came across a few problems such as the contrast in between the darker tints of green and the specific font type, which made it harder to read. To overcome this problem, I tested the contrast through a Sketch plugin called Stark.

I found the onboarding page quite challenging, I had to reiterate many times nothing was working, according to the users I tested. I wanted to make sure the app was easy to use, and accessible to everyone regardless of age or gender. Plants are something beautiful that almost everyone is interested in, that’s why I chose neutral colours. Green was the main and baby pink secondary. I decided to use masking and a funky 80’s-90s background. As plants are happy and happiness is also one of the brand values.

Style guide

Colour scheme

Typography

Outcomes and lessons

The most valuable lesson was how to keep consistency throughout the pages that I am designing. How can the user see all the brand values in every single page? I realise that documenting the design system from the very start, the complete set of design standards and principles, along with the toolkit (UI & code components) was extremely helpful for myself as I will remember through the process the stages I have been, but also if at any point I had to transfer my work to another designer or developer they need to have clear understanding of everything I did until that point. For this reason, If I could do it again I would keep my Sketch file clean and tidy with naming all the layers, boxes, rectangles icons. I would also be consistent with spacing from the start, create type style and colour scheme to save serious time of your project.