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

Frontend Web Designer

Karla

Age: 35
Education: BS Computer Science
Hometown: Charleston, SC
Family: Husband, 2 kids, 2 dogs

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."
Graphic Designer

Sam

Age: 39
Education: BS Criminal Justice
Hometown: White Plains, ID
Family: Single, no kids

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."
Consultant

Lee

Age: 45
Education: PhD Education
Hometown: Dallas, TX
Family: Partner, 1 daughter

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.

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.

  1. I would use this website frequently
  2. This would be a valuable resource for gardeners
  3. The website is easy to use
  4. I imagine people would learn how to use this website quickly
  5. I feel confident when using this site
  6. 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.

  1. All images must have alt text
  2. Test site for color contrast and tab thru action for screen readers
  3. A second usability study is needed to refine the design further before moving into production

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.