NABK
About
Contact
Resume
Houseplant
Healer
Project Background
Project Duration
April - May 2024
My Role
Sole UX Designer, Researcher, Writer & Tester
The Problem
Identifying problems with houseplants is often very difficult, especially for novice gardeners. Effective gardening requires a reliable source of information, and also some note-taking.
The Goal
Skip To Final Prototype
Check out my process for this project if you wish to, but if you want to skip directly to the results; check out these prototypes to see how it turned out.
Desktop Prototype
Tablet Prototype
Mobile Prototype
Research Phase
Preliminary Research On Potential Users
I talked to gardeners and looked at information available online to judge the target audience for Houseplant Healer. I also went through the products of some direct and indirect competitors to see what needs are being met and where there is still work to be done. The following are the personas I built based on my findings, and their pain-points.
User Personas
Sergio
Skilled Gardener
"I don't need a tool that tells me what I already know, I need it to diagnose and resolve issues that I can't by myself."
Rohini
New Gardener
"I find it difficult to even tell different plants apart. How do I take care of them?"
Freya
Produce Farmer
"The more plants you have, the more they are worth to you, and the harder it gets to manage them"
John
Ecologist
"Bio-diversity is in decline worldwide, and it's our fault, we have to take responsibility and provide spaces for plants and animals in our backyards."
User Pain Points
01
Knowledge Gaps
Plants can have very specific care needs depending on species and may vary with seasonal changes, this makes it hard to care for them, especially for novice gardeners.
02
Diagnosing Problems
Even identifying a plant species can be contentious, a sick plant can be even more tricky to diagnose. Professionals to deal with such issues are not readily available for a reasonable price.
03
Scheduling & Noting
As the number of plants under a gardener's care increases, it becomes harder to simply remember when a plant was last watered or fertilized.
04
Lack of Resources
Sources of information regarding plant-care can be sparse, conflicting, and riddled with paid promotions.
Early Design Phase
Site Map
Desktop Wireframes
Plant Profile Page
My Plants Page
Tablet & Mobile Wireframes
Plant Profile Page
My Plants Page
Plant Profile Page
My Plants Page
Low Fidelity Prototypes
Desktop Lo-Fi Prototype
Tablet Lo-Fi Prototype
Mobile Lo-Fi Prototype
Usability Study 1
Usability Study 1 Details
Study Type:
Unmoderated Usability Study
Location:
India, Conducted Remotely
Participants:
5 Participants
Length:
60 Minutes
Study 1 Findings
01
Back Button
Most users preferred to use their browser's controls for navigating back to a previous page, hence the interface could be made cleaner with one less button.
02
Memorial Page
The memorial page was confusing users. They were not sure why deceased plants needed a page with a separate control on the header itself, it was cluttering up the UI.
Late Design Phase
Refining the tested Lo-Fi layouts
After testing the lo-fi prototypes, I had some insight into what needed improvement in terms of layout. I made the changes the users needed with the layout and then moved on to add details for the first high-fidelity screens, complete with colors, images, micro interactions, and more detailed copy writing.
Desktop Mockups
Plant Profile Page
My Plants Page
Tablet & Mobile Mockups
Plant Profile Page
My Plants Page
Plant Profile Page
My Plants Page
Usability Study 2
Usability Study 2 Details
Study Type:
Unmoderated Usability Study
Location:
India, Conducted Remotely
Participants:
5 Participants
Length:
60 Minutes
Study 2 Findings
01
Plant Information Fields
The containers for plant information in their profile had drop-shadows, which users attempted to interact with because they mistook them for buttons, so I removed the shadows which also lead to a cleaner look.
02
Navigation Hitch
Users were struggling to find their way back to the my plants and guides pages from individual plant profile or guide article pages, so I added a button to make it really easy
High Fidelity Prototypes
Desktop Prototype
Tablet Prototype
Mobile Prototype
Finale
Accessibility Considerations
01
Colours
I used Google’s Material Design tools to generate a color palate to ensure that all WCAG visual accessibility requirements were met while still getting awesome visuals. I used Google's guidelines about using the generated themes as well.
02
Typography
I used Material Design’s fonts, because I found that they were easy to adapt for all the three platforms I was designing for, and provided maximum legibility, while looking elegant. I used the different text hierarchies for clarity and separation.
Conclusions
01
Impact
I was surprised to see the reception to my design among my peers. This was only the second project I did in UI/UX, but with the help of some tools and guidance, I was able to achieve a visually appealing, yet functional, and accessible design.
02
What I Learned
Back To Hompage
Scroll To Top
NABK
About Me
Contact Me
My Resume
Houseplant
Healer
Project Background
Project Duration
April - May 2024
My Role
Sole UX Designer, Researcher, Writer & Tester
The Problem
Identifying problems with houseplants is often very difficult, especially for novice gardeners. Effective gardening requires a reliable source of information, and also some note-taking.
The Goal
Skip To Final Prototype
Check out my process for this project if you wish to, but if you want to skip directly to the results; check out these prototypes to see how it turned out.
Desktop Prototype
Tablet Prototype
Mobile Prototype
Research Phase
Preliminary Research On Potential Users
I talked to gardeners and looked at information available online to judge the target audience for Houseplant Healer. I also went through the products of some direct and indirect competitors to see what needs are being met and where there is still work to be done. The following are the personas I built based on my findings, and their pain-points.
User Personas
Sergio
Skilled Gardener
"I don't need a tool that tells me what I already know, I need it to diagnose and resolve issues that I can't by myself."
Rohini
New Gardener
"I find it difficult to even tell different plants apart. How do I take care of them?"
Freya
Produce Farmer
"The more plants you have, the more they are worth to you, and the harder it gets to manage them"
John
Ecologist
"Bio-diversity is in decline worldwide, and it's our fault, we have to take responsibility and provide spaces for plants and animals in our backyards."
User Pain Points
01
Knowledge Gaps
Plants can have very specific care needs depending on species and may vary with seasonal changes, this makes it hard to care for them, especially for novice gardeners.
02
Diagnosing Problems
Even identifying a plant species can be contentious, a sick plant can be even more tricky to diagnose. Professionals to deal with such issues are not readily available for a reasonable price.
03
Scheduling & Noting
As the number of plants under a gardener's care increases, it becomes harder to simply remember when a plant was last watered or fertilized.
04
Lack of Resources
Sources of information regarding plant-care can be sparse, conflicting, and riddled with paid promotions.
Early Design Phase
Site Map
Desktop Wireframes
Plant Profile Page
My Plants Page
Tablet & Mobile Wireframes
Plant Profile Page
My Plants Page
Plant Profile Page
My Plants Page
Low Fidelity Prototypes
Desktop Lo-Fi Prototype
Tablet Lo-Fi Prototype
Mobile Lo-Fi Prototype
Usability Study 1
Usability Study 1 Details
Study Type:
Unmoderated Usability Study
Location:
India, Conducted Remotely
Participants:
5 Participants
Length:
60 Minutes
Study 1 Findings
01
Back Button
Most users preferred to use their browser's controls for navigating back to a previous page, hence the interface could be made cleaner with one less button.
02
Memorial Page
The memorial page was confusing users. They were not sure why deceased plants needed a page with a separate control on the header itself, it was cluttering up the UI.
Late Design Phase
Refining the tested Lo-Fi layouts
After testing the lo-fi prototypes, I had some insight into what needed improvement in terms of layout. I made the changes the users needed with the layout and then moved on to add details for the first high-fidelity screens, complete with colors, images, micro interactions, and more detailed copy writing.
Desktop Mockups
Plant Profile Page
My Plants Page
Tablet & Mobile Mockups
Plant Profile Page
My Plants Page
Plant Profile Page
My Plants Page
Usability Study 2
Usability Study 2 Details
Study Type:
Unmoderated Usability Study
Location:
India, Conducted Remotely
Participants:
5 Participants
Length:
60 Minutes
Study 2 Findings
01
Plant Information Fields
The containers for plant information in their profile had drop-shadows, which users attempted to interact with because they mistook them for buttons, so I removed the shadows which also lead to a cleaner look.
02
Navigation Hitch
Users were struggling to find their way back to the my plants and guides pages from individual plant profile or guide article pages, so I added a button to make it really easy
High Fidelity Prototypes
Desktop Prototype
Tablet Prototype
Mobile Prototype
Finale
Accessibility Considerations
01
Colours
I used Google’s Material Design tools to generate a color palate to ensure that all WCAG visual accessibility requirements were met while still getting awesome visuals. I used Google's guidelines about using the generated themes as well.
02
Typography
I used Material Design’s fonts, because I found that they were easy to adapt for all the three platforms I was designing for, and provided maximum legibility, while looking elegant. I used the different text hierarchies for clarity and separation.
Conclusions
01
Impact
I was surprised to see the reception to my design among my peers. This was only the second project I did in UI/UX, but with the help of some tools and guidance, I was able to achieve a visually appealing, yet functional, and accessible design.
02
What I Learned
Back To Hompage
Scroll To Top
NABK
Houseplant Healer
Project Background
Project Duration
April - May 2024
My Role
Sole UX Designer, Researcher, Writer & Tester
The Problem
Identifying problems with houseplants is often very difficult, especially for novice gardeners. Effective gardening requires a reliable source of information, and also some note-taking.
The Goal
Skip To Final Prototype
Check out my process for this project if you wish to, but if you want to skip directly to the results; check out these prototypes to see how it turned out.
Desktop Prototype
Tablet Prototype
Mobile Prototype
Research Phase
Preliminary Research On Potential Users
I talked to gardeners and looked at information available online to judge the target audience for Houseplant Healer. I also went through the products of some direct and indirect competitors to see what needs are being met and where there is still work to be done. The following are the personas I built based on my findings, and their pain-points.
User Personas
Sergio
Skilled Gardener
"I don't need a tool that tells me what I already know, I need it to diagnose and resolve issues that I can't by myself."
Rohini
New Gardener
"I find it difficult to even tell different plants apart. How do I take care of them?"
Freya
Produce Farmer
"The more plants you have, the more they are worth to you, and the harder it gets to manage them"
John
Ecologist
"Bio-diversity is in decline worldwide, and it's our fault, we have to take responsibility and provide spaces for plants and animals in our backyards."
User Pain Points
01
Knowledge Gaps
Plants can have very specific care needs depending on species and may vary with seasonal changes, this makes it hard to care for them, especially for novice gardeners.
02
Diagnosing Problems
Even identifying a plant species can be contentious, a sick plant can be even more tricky to diagnose. Professionals to deal with such issues are not readily available for a reasonable price.
03
Scheduling & Noting
As the number of plants under a gardener's care increases, it becomes harder to simply remember when a plant was last watered or fertilized.
04
Lack of Resources
Sources of information regarding plant-care can be sparse, conflicting, and riddled with paid promotions.
Early Design Phase
Site Map
Desktop Wireframes
Plant Profile Page
My Plants Page
Tablet & Mobile Wireframes
Plant Profile Page
My Plants Page
Plant Profile Page
My Plants Page
Low Fidelity Prototypes
Desktop Lo-Fi Prototype
Tablet Lo-Fi Prototype
Mobile Lo-Fi Prototype
Usability Study 1
Usability Study 1 Details
Study Type:
Unmoderated Usability Study
Location:
India, Conducted Remotely
Participants:
5 Participants
Length:
60 Minutes
Study 1 Findings
01
Back Button
Most users preferred to use their browser's controls for navigating back to a previous page, hence the interface could be made cleaner with one less button.
02
Memorial Page
The memorial page was confusing users. They were not sure why deceased plants needed a page with a separate control on the header itself, it was cluttering up the UI.
Late Design Phase
Refining the tested Lo-Fi layouts
After testing the lo-fi prototypes, I had some insight into what needed improvement in terms of layout. I made the changes the users needed with the layout and then moved on to add details for the first high-fidelity screens, complete with colors, images, micro interactions, and more detailed copy writing.
Desktop Mockups
Plant Profile Page
My Plants Page
Tablet & Mobile Mockups
Plant Profile Page
My Plants Page
Plant Profile Page
My Plants Page
Usability Study 2
Usability Study 2 Details
Study Type:
Unmoderated Usability Study
Location:
India, Conducted Remotely
Participants:
5 Participants
Length:
60 Minutes
Study 2 Findings
01
Plant Information Fields
The containers for plant information in their profile had drop-shadows, which users attempted to interact with because they mistook them for buttons, so I removed the shadows which also lead to a cleaner look.
02
Navigation Hitch
Users were struggling to find their way back to the my plants and guides pages from individual plant profile or guide article pages, so I added a button to make it really easy
High Fidelity Prototypes
Desktop Prototype
Tablet Prototype
Mobile Prototype
Finale
Accessibility Considerations
01
Colours
I used Google’s Material Design tools to generate a color palate to ensure that all WCAG visual accessibility requirements were met while still getting awesome visuals. I used Google's guidelines about using the generated themes as well.
02
Typography
I used Material Design’s fonts, because I found that they were easy to adapt for all the three platforms I was designing for, and provided maximum legibility, while looking elegant. I used the different text hierarchies for clarity and separation.
Conclusions
01
Impact
I was surprised to see the reception to my design among my peers. This was only the second project I did in UI/UX, but with the help of some tools and guidance, I was able to achieve a visually appealing, yet functional, and accessible design.
02
What I Learned
Back To Hompage
Scroll To Top