Know to Grow
A 4-Day visual design challenge for a concept community gardening app.
Overview
This was my first visual design project on the General Assembly UX Immersive course, and I completed it during a 4-day sprint.
The Brief:
To design the UI for these four screens:
- Onboarding
- Navigation
- Content page
- User profile
Branding
Brand values and identity
The first stage of this project was to define the brand image. So, I began by picking the brand values. Then, by using a range of brainstorming techniques, such as brand positioning and personality traits, I decided on five keywords that would define the app:
- Simple
- Community
- Caring
- Natural
- Modern
I then explored these keywords in a broader context; how do these words make me feel? What first springs to mind when I hear these words?
A word association map is an excellent tool for exploring and going deeper into these creative thoughts.
By making some brand comparisons, I could see how other well-established companies reflected their brand identity through their visual design.
To keep track of my creative ideas, I created several mood boards and iterated them many times. This ensured my creative direction was aligned with the brief.
Creating the visual identity
I chose this colour pallet to reflect the app’s keywords. The black, white and grey represent simple and modern. Whilst green and soft cream represent natural and caring.
To give a more modern, welcoming feel, I chose a sans serif typeface.
Design
Wireframes, logo and UI
I sketched out the four low-fidelity screens, to start thinking of the layout.
Creating the High-fidelity UI
Logo and three critiquing sessions
Now I had the rough layout, I developed the sketches into mid-fidelity (mid-fi) digital wireframes on Sketch. To start adding the visual design, I created a logo that aligned with the brand values and was appropriate for the app's demographics.
I began adding colour to the onboarding page, and once I was happy, I then transferred the design onto the other screens. This ensured the visual design was consistent. After completing my first set of screens, we had the first critiquing session.
The key insights were:
- Not enough contrast
- The colours were dull.
I asked myself:
- Does the visual design make me think of the brand values?
The answer was no. I had lost my focus when iterating the screens into hi-fi. It was a pivotal moment, where I then created a different version of the onboarding page to get back on track.
I iterated the design by adding a bold background and contrasting buttons on top. In the second critiquing session, the key insights were:
- The screens didn’t align with the brand's keywords (simple, modern)
- The background was too bold.
So from these insights, I thought about the keywords and how to reflect the brand in the visual design. I added some text to show users what they could do on the app and pared back the design to give a simple, more modern look.
Final Screens:
In the final Critiquing session, these were the key insights:
- There is no explanation of what ‘grow points’ are
- Users felt like the drop-down tabs should stretch across the full width of the screen.
- Too much white space
There were also many positives:
- Great colour scheme
- Feels personal
- Intuitive
Final Reflection
Taking this feedback on board, I would like to create a pop up for when the user hovers over ‘grow points’ to show a description. Also, changing the tabs to run across the full width. I like the amount of white space, so I would like to get more critique to see whether it is too much.
Next Steps
- Do some user interviews, to explore what value users would want to get out of using this app
- Add features to enhance the user experience
- Design more screens to create a flow
- User testing and iterating
- Create a prototype
Thanks for reading. If you have any questions or want to reach out, you can find me on LinkedIn.
