Grow4u- UI/UX Case Study on Gardening E-commerce app

Hello, Welcome to my first ever Case Study! This Case Study is a part of 10kdesigners Masterclass Assignment. I’ll walk you through my process and design decisions I took while designing this app.

Throwback to when it all started

If I look back I had a vague idea about UI/UX design. I just knew that the UI part is about designing the apps and for UX there’s some Design process that needs to be followed to design a website/app. But after joining the Masterclass my whole view changed about UI/UX. I am amazed by the depth it had and there’s just so much to it that I didn’t know before. I was learning new things daily and not just about UI/UX design but other life skills as well. I remember the first day when Abhinav said “It’s not gonna be you talking to me but you interacting with all 30. And I want you all to get along” At first I was a little intimidated with other masterclass members but there was just so much to learn from all of them. And yes I made some really good friends. Okay, then! Let’s get started because I just have much more to say but it could be another blog/article.

Introduction:

We were given the assignment to create an e-commerce app (niche-gardening) for the landing page we previously worked on. I had to apply all that I learned from my previous assignments and tasks which included

  • Designing screens in Figma
  • Conducting Research
  • IA and other parts and concepts of the design process

Problem Statement:

The goal was to create a mobile e-commerce experience for users to browse the catalog, find items they’re looking for, initiate checkout, and complete the purchase.

Research:

Mobile Screenshots (App flows and Categories)

Competitive Analysis

I started with going through other competitive apps to see what kind of products they sell, the categories, and the flows which gave me a rough idea about how I was going to start and the things I needed to consider. I also went through the app reviews to see what users had to say about the product, the difficulties they faced using the apps, and their overall experience. Then I started mapping the user flow in my sketchbook.

Target users

I first wanted to see who will be using the app and why would they prefer shopping online.

According to the 2019 National Gardening Survey performed by the National Gardening Association (NGA), millennials account for one-fourth of all the money spent in gardening in 2018.

The survey reveals that 38% of 18–34 year-olds plan to spend more on lawn and garden activities in 2019, compared to the overall average of 29%.

18–34 year-olds accounted for a quarter of estimated lawn and garden spending in 2018, despite having lower household incomes than others and being more likely to live in an apartment or condo. Household participation in lawn and garden activities among younger households largely matches other age groups, but has grown at a higher rate than others since 2014.

Time to decide the products and categories:

I listed down the categories and their possible subcategories that I could include. Along with gardening essentials such as tools, fertilizers, soil, plants, seeds bulbs pots, etc plant decors were also popular among the urban population. Also, indoor gardening is common in urban areas due to lack of space. I observed that people in cities tend to buy plants which doesn’t require much maintenance. Also, millennials are most hyped up about house plants.

These are the articles that I referred.

Also after going through other competitive apps, I realized that some categories were similar which could make users confused and difficult to find their desired product.

After considering above mentioned scenarios and cases I finally came up with 7 main categories: Gardening tools, Plants, Soil and Fertilizers, Seeds, Plant Decors, Watering Can, Pots, and Planters.

Deciding the screen flows:

I presumed that I will have to design many screens considering the edge cases. So I decided to layout a simple flow that will cover all the main screens so that other screens could be designed later based on the edge cases.

Wireframes:

Before starting with the wireframes I went through Human Interfaced Guidelines for IOS apps.

IOS guidelines

This was the hardest part for me to structure the layout. Going through websites like UI Sources and Mobbin helped me get started. You get inspiration from other real apps that help you visualize the layout for the wireframes. I started sketching screens iterating on each screen sometimes sections by sections for navbars, tab bars, etc.

Paper Wireframes

You will be tempted to jump right away into Figma. I did the same in my previous assignment while designing for a landing page. So this time I took my sweet time sketching on paper and it really saves your time and you can quickly sketch the ideas you have in your mind. Trust me!

Made some High fidelity wireframes on Figma after that.

High Fidelity Wireframes

Yay! Visual Design:

It’s time to make things pretty with some colors and typography. This is actually my favorite part.

Edge Cases:

Add to favorites

Add to favorites option if the user wants to save it for later purchase also favorites icon on the navbar to easily add items from favorites to cart.

Login

What if the user just wants to browse the app. Login at the start of the app can be frustrating. I kept the ‘Skip’ option so that users can skip login/signup at the start. Or the user can also choose to quickly login through Facebook / Google account.

Search page

The user will see the products related to the typed keyword and can also choose from the categories below. A ‘Cancel’ button to cancel a search easily.

Directly add the product to cart

Users can directly add the products to the cart without going to the product details page. This will be most helpful if the user wants to add the products that he must have saved in favorites for later buy.

To check the estimated time for delivery

The user can check the time for the product to get delivered on the product details page itself just by entering his/her pin code. He will not have to confirm the product to see when it will get delivered.

Branding: Why ‘Grow4u’?

I came across this amazing quote by Jenny Uglow

We might think we are nurturing our garden but of course it’s our garden that’s really nurturing us” -JENNY UGLOW

It’s true, what we give is not much than what we get from plants. It provides so much value to people’s lives with so many benefits such as nutrition, healing, air filtering, stress relief, and even shelter. You are actually growing it for yourself! So the name ‘Grow4u’.

Prototyping:

When I finished Prototyping I just stared at my Figma file for too long thinking “Is this the way it’s supposed to look?” OMG! It looked so scary. It couldn’t get more complicated.

Figma Prototype

Check out the complete prototype here.

Challenges and Learnings:

  1. This was my first time designing an app. There were so many things to consider and a lot of flows. I first thought it wasn’t a big deal and I’ll be able to finish it in a week but then I wasn’t able to deliver it on time. Took me an extra week to complete.
  2. I did many iterations for some pages but one or two for the later pages. I think the design could be better and more efficient. Next time will to more iterations.
  3. I think the outcome was decent. I was really nervous about how it will turn out. But I think there’s more to improve and learn. Retrospect on things that didn’t go well and do better next time.
  4. Doing this assignment I got to know things where I lack and the things I should focus more on.

Thank you for reading!

I hope you enjoyed this case study. Your thoughts and feedback are welcomed. You can connect to me on LinkedIn or on sampada.ux@gmail.com

Special thanks to Abhinav Chhikara and Mayank Khandelwal for their constant feedback and guidance.

Hey and don’t forget to give claps! Just hold the clap button and there you go!

--

--

--

Product designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Logo — How to Create & Add it to your WordPress Website

Industry Acronyms Every UX Designer Should Know

How to Build Habit Forming Products

Cregital in 2017

5 User Experience Goals Every UX Designer Should Set.

5 User Experience Goals Every UX Designer Should Set

UX Lessons from the Delhi Metro

Simple Project Management Tool

Is logo design important? And Why?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sampada Sherlekar

Sampada Sherlekar

Product designer

More from Medium

| Case Study #2 | Ecommerce Website

REDESIGN OF THE GTBANK MOBILE APP (IMPROVED INTERFACE AND USABILITY) — UX CASE STUDY

Case study: Redesigning the homepage for a charity website.

Bit by Bit’s banner which interacts with mouse movement.

Case study: Gathering clients requests

Testing the Low Fidelity prototype (on paper) with a user.