PROJECT OVERVIEW
Synopsis
I worked with a group of three other designers to conceptualize an original app that helps houseplant owners find care information tailored to their plants’ needs. I aided in the user research and ideation processes; then, as my fellow team members began work designing the application itself, I designed and coded 3 responsive webpages for the app’s landing page website. I leveraged the UI system provided by one of my team members, as well as HTML, CSS, and the Bootstrap framework to design a high fidelity live prototype.
Problem
Through my team and I’s research, we discovered that most young users with an interest in owning houseplants believed they did not have a green thumb and could not properly take care of a plant. Users lack the information necessary to properly sustain their plants, which causes their plants to die and their confidence to diminish.
My Role
Front-End Developer
UX/UI Designer (Research, Visual Design, User Testing)
Timeline
2 weeks
Completed May 2021
Team
Nicholas Gonsowski (UX/UI Designer)
Kevin Kerr (UX/UI Designer)
Mitchell Anderson (UX/UI Designer)
Tools
Figma, Photopea, Visual Studio Code, Bootstrap 5, GitHub, Zoom
TABLE OF CONTENTS
Proto-Persona
User Interviews
User Survey
Affinity Diagram
Empathy Map
User Persona
Problem Definition
Brainstorming
Feature Prioritization
Wireframe
HTML Markup
UI System
4. Testing & Front-End Development
Guerrilla Usability Testing
Front-End Development
USER RESEARCH
Research Plan
Background
I collaborated with a team of three other designers to develop a way to help users with an interest in owning houseplants, but who do not have much experience. Throughout the pandemic, users have been spending more time at home than ever before, which has inspired many to feel the urge to bring some greenery into their living spaces. However, caring for houseplants can feel daunting, and users often end up killing their plants, or never purchasing them in the first place.
Goal
To identify the challenges users face when buying and caring for houseplants, and to understand what deters them from doing so in the first place.
Methodology
I was responsible for conducting 2 of the 5 user interviews our team conducted via Zoom. We each ensured that interview participants roughly met the demographic criteria of our assumed Proto-Persona.
Additionally, our team created a Survey derived from the interview questions, which was distributed via social media channels. This convenience data collection took place over 3 days.
Research Results
Affinity Diagram
After gathering data from our 5 user interviews and 10 survey responses, we created a Miro Board to consolidate and organize the data.
As a result of our research, we found that users generally have a history of killing their houseplants and are concerned that they are not capable of keeping a plant alive. Users would like more specific information about how to care for their plants in order to feel confident buying them.
Empathy Map
We then all collaborated to create an Empathy Map in order to better understand our users and flesh out our finalized persona.
Finalized Persona
2. IDEATION
Brainstorming
Problem Statement
Once our persona was established, we held a group meeting to accurately pinpoint and articulate the problem we wanted to address, before brainstorming potential solutions.
“Through the research process, we discovered that young users with a desire to own houseplants did not believe they would be able to take care of one. We can help by providing users with more information about plants before they purchase them.
We might do this by providing the user with relevant plant care information, e.g. watering, sunlight, fertilizer information, as well as information on toxicity. Doing this will allow our app, Photosynthetica, to anticipate the concerns of our users and empower them to make select plants with confidence.”
“I Like, I Wish, What If” Method
Feature Prioritization
Then to decide which features would be key to addressing the ideas we’d brainstormed, we created a feature prioritization matrix.
Features Implemented:
Search for plant information by name
Search for plant information by taking a picture—plant recognition software
Display light requirement information for a particular plant
Display soil info for a particular plant
Display toxicity info for a particular plant
Plant watering time scheduler
High Fidelity App Prototype
At this point in the design process, I took the responsibility of creating a responsive landing page website for the product and stepped back from designing the application itself.
While I worked on the website, my team members (Nicholas Gonsowski, Kevin Kerr, and Mitchell Anderson) designed a High Fidelity Prototype for the app, including an onboarding process and the aforementioned features.
3. DESIGN
Blog and Support Pages
When building out the rest of the website, we decided as a group that it was important for the site to include a Blog page. This way, we would be able to post general plant information and care tips outside of the native application, expanding the resources we offer users and building brand identity as an authority on houseplants.
Additionally, we deemed it necessary to have a Support page so users would be able to resolve and/or report any technical issues they experience, in turn helping us track any usability issues that may arise.
Landing Page Digital Wireframe
Once we agreed on the structure of the website, I began to work independently, creating a Digital Wireframe for the website’s homepage on desktop.
I opted against taking a “mobile first” approach, because I was not concerned about fitting a large amount of content in a small space—additionally, from a coding standpoint, I felt it was more important to establish the positioning of elements on desktop, as they will all be collapsed into one column on mobile.
Figure 1. Homepage
Figure 2. Blog
Figure 3. Support
Wireframe HTML Markup
After conducting a round of guerrilla usability testing (details below), I made changes to my wireframe based on users’ feedback. Then, I combed through each screen and created an HTML Markup, annotating each component with the HTML tag I would later use when writing my code.
Figure 1. Homepage
Figure 2. Blog
Figure 3. Support
UI System
Once I established the HTML skeleton of each page, I met with one of my team members, Nicholas Gonsowski, to discuss the visual design of the website. We wanted the site to be aesthetically similar to the Application Prototype he’d designed, so as to keep branding consistent. As such, I leveraged the UI System and logo that Nicholas created for the application when I designed the landing page website.
*Style Tile created by Nicholas Gonsowski (UX Designer)
4. TESTING & FRONT-END DEVELOPMENT
Guerrilla Usability Testing
Testing Plan
After wireframing screens, I decided to conduct quick guerrilla usability tests to identify any major usability issues. I simply instructed participants to explore the homepage, as well as the two webpages in the navigation, and provide their feedback. I conducted 3 of these tests.
User Insights:
Remove the bar in the navigation between “Blog” and Support
Featured blog post should be completely above the break
There should be a search bar to search blog posts
The filters for blog posts should be more apparent on not right-aligned
Blog posts with images should be a little smaller
Front-End Development
HTML, CSS, and JavaScript Code
After implementing these insights, I set to work building out the code for the live prototype. The majority of the code was custom built by me, with some utilization of the Bootstrap 5 framework for responsiveness. I wrote the code in Visual Studio Code and synced it to a separate GitHub repository for each webpage. I prioritized labelling the code clearly, as well as keeping it neat and organized.
Figure 1. Homepage HTML Code
Figure 2. Homepage CSS Code
Figure 3. Homepage JavaScript Code
Code Repositories:
High Fidelity Prototype
For my final finished product, I produced a live High Fidelity Prototype.
Figure 1. Desktop Homepage (Hero Banner)
Figure 3. Desktop Homepage (“How it Works”)
Figure 5. Desktop Blog Page
Figure 7. Desktop Support Page
Figure 2. Mobile Homepage (Hero Banner)
Figure 4. Mobile Homepage (“How it Works”)
Figure 6. Mobile Blog Page
Figure 8. Desktop Support Page
