Overview
Patch Plants is a London-based plant centre with the mission to bring joy to people with plants through education. In this case study, I break down my process and elaborate on how I went about integrating characteristics from physical products into the digital space.
Problem Statement
How may I deliver an informative introduction to aspiring and current plant parents through design past a screen?
Final Onboarding Screens
Table of Contents
- Overview
- Final Onboarding Screens
- UX Research
- Benefits for Users
- Understanding Patch: Content for Design
- Ideation
- Transcending Physical to Digital
- Putting Shape and Material to Use
- Dipped Pot
- Market Testing
- High-Fidelity Prototype
- Design Critique → Improvements
- Constructive Criticism is Key
- Style & Components
- Lessons Learned
Timeline & Role
UX Research
Benefits for Users
For this case study, I decided to research some principles to follow since this is my very first onboarding concept.
| Question | Answer |
|---|---|
Reliability and compassion. | |
Users must be presented the three main key features that the brand drives to learn about what they can gain by joining. | |
Might not be interested in taking the time to learn about the information given. | |
Understand what value you provide to customers, and maintain it.
Shift the focus from selling to educating. When customers can learn from a business, this builds trust so when customers need to buy a product, they know who to go to. | |
Understanding Patch: Content for Design
To begin this onboarding concept case study, I began my research with the relationship between people and plants then the brand to get a deeper insight of their mission.
Ideation
Transcending Physical to Digital
After learning about the appeal of plants to humans, I started to appreciate the importance nature plays in our daily lives. Being inspired by my findings, I began to write down ideas to answer the following question:
Putting Shape and Material to Use
In order to solve the problem and achieve my goal, I turned to gardening accessories to look for inspiration. For this stage, I focused on purpose, shape, and material.
Dipped Pot
The pot has a shade difference that could also be used as a divider. This made me think about balance and flow so I scribbled ideas of physical elements I could play with. The pot shape could be used to mimic a container and water could represent information or movement.
Glass itself is transparent and fragile
Much like plants, the health and state are visible and clear. This influenced me to integrate glass morphism in my design.
Market Testing
Before jumping the gun, I decided it would be best to rapidly ideate low-fidelity designs using the ideation technique Crazy 8. Afterwards, I sent it out to friends and family (one vote each) to choose which design they preferred.
For Design 7, I decided to minimize the animated elements and focus on the message and sophistication. In the end, I went forward with Design 7 because it was on brand and is a better approach to achieving my goal due to the magnification of the message and use of shades.
High-Fidelity Prototype
Design Critique → Improvements
Constructive Criticism is Key
For what I thought would be my final version was actually my third. I had a gist that the text might be too small and that the still background may be dull but I wasn't sure of how to go about them. I decided to attend a design critique and received valuable feedback including:
- The body text was too small, difficult to read
- The balance and hierarchy don't balance enough for the important information to stand out
- The still background is a potential distraction. Since the visuals are so similar, users may forget what the previous message
Key Changes: Final Iterations
- Changed the shape of the glass morphism base to balance the new left alignment of the logo, description, and body text
- To bring more attention and encourage users to follow the flow, I added:
- A divider to create a defined hierarchy
- Designed the background to move when changing pages to bring more awareness/feedback of movement
Since plants bring peace and ease, I wanted to create a specific interaction experience. I tried to find the right pace so it would be slow enough to create a smooth heavy-like flow to mimic the movement of water but fast enough where it wouldn't feel like a drag.
Style & Components
My end goal from the beginning was to emit a warm and welcoming onboarding experience for current and aspiring plant parents. I ensured to create this by designing with intention. After the research stage, I decided to use specific elements such as glass morphism and a deep opacity to embody the physical material and textures to reflect the build of the gardening components. Integration of curves along with shapes mimicking the movement of water enhanced the interface bringing it closer to life.
Lessons Learned
This was my first onboarding project and one of the most important lessons that I've learned is to take more time wireframing. I underestimated the importance to break elements down and weigh options. Because I didn't spend enough time drawing out details, I spent way too much time designing a medium to high-fidelity prototype.
Other lessons learned were:
- The earlier you ask for feedback, the better.
- Use pages on Figma to separate elements and actual screen designs.
- Organize and name your elements.
- Do not outline text on Figma.
- Spend more time on wireframes.
For my next projects I will definitely keep these lessons in mind and take more time to pre-high fidelity to consider other options and test on real users.
If you have any comments, please reach out at jhozatenorio@gmail.com.
Feedback is always welcome. 🙂