In the summer of 2020, I joined the 10kdesigners community and was assigned my first design problem. I had to design a landing page and an e-commerce app for gardeners.
A year later, this is my attempt at recollecting my thought process and what I could have done better.
Problem Brief
Rule 34.5 of the internet: If it exists, there’s a niche for it. I made that up, but I think it’s true to an extent. For example, gardening is something that brings joy and calmness. But since it appeals to a small section of people, it’s a niche.
What if gardeners could connect through a virtual community with like-minded people and share how their jade plant is doing or discuss what kind of tomatoes are the best? The problem statement is as follows:
There is a startup that has an online community dedicated to gardeners all over the world. They wanna build a landing page and a shopping experience for its users. Design a desktop landing page and a mobile e-commerce app.
⠀⠀⠀
My familiarity with gardening
My experience with gardening is limited to sprinkling plants with water. Designing for gardeners with no prior experience or knowledge of gardening is risky. So to get familiar with the niche, I browsed existing communities, forums, stores, youtube videos, articles, and websites.
Insights
- People in the communities love sharing. A big chunk of all posts are photos of how their new plant is doing.
- High intent users browsing the forums come to seek advice and tips. Everyone is willing to help.
- Casual browsers are in search of new ideas.
🤔 What I could’ve done more was to talk to actual people in the communities. Possibly 1-on-1s too. Primary research can bring insights from people that secondary research can’t.
⠀⠀⠀
Patterns and flows
A design pattern is a set of recurring components and practices used to solve one problem. The goal here is to recognise such recurring patterns across other apps.
The design pattern of e-commerce apps
If an app has an online shopping experience, it likely follows the design pattern below or some version of it. There’s no need to reinvent the wheel. The mental model is wired into the brains of regular shoppers.
I checked out other e-commerce websites to see what gardening items are sold and what information is prioritised. Following patterns is a baseline; it suits just about any user. But to suit a niche, details are important. How exactly are these gardening products sold?
Insights
- Combos and kits are popular products.
- There’s a gifting category on almost all websites.
- There are special categories like air purifying, low maintenance, etc.
- Some websites have well-written guides and caring tips.
🤔 What I could’ve done at this stage was to figure out the user behaviour as well. The community forums were a great place to look for users expressing their pain points, the items/features they wish for, how frequently they buy online, what they buy online, etc.
The design pattern of landing pages
When the priority is conversion, the focus needs to shift to well-written copy and observing practices and components that make up the landing page. Landing folio is one great resource I used.
⠀⠀⠀
Information Architecture
It's figuring out what goes where, with what, and with how much importance.
Categorisation
I saw that gardening products are both broad and highly decomposable. In addition, parent categories can be broken down further at least twice. So, I kept three layers for the categories.
For instance, General Supplies > Seeds > Fruit seeds. It’s just enough and doesn’t confuse the user with the category-ception.
Then, I broke down the information into entities and their attributes. It makes up the skeleton of the whole app. With such UX diagrams, creating user flows and wireframes is much easier.
⠀⠀⠀
Wireframes
Following the user flow and referring to the information architecture above, I sketched out the screens below. I also kept the things in mind that I discovered in the research phase, like flashcards, kits, and specific product uses.
🤔 I could’ve iterated more over the landing page wireframes. Since the sketches were low in fidelity, I ended up iterating over the visual design a lot instead. It took a lot more time in Figma than it would’ve taken with a pen and paper.
⠀⠀⠀
Visual Design
Visual Design was fun as I also tried to design the brand and the ‘vibe’. The complete visual showcase is up at Behance.
⠀⠀⠀
Final thoughts
If you’re confused in picking a UX problem to solve, pick a niche and start designing. I hope there was something new to learn for you. Thanks for reading :)