Brief #2: Sustainability Victoria Grow your own food mobile app

Milla Zhai
5 min readApr 24, 2021

Milla Zhai (19785231)

Client Brief and Overview: Sustainability Victoria

Australia’s high rate of urbanisation means that most people living in suburban areas do have that connection between food production and consumption. Lack of understanding and appreciation on growing your own food.

However statistics are showing that more and more aussies are starting to grow or intend to grow a garden in their backyard. The main focus in needing education (based on geographe location and weather conditions) as well as providing recipes on who to utilise the ingredients grown.

Create a mobile app for Victorians who are climate conscious, or simply considering growing their own food. It’ll have 3 different concepts (Aesthetic, Accessibility and Context) that’ll each specify requirements needed for each concept. Keeping with the UI design language of Sustainability Victoria.

The first steps undertaken was the 7 step framework that would outline, how to achieve a successful app design by specifying out goals, prioritising certain aspects, outline the target audience needs and wants, rough sketches of screen designs and then finally how to measure success.

My focus on accessibility was to provide the app for visually impaired users, more specifically those with low vision (a permanent vision condition that makes everyday day activities a struggle to complete).

My initial ideation sketches consisted of using colour to contrast different/new sections so that the user can identify when it’s moved on.

Initial Planning

My rough sketches were incorporating design, and ways to make it low-vision friendly. From my research, having the ability to increase text sizing, high contrasting colours and being able to blow up certain aspects (like ingredients into pictorial). From there high fidelity wireframes were produced.

Features:

  • A centralised design, more direct for the limited line of sight.
  • Larger text and focus on buttons having the an icon next to it to signify its purpose (back + arrow)
  • Assuming they’d utilise there other sense, focus on audio. Video tutorials and ability for app to read out the words (icon of volume)
  • Really simple design, hamburger menu as it made for more white space.
  • Consistency: Most text was central aligned (again more direct in line of sight) and only headings were place in the left align to distinguish that difference.
Flow
First lot of wireframes (too much) . Also didn’t correspond to what was specified in the brief.
New Wire frames, need to use less colour
4 Chosen Wireframes

Then redesigning the wire frames in compliance with the brief I used a colour palette tool to make the design simpler, easier to understand and enlarged the recipes pages to 6 individual screens to showcase each step.

Aesthetic concept was to follow the Photon design language of Mozilla Firefox. A focus on illustration, iconography and vibrant colours..

The second design concept must use the Photon design language (also called a design system) developed by Firefox. This design language focuses heavily on illustration, iconography and vibrant colours.

Feedback from Wilson was to pretty much redraw the wireframes so they had a better flow and label them as well. And to also take a step back with the design and keep it more simple/minimal. I also redrew my wireframes to accommodate for more screens as I misjudged at hoe many I needed.

Flow

Features:

  • rounded corners, more easier for the eyes to focus on, doesn’t seem ‘bright’.
  • home menu at the bottom, incorporating the iconography of firefox.
  • strong imagery focus, use less words as pictures and buttons can tell the story.
  • Changed the coluor palette to a contrasting purple + yellow.
4 Chosen Wireframes

Context was focusing on people that live in Victoria’s CBD or surrounding dense areas.

Reverting back to the design language of Sustainability Victoria I had a peruse on their website to see how they’ve designed it. It was as simple as it gets, a strong alignment and rounded square buttons.

Flow of App

Following suit, I chose 4 wireframes that focused on being personalised to their persons location as well as the perspective of someone who has never used the app. Again relying on illustrations to add in more personality to the branding.

4 Chosen Wireframes

Features:

  • Picking out location + season when the app is initially downloaded.
  • Shows up food that is available or best grown depending on season/weather.
  • Ingredients are also more apartment friendly, taking into space considerations.
  • The ‘in focus’ page design uses an apple watch like ring design. If the user was to document the days they water, fertilise, shade care the app would be able to respond in the best way possible on how to take care of the app (rather than specifying how to actually plant it).
  • Calender option, adding on the days/reminders on when to follow the conditions of the plant (water and fertilise).

Reflection:

In terms of design, after reworking them all, I think context would have the best chance of being with the brief. It focuses on plant care the most, as that probably is the more sole purpose of downloading the app and the suggested recipes are an added bonus.

Time frame wise, it’s the one concept that the user would probably spend the most amount of time/keep coming back as it’s plant tracker option makes the user next step known.

Disclaimer:

This isn’t an actual app, but merely a prototype for Curtin University for the unit ICTE2002.

--

--