Gardenio Onboarding Design Challenge

Fall 2019

This project was done in the fall of 2019 for a rapid prototyping class. We were provided a set of colors and a logo, then were told to design the onboarding process for their application.

My Process

Because this is a service that helps to foster home grown plants that you can eat, I wanted it to feel as natural and easy to use. To accomplish this, I generated medium fidelity designs that I then user tested with people who would be interested in using an app like this. Because it was a local Austin company, I chose to use people from around the city.

Initial Designs

Splash/Prelogin screen

The goal for the splash set of screens was to provide context as to what Gardenio is so that it can entice users. The placeholder graphics were meant to tie into the design system, but as I am not a graphic designer, they stayed as medium fidelity placeholders for this project.

Visual Portfolio, Posts & Image Gallery for WordPress

Login Screen

I proposed a phone number and one-time-password based login as it is one of the easiest ways to get people re-logged into your application. I also added social sign in buttons (in this case, Sign in with Apple) to keep the application accessible to people who do not use phone based authentications.

Visual Portfolio, Posts & Image Gallery for WordPress

Account Creation

This flow was broken out into a stepped format to ease the burden of the user being overwhelmed with many different fields. The plant containers at the bottom grow whenever you move to the next step of the progress to signal to the user that they are getting closer to finishing creating their account. Early feedback was positive for the plant indicators as people liked to know that the process was short, but they also liked knowing how close they were to finishing.

On the last screen, the users are presented with some fun text and a big version of the plant icon to let them know that they have finished making their account.

Visual Portfolio, Posts & Image Gallery for WordPress

Purchase Flow

The purchase flow was interesting to look into because the company’s website already had color coded images of their products broken up into different categories (savory, sweet, etc.) but the background colors did not match the sub categories. I tried to solve for this by using the color on the product detail page but this was not an accessible solution and would’ve required more user research and design iterations to find an optimal solution.

For the payment screen, I chose to use native payments of Apple Pay (and Google Pay for Android) as those are the most convenient ways for people to checkout. This could be expanded on in the future to make use of Shop Pay as they are a carbon neutral payment network, which is in line with the Gardenio mission.

Visual Portfolio, Posts & Image Gallery for WordPress

What I learned

At the time of this project, I was just getting my feet wet in the interface design space and I think that this project could have been way more polished given time and experience. Working with preexisting product images is harder than I had imagined as you have to coordinate the colors, which may not match other categories. The gold and pink colors also do not provide enough contrast for accessibility here and there should be category icons associated with it as well (or in the stead of). This project was a lot of fun to learn about plans and to dip my toes into nature-based design.