Product
A website that allows users to locate and search for garden shops and plants either locally or nationally, read reviews and ratings, and visit the garden shop’s websites to learn more about their goods and services.
Role
Conduct interviews, paper and digital wireframes, lo-fi and hi-fi prototypes, conduct usability studies, account for accessibility, and iterating on designs.
Duration
December 2022 – May 2023
Understand the User
Ensuring the product is useful, desirable, accessible, credible, findable, usable, and valuable
User Research Summary
A usability study was conducted using a low-fidelity prototype. Five participants, ages 30-50, from middle-income brackets, participated in a moderated usability study using Zoom to record the interview sessions. Participants were asked to access the link to the prototype and share their screen so a recording of the participant’s cursor movements could be recorded along with their reactions to the prototype. The participants interacted with the Adobe XD prototype in user interface mode. The interview sessions took, on average, 15 minutes to complete.
One assumption going into the research that I had was that users would want to search for garden shops only. I quickly learned that gardeners would be interested in also searching for specific plants, especially those plants that do well in their area. Another assumption was that this website would be used solely by individuals searching for shops and plants locally. I, too, quickly learned that participants wanted the ability to search for shops and plants in another area outside their geographic area.
As a result of this study, I changed the focus of the website from being one used locally to a site being used to search for shops and plants nationally. I also made it possible for individuals to search for plants in their area, as well as search for shops that carried the specific plants users would search for on a national level, thus widening the range of a possible search.
User Research Pain Points
Users desired the ability to search for specific plants either in their area or conduct an nationwide search for shops that might carry the desired plants.
Users desired the ability to conduct a much broader and more diverse search than initially designed. Doing so widened the scope of the project.
Users desired to gain as much information about the plants and shops as possible without going to multiple pages or other websites to locate this information. This insight allowed the designer to include customer ratings and testimonials, plant information, and store details easily and quickly, allowing the user to make critical decisions about which shops to visit or not visit.
Users wanted a clear call to action immediately upon opening the main page. The designer changed the position and design of the search bar, placing it at the top center of the webpage.
Personas
Goals: To have a full experience and be able to take it all in. I enjoy gardening and seeing the connection between nature and beauty. And, of course, I want web designs to be clean, lean, and beautiful.
Frustrations: When the website is confusing and it's unclear what I am asked to do immediately upon opening a webpage. That turns me off.
Quote: "I want a clear call to action at the top fold of the page."
Frustrations: When the website is confusing and it's unclear what I am asked to do immediately upon opening a webpage. That turns me off.
Quote: "I want a clear call to action at the top fold of the page."
Goal: To have as much information as possible so I can make the right decisions with the limited resources I have.
Frustrations: Websites that have little to know customer and product information.
Quote: "We are so used to having customer ratings and recommendations."
Frustrations: Websites that have little to know customer and product information.
Quote: "We are so used to having customer ratings and recommendations."
Goal: I want my garden to took amazing and full of plants that I can take care of and will thrive in my climate.
Frustrations: The ability to search for specific plants and the right price.
Quote: When I am shopping for plants, I want to know who has the best varieties at the right price that will grow in my yard.
Frustrations: The ability to search for specific plants and the right price.
Quote: When I am shopping for plants, I want to know who has the best varieties at the right price that will grow in my yard.
User Journey Map
Starting the Design
Development process from paper to Adobe XD
Lo-Fi Prototype
Usability Study
Study Type
Moderated Study
Location
The study was conducted remotely using Zoom. Participants were recruited from an online LXD/ ID/ UX-UI community forum website. The participants lived in the East Coast and West Coast parts of the United States.
Participants
Five participants agreed to participate in the study. Four were female, and one was male. All participants were avid gardeners. The content of the study was not made aware to the participants until the time of the interviews. This means that the participants did not know the study was about a gardening website, and all five were gardeners who used the internet to buy plants and learn more about gardening.
Length
The study took about 20 minutes to complete.
Findings
Insight One
Users need better information and clearer call to action on the homepage at the top fold of the screen.
Insight Two
Users need more information on the search results page, including the ability to further drill down their search results.
Insight Three
Users want more specific information on the shop and plant pages, such as price ranges and recommendations.
Insight Four
Five out of the 5 participants understood the purpose of the website. All participants noted that there were key points that were missing from the website, such as drop-down menus, specific information about plants, and shop location.
Insight Five
All participants felt the project was straightforward and would provide gardeners with helpful information. They were pleased with the experience.
Insight Six
The participants rated the following survey items with agree or strongly agree.
- I would use this website frequently
- This would be a valuable resource for gardeners
- The website is easy to use
- I imagine people would learn how to use this website quickly
- I feel confident when using this site
- I would recommend this website to a friend
Iteration of the Design
Based on the feedback froth the first usability study and the desire to move to a hi-fi prototype, a complete redesign of the website was initiated. A new look and feel for the website, along with a new focus on the website’s scope, provided the creative energy for the final draft of the web design. The following were issues that arose from the design of the next lo-fi prototype and the hi-fi prototype.
Issue One: Lack of a Clear Call to Action (CTA)
The search bar was moved from the right side of the screen to the center top of the homepage. A new tagline was added, and a background image was used to focus the user on the white search bar. Cues or directions were added to the inside of the bar. This made it clear that searching by location, zip code, or plant was the first thing to accomplish at this site.
Issue Two: Flexible Searching
Users made it clear that they wanted the ability to search for both garden shops and plants. The ability to search for specific plants that would grow well in their area was important. The other consideration was the fact that users said that they wanted this website to do more than what Google could provide them in terms of plants, growing tips, customer satisfaction, ratings, and shop locations.
Issue three: Local and National
Users made it clear that they wanted the ability to search for garden shops located in their geographical region but also for shops and plants nationally. They wanted the ability to see what other shops offered, especially if they could order the plants they wanted and have them shipped to their homes.
Issue Four: Star Ratings and Price Ranges
Users made it clear that they wanted the website to provide them with as much information as possible about the cost of plants, goods, and services. This was important because they did not want to go further into the search process if they thought the price for a service or good was out of their price range. They also wanted to hear what others were saying about the garden shop services, the quality of their plants, and the customer satisfaction ratings. A star system was developed to help users make decisions about customer satisfaction.
Lo-Fi Prototype Revised
Hi-Fi Prototype
Accessibility
Equity Focus One
The contrasting color was used throughout the design to ensure the text was light on a dark background or dark text on a light background. Further testing is needed to ensure the contrast ratio is 4.5:1.
Equity Focus Two
The tablet design was developed to ensure screen readers would properly move through the text and images to ensure a fully accessible web experience. Further testing and refinement is needed before moving to production.
Equity Focus Three
All images will include alt text before moving to production.
Going Forward
Impact
It’s important to remember when developing a website that serves a niche market; one must design a product that goes beyond what a generic search tool like Google or Bing can provide. Users clearly stated that this was a useful website and one that they would recommend to a friend.
What I’ve Learned
I’ve learned how to use Adobe XD more extensively than before. I’ve also refined my design skills. Moving forward, I want to become more proficient in Figma and Adobe XD.
Next Steps
The following items must take place before moving into production.
- All images must have alt text
- Test site for color contrast and tab thru action for screen readers
- A second usability study is needed to refine the design further before moving into production