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:
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.
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.
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.
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.
Check out the complete prototype here.
Challenges and Learnings:
- 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.
- 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.
- 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.
- 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!
