top of page

BESPOKE PLANT CARE APP

project start

Process Overview

I used the Double Diamond Framework which I learned during my internship at an EdTech company as I saw it a proven and suitable process outlining the key steps for this project which I prefer over being unstructured.

I planned each stage within sprints which coincide within the different hand-in dates. However, due to unplanned occurrences wherein my user contracted Covid, it left me with little time than expected to user test and iterate the application.

Brief

Design and produce two screen-based visualisations of environmental or climate-change data for a specific user

1. Get information on the user and their needs concerning climate change.

2.  Edit insights by defining the problem the user is facing.

3. Explore different solutions and possibilities based on the user insights.

4. Prototype the most feasible and impactful solution by refining ideas.

DISCOVER

Research

Before beginning, I developed my aims for research to form the basis of my questioning. This was in reflection from the last brief in which aimless research led to random information gathering. Also, despite the brief being to visualise environment/climate data, I had my own goal to create something actionable as I felt more motivated in creating this.

Aims
  • What they currently know and want to be more aware of regarding the environment.

  • What they need from a product to help them be more aware and/or take action.

  • The lifestyle changes they’re willing to make towards helping the environment.

Research methods
  • User interviews via. in person, SMS and video-call.

  • User observation

  • Secondary data analysis

  • Competitive research

  • User testing

Secondary Research

I conducted user interviews based on these aims and developed key insights around food that we could delve further into. I felt I was able to come to this niche because I did not tell her it was an interview at first but had a more conversational exchange like we usually do when discussing topics on the news or books. With this I garnered attitudinal as well as behavioural data.

Key Insights
User metadata

Name: Thea
Age: 21
Education: Masters in Biomedical Engineering.

  • Extremely passionate about eating and cooking.

  • Likes the plant aesthetic and open to growing their own food.

  • Aware of the effects of climate change but finds global practices too entrenched within convenience and economic gain to make impactful changes for others. Thus, she prefers to tackle her own individual practice than trying to “change the world.”

DEFINE

Problem Statement

What’s stopping my user from taking action?

My user is a busy student also balancing a job as a data and software engineer and so she seeks a personal application that is swift and convenient...

To develop an application that would allow my user to take action locally in growing her own food whilst learning more about the global effects of food on the environment.

What platform is the most suitable?

My sister uses a tablet for its convenience and so I optimised this application for the 6th gen ipad. I was able to make conscious design decisions like, leaving a gap for the top bar and use exact sizing and absolute positions which made things much easier to develop.

DEVELOP

Secondary Research

I looked at data surrounding food production and transportation. The data I gathered were from trusted sites which we were introduced to in class as my user looks at data and reads science papers, she is conscious of reliable sources. I decided to use data concerning where food comes and their transport emissions as a perfect comparison for the personal visualisation.

User response

I showed these to my user and she liked how interactive they were but she also said the style reminded her too much of doing work.

from ourworldindata.org

Competitive Analysis

Now that I knew what kind of application to develop, I then looked into what’s already out there to see the key features of plant care applications using the Heuristic Markup from the Nielsen Norman Group which we learned in lesson. I had my user take a look as well – they preferred the Planta App. I realised whilst some things might not fit the best practices, they may actually be used as befitting the user.

Dislikes
  • Dark theme lacks personality

  • Overwhelming features

  • Not optimised for the ipad

Likes
  • Educational information.

  • Knowing when to do things

  • Optional info when needed.

Screenshot 2022-01-22 at 15.24.59.png

Planta App Heuristic Markup

Initial Ideas

How can could I turn these raw instructions into better visualisations a novice would understand and use?

Using a gameified experience – limiting the instruction into tasks that are essential for a certain day; not only would a busy user find time in their day to do it, they would be much more compelled to do so.

Screenshot 2022-01-22 at 15.31.14.png
Screenshot 2022-01-22 at 15.31.32.png
Screenshot 2022-01-22 at 15.31.43.png

Raw instructions taken from research on 1) Which plants are easy to grow at home 2) Can be grown indoors 3) User will eat what she’s grown.

Inspiration mood board

I also gained inspiration from UI designers on Pinterest where I share a board with my user. I also looked at Dribble which helped in developing initial sketches though I did find that analysing published apps were more helpful as they showed different user journeys and how features could be implemented. Whilst these are quite good, I also know what I am able to achieve techiccally isn’t as complex as these.

Screenshot 2022-01-22 at 15.39.18.png

Feedback

From the class, I realised the things I missed and could do to improve. This also helped me re-evaluate how I thought about my design choices, being prompted to...

​

  • Make the global dashboard more personalised

  • ​Keep things simple

Screenshot 2022-01-22 at 15.42.41.png

Personal visualisation

Screenshot 2022-01-22 at 15.43.43.png

Global visualisation

Prototyping

Using Figma, I laid out the features, focussing on the UI and UX design principles I learned from an EdTech Internship. I tweak different assets for a cohesive look, making minor adjustments as the sketches were quite thorough. I jump between Figma and the development tool I’m using.

Global Dashboard

Considering prior feedback, I only include global data on food concerning the average item in her weekly shopping basket so it’s more applicable to my user.

I recalled our lesson where we were taught how to evaluate data visualisations and so I asked these questions which were in accordance to my own user’s criteria:

 

  • Is it useful?

  • Is it beautiful?

 

From the lessons with Emily, the styles which showed data well and accurately were also prone to being “heavy” and looking at it was akin to “doing work.” I needed to create a balance of my user’s criteria which at times seemed to be at odds – she needed a dashboard but didn’t want it to look like a dashboard. Referring back to the secondary research, I tried to keep the integrity and basic structure of the graphs but created a visual style of being light and fun.

Plant Dashboard

How could I visualise the progress of plant growth in a fun and compelling way?

I was led back to a past project of building a productivity app which relies on the same logic of illustrating plant growth as the user’s progress so I knew I could achieve this technically. Coincidentally, this was inspired by the Forest App which was introduced to me in the first place by my user so I knew this was a concept she is already aware of and likes.

Screenshot 2022-01-22 at 15.53.08.png

Productivity App I created.

Assets + iterations

When developing, things change along the way so it’s never a linear process. I go back and edit different assets as I go – usually small changes. The images below show the different states of some assets.

Screenshot 2022-01-22 at 15.53.50.png

Text and image replacements depending on different variables like the day.

Screenshot 2022-01-22 at 15.54.05.png

Task incomplete.

Task complete.

Task pending.

Screenshot 2022-01-22 at 15.53.23.png
DELIVER

MVP

I am using Appgyver, a low-code development platform I had learned and used from a prior project publishing an app but I still had to re-familiarise myself with its new features. I wanted to develop the product to understand the nuances between design and development – recognising technical limitations and how to overcome them.

I understand what works in theory might be different when applying it. Considering the deadline, there were features I did not have time to think up the logic for. Currently, it is a basic MVP which includes only the main use cases. Whenever I was stuck on a feature, I would refer to the documentation or ask within the active forums.

Database Design: Firebase

Visual Coding: Logic using IF statements and HTTP requests

Appgyver Dashboard

User Testing

The good thing about this platform is that I can build and test it straight away on any device. We found minor bugs and different user journeys that I forgot to account for e.g. the timer logic I developed did not take into account the user forgetting to check-in on the day that they have to.

I worried more about things being functional and so in future, I would like to learn more about user testing methods that incorporates and encompasses all of design.

Class Feedback

From the last presentation, I was reminded to...

​

  • Be mindful of Affordances, in my case, false affordance.

  • Look into design accessibility rules such as checking contrast for better visibility.

​

I created lessons on visual design principles for my EdTech internship so for next time, I should have it up for reference instead of thinking I already knew it.

PROJECT END

Final Revision + Design Choices Explainer

Although my user isn’t going to be using this page frequently, it might get annoying switching orientations from portrait to landscape.

There was not enough user-testing to prove/disprove this. That being said, it might be more efficient to have the plant care dashboard landscape which would also show all the data in one go rather than its current state of scrolling.

I did not spend as much time on this section as I would have liked owing to time constraints, I bypassed building this manually – just using conditional images which meant there wasn’t much compelling interaction apart from a click.

With time befitting, I would like to learn more complex appgyver features.

Reflection

From...[insert person/ past event]...to... [insert action for change/revelation]

Start doing...
  • From watching the presentation sessions, to start discussing our work more, outside pre-meditated sessions to each other as other students have a variety of different skills and a lot of great ideas.

Keep doing...
  • From how I was educated on this brief, to keep expanding my knowledge by pushing for different programmes and techniques to use, not necessarily making things complex.

Stop doing...
  • From the user getting Covid, to allot time for rest and thinking to account for sudden circumstances which would otherwise thwart progress within the time-frame allotted.

With the luxury of hindsight, there are a few key insights I have developed to better my own design practice.
Through tackling the end-to-end development process, I have a better appreciation for all processes within designing a product. There were many limitations in time, Appgyver capabilities and my own knowlegde and skills which have caused me to re-evaluate and go back between different processes – re-thinking a feature, simplifying the app etc.

Despite initial reservations about creating something for only one user, I saw how designing extremely bespoke applications have led me to thinking more deeply about each user need.

From a lesson on giving feedback, I had a thought on different frameworks to use on myself. I remembered a quick method used in companies and one I included for swift self-reflection, in a productivity app I created, called the SKS process which I tied in with Marcus Aurelius’ general framework in his diary “Meditations” which I found generally followed the outline:

© 2021 by Heiken. Proudly created with Wix.com

bottom of page