INTRO TO UI/UX: GREEN THUMB 2019

For those of you who are visiting my portfolio site for the first time and haven’t read any of the corresponding blog posts, Green Thumb 2019 is the new and improved version of this Green Thumb project. While taking an Intro to UI/UX course, I decided to redesign it as the course project that was to be completed over 6 weeks.

You can read all about my adventures on creating user personas, a design & implementation guide, a storyboard, and last but not least, the first phase of the mockup.

In fact, I recommend opening up those blog posts and reading them as you’re moving through this page. It will give you a more in-depth idea of my thought process and how exactly I got to this point.

Also, it might be a good idea to have the InVision prototype ready as well in case you want to click through the screens yourself.

 

Project Objectives

  1. To design a user interface and experience that is easy to navigate and informative without look cluttered.

  2. To take the three screens from the original Green Thumb project and expand on them to create a complete, high-fidelity prototype of what the Green Thumb app would look like if it were launched.

 

Log In & Onboarding

The concept of Green Thumb is fairly simple, and while I already had a head start from last year’s three screens, it didn’t make it any easier.

After receiving feedback from the course instructor on the photographic backgrounds for the Launch Screen, Create Account, Log In, Questionnaire, and Mentor/Mentee screens, I added in the white background.

I was told that having text on photographic backgrounds can lead to accessibility issues if it’s not done properly. While this isn’t a real app that has been launched out into the world for people to download and use, I didn’t want that to be a reason why someone wouldn’t use this app, hypothetically.

In the first iteration of Green Thumb, I mentioned in the notes that I should have left an option for users to log in without having to connect to Facebook or any other social media account. I took that into consideration this time and simply just had a log in screen that only required users to use their email addresses and password.

The questionnaire was mean to give the Green Thumb team a way to not only assess a user’s comfort/experience level with plants, but to be able to match them with another user who may be more or less experienced than they are.

This is where my user personas come in. Taylor doesn’t have the best track record with plants and she wants to learn how to improve how she takes care of them. When you’re navigating through the InVision prototype, you’re being put in Taylor’s shoes.

By matching her with an experienced plant lover such as Rodrigo, Taylor can reach out to him when she needs any guidance. On the flip side, this pairing gives Rodrigo a chance to share the information he knows and meet new people.

While you can’t select the answers on the questionnaire (I spoke about it in the Phase 1 mockup post), you can choose to either complete it at another time by skipping ahead to the main page or immediately going to the Mentor/Mentee screen to see who you are paired up with.

I wanted to provide the option to be able to choose another person if the user finds that their current mentor/mentee isn’t the best fit for them, but let’s say that all a user would need to do is email the Green Thumb team.

 

Main Screen + Articles

The main screen of the app shows the latest four articles that have been written either by the Green Thumb team or individual contributors. (In this case, I did research and summarize articles in my own words for the ones shown.)

When you’re viewing the InVision prototype, you’re able to scroll through the article as well as navigate through the ones shown by pressing the back and forward arrows shown by the article titles.

Setting up the artboards for the scrolling articles wasn’t something I did right away. I had the idea after I had already put all of the content in and to be honest, I wasn’t even sure if it was something that could be done until I consulted Google.

NOTE: The Menu and Search icons are accessible from all screens in the app minus the Launch, Create Account, Sign In, Questionnaire, and Mentor/Mentee ones. If at any point a user wishes to go back to the Main Screen from the screens I didn’t mention in the previous sentence, they can just tap on the Green Thumb text at the top of the screen to be directed there.

 

Low + High Maintenance Plants

Both the main screens for Low Maintenance and High Maintenance plants show close up photographs of the plants available. When each thumbnail is first tapped, the name of the plant appears as an overlay. On the second tap, the user will be lead to the Plant Detail card of the corresponding plant.

Like the articles before, each original Plant Detail screen would have allowed the user to be able to scroll down it to view the information, but changing the Plant Detail screen to the cards made such a huge difference. It looks more polished and appealing than the original screens did, and it was also a lot easier to organize and read the information provided.

Yes, it did increase the amount of screens that I ended up having to put together and upload to InVision, but it’s worth it.

Each plant card is broken down into two categories:

  1. Things to Note - interesting background information about the plant.

  2. Care Information - what a user needs to know about the day to day care of the plant.

Navigating through the cards can be done by selecting the circles at the bottom of the card. The current card a user is viewing will have a black fill. Once the user has ended up at the last card for that particular plant, they’ll see a button that is labelled “Source”.

This takes them directly to the article the information is from. It was a way to cite my information as well as give users a chance to view all of the article, since I was only able to take snippets of it.

 

Messages + User Profile

Users are able to send and receive messages from other users on the Green Thumb app as well as the support team.

When a user taps on the + icon, the New Message screen is brought up, and the iPhone keyboard pops up when the grey text field is tapped. To view a user’s profile, there is an option to tap on the profile image beside the sender’s name.

The user profile will either have a tag that says Mentor or Newbie to be able to distinguish between the two on the app. The Mentor tag is dark blue, whereas the Newbie tag is a lighter blue.

It also shows the user’s location and their answers to a few questions. It’s optional to have that information filled in and can be edited by pressing the pencil icon on the profile page to go to the Personal Info screen.

 

Search

 

Tapping on the magnifying glass icon will bring users to the Search screen. It was important to me to be able to have a search function that would let users search by a plant name or characteristics, as I hadn’t done that with the previous iteration.

I had to take into account that users like Taylor (or myself, if I’m being honest) may not know the name of a plant but know that the plant had green leaves or yellow flowers, etc.

In this example, the search field is already filled in with "green plants”. Tapping on the Search button brings up a result list of plants that, in fact, are green. It provides the name of the plant as well as an excerpt of the card information.

Selecting the name or excerpt will take the user to the detail card for that plant.

 

Settings

 

Now to get into the nuts and bolts of this operation.

It’s a pretty straightforward Settings menu, right?

The user is able to edit their personal info at any point in time. Choosing the “Edit your info” pencil icon will trigger the iPhone keyboard to pop up from the bottom of the screen.

The buttons on the Push Notification page can be toggled on and off by pressing the green circles.

 

Privacy Policy + How to Close an Account

In my quest to have an app that was very fleshed out, I created screens for FAQs, Terms & Conditions, Privacy Policy, and an option to close a user’s Green Thumb account.

The FAQ and Close Account content were written entirely by myself, and when it came to the Terms & Conditions and Privacy Policy, I used free online generators for both. Users can scroll through the first three screens if they want to read all of the information. (Most won’t. Heck, I skimmed through most of it, to be very honest.)

When the Close Account button is tapped, the user will then be taken back to the app’s Launch Screen.

 

Takeaways

  • Taking an app from concept to a high-fidelity prototype in 6 weeks was a very good lesson for me to see exactly what this process looks like. Yes, I had read about user personas over the last two years of self-learning UX/UI design, but creating them is completely different than just reading about them. I had to get into a persona’s head or shoes and think, “If I were Taylor, what features would be important to me? Would Rodrigo do this? Would he want that feature?”

  • It’s not a deal breaker if you’re not the best at sketching, but it is important to be able to have written information that breaks down everything clearly.

  • I compared myself to my classmates A LOT throughout the class and in the end, I realized that I shouldn’t have. We were all there for different reasons. I felt at the time that I went way too far with this process and I shouldn’t have been as in-depth, but I know now that it was just right. My goal was to use this as a portfolio piece and that goal has been achieved. Could I have made things a little bit easier on myself? Absolutely.

  • While I didn’t end up completing this project in ProtoPie, I wish I could have have, if only to give people viewing the project a chance to customize their experience going through the app.