Elevate Company Credibility
Ryan's Outdoor Services Website Case Study
Ryan's Outdoor Services Website Case Study
Ryan’s Outdoor Services is a company providing lawn care, landscaping, and snow removal services in Eastern Iowa. Currently, their online presence is primarily on social media, where they have an extensive collection of images and information. They are now seeking to develop a dedicated website.
Overview
Conduct Initial Interviews
Analyze and Organize Insights
Define the Problem Statement
Create Personas
Create User Scenarios
Create User Flows
Define Goals
Define Key Features
Create the Design System
Create the Overall Site Flow
Create Wireframes
Test and Analyze the Low Fidelity Prototype
Create the High Fidelity Prototype
Test and Analyze the High Fidelity Prototype
Create the Content on WordPress
Test the Website
Analyze and Strengthen Accessibility, Security, and SEO
Analyze Website Analytics and Make Changes as Needed
WordPress
Figma
Illustrator
Photoshop
Zoom
The problem
For the customers:
Customers in need of lawn care, snow removal, and landscaping need easy access to detailed service information and contact details in order to learn about and hire Ryan’s Outdoor Services.
For the company:
Ryan’s Outdoor Services needs to improve its search engine ranking and provide a structured content presentation in order to attract more customers and effectively showcase its services.
Initial Interview Insights
To gain a deeper understanding of potential customers, informal interviews were conducted with individuals who had hired or were planning to hire landscaping, lawn care, or snow removal services within the next year. The interviews focused on three primary questions:
What qualities and characteristics do they look for in a lawn care company?
What do they look for on a lawn care company’s website when deciding to work with them?
What do they look for on their lawn care company’s website?
The insights from these interviews revealed key factors that influence decision-making and customer satisfaction. The main points of information gleaned from these questions are summarized in the graphics, informing both the content and structure needed for the website.
Persona One
NAME: Linda
AGE: 73
JOB: Retired
Needs
Reliable and Consistent Service: Linda needs a company that will reliably show up on schedule to maintain her lawn and remove snow, ensuring her property is well-maintained throughout the year.
Affordable Options: She needs affordable service plans that fit within her fixed retirement budget.
User-Friendly Website: Linda needs a website where she can easily find information about services, pricing, and contact details, and perhaps schedule services or request quotes online.
Trustworthy Reputation: Linda needs to feel confident that the service providers she hires are trustworthy and have a good reputation in the community.
Pain Points
Physical Difficulty: Linda finds it increasingly challenging to manage lawn care and snow removal herself due to her age.
Reliability Concerns: She worries about finding a service that is dependable and shows up as scheduled.
Affordability: On a fixed retirement income, Linda is concerned about the cost of hiring a lawn care and snow removal service.
Communication Issues: She finds it frustrating when service providers are difficult to contact or do not communicate effectively.
Wants
Trustworthy Service: Linda desires a service provider known for reliability and trustworthiness.
Easy Communication: She wants a company that is easy to contact, whether by phone, email, or through an easy-to-use website.
Year-Round Care: Linda wants a single company that can handle both her lawn care in the summer and snow removal in the winter.
Positive Reviews: She values testimonials and reviews from other customers, which help reassure her of the company’s reliability and quality of service.
Scenario one
Linda, a retired grandmother, has recently found it difficult to manage lawn care and snow removal for her home. She needs to find a reliable and affordable company to take over these tasks to ensure her property remains well-maintained throughout the year. Linda values trustworthy service providers that are easy to contact.
Persona two
NAME: Andrew
AGE: 33
JOB: Social Worker
Needs
Experienced Professionals: Andrew needs to find a landscaping company with proven expertise and a portfolio of successful projects similar to his planned project.
High-Quality Service: He needs assurance of quality workmanship to ensure the landscaping project meets his high standards.
Easy Estimate Comparison: Andrew needs a user-friendly way to request, receive, and compare estimates from different companies to make an informed decision.
Transparent Process: He needs clear and transparent communication throughout the project, from initial consultation to project completion, to feel confident in the service provided.
Pain Points
Skill Gap: Andrew is confident in basic lawn care but lacks the expertise for large-scale landscaping projects.
Time Constraints: His busy work schedule leaves him with limited time to manage a complex landscaping project on his own.
Trust Issues: He is cautious about finding a company that delivers high-quality workmanship and meets his expectations.
Comparison Difficulties: Andrew finds it challenging to compare different companies and their offerings without a straightforward way to request and review estimates.
Wants
Professional Expertise: Andrew wants a company with the necessary skills and experience to handle a large-scale landscaping project.
Quality Workmanship: He values high-quality work and attention to detail in the execution of landscaping projects.
Convenient Estimate Requests: Andrew wants an easy and efficient way to request estimates from multiple companies to compare services and prices.
Clear Communication: He desires clear and transparent communication from the service provider regarding project timelines, costs, and expectations.
Scenario two
Andrew is confident in managing his own lawn care but realizes he lacks the skills and expertise needed for a large-scale landscaping project he wants to undertake. He needs to find a professional company with the experience and capability to complete this project to his satisfaction. Andrew values quality workmanship and would like to easily request estimates for comparison.
Goals
Three main goals were established from discussions with stakeholders and are focused on business objectives.
Expand Potential Customer Base
Enhance Information and Tools Available to Current Customers
Key Features
Key features take the goals we discussed with stakeholders and the insights we gathered from interviews and research and turn them into actionable steps. They’re the roadmap guiding us toward meeting user needs and business objectives effectively.
Initial Flow
An outline was created of the essential pages needed to interconnect these features and build a unified website experience.
Design System
Ryan’s Outdoor Services boasts an attractive established identity, characterized by a recognizable logo, prominent signage, and branded vehicles. To capitalize on this existing identity and ensure consistency across all digital touchpoints, a comprehensive design system was developed. This design system serves to complement and build upon the established identity, translating it seamlessly into the digital realm while maintaining brand coherence and visual appeal.
Expanded Flow
A wire flow was crafted to visually illustrate how users will navigate through the various pages and functionalities to accomplish their goals. This process helped determine the optimal page flow and identify key interactions essential for a smooth and intuitive user experience.
Low Fidelity
The homepage features a header image on every page to immediately convey qualities such as professionalism and consistency, which were identified as important to potential customers during interviews. There is a bulleted list of services for quick recognition, allowing customers to quickly see what’s offered at a glance. A prominently placed “Contact Us” button guides users to the next step in securing services, leading them to the contact form. Additionally, the homepage showcases examples of work and customer testimonials, summarizing key information customers look for before engaging with a company.
Originally, there was only going to be a single services page. However, to provide more detailed content and better showcase the company’s capabilities, a second page was created to highlight specific examples of work. This additional page includes detailed examples of services and showcases the most impressive projects the company has completed. The choice to create this page was also influenced by Ryan’s Outdoor Services’ social media content, including before and after images, which provide a professional and impactful display of their work.
The about page is designed to lead seamlessly into the contact page, facilitating a smooth transition for users wanting to establish official contact with the business. It includes a summary, a prominent button to reach the contact page, and boxes detailing important information such as specific experience, crew size, and available tools for large-scale projects. Additionally, the page features a graphic and text detailing specific service areas, along with customer testimonials to preemptively answer any potential questions users might have before reaching out. The contact page itself includes quick glance contact information and hours, and a user-friendly form designed to capture necessary information while allowing users to complete it quickly, focusing only on essential details.
The payment page is designed for current customers, providing an additional method to make payments. It includes the necessary information and a button directing users to the payment portal hosted by a payment processor. The design is simplified to serve as a gateway rather than a standalone page, ensuring users can easily navigate through the payment process.
The account creation flow was created first with the goal of setting expectations for the entire app and gathering necessary information. The initial flow shows how these screens began as a minimal way to collect information, but people didn’t know how to expect the information to be used and weren’t sure how to best fill out the forms based on their intentions making people hesitant to move on to the next step. Explanations, a more evident progress bar, and information about the app itself allowed users to move through these steps with ease.
For activity creation without hosting, some ideas brainstormed were having the app create activities or allowing a large group to form and schedule as they like. The resulting solution was to have someone create an activity, type the details, date, time, and a public location, and then they were free to leave the activity if they wished—making them more of an idea creator than a host.
Activity groups changed their name to primary activities – acting more as the users’ filters and customization than an actual group. Users can search for any activity in their city, but their suggestions come from their primary activity groups.
User groups didn’t like the pressures of messaging, but there was a necessity to communicate before a meet-up. This problem required more research, as I had to figure out why people didn’t like messaging. What was discovered was that people felt nervous about interacting in a way that bothered others. So the decision was made to make private messaging optional, but group messaging open in each activity as it had a specific purpose.
Profile management was a focus as the profiles needed to contain information about others to quell safety fears while feeling as though it wasn’t too intrusive for more reserved users. We achieved this by having an optional short bio and additional images and publicly displaying the traits and activities of the user, all from a predetermined list.
Activity creation was expanded upon, and one common question throughout testing was what exactly classifies as an activity. This was clarified by simply removing the option to create an activity name and placing a dropdown activities list to name the activity. It made creating an activity almost entirely laid out as a series of options, with the only exception being a details box. This was successful in making people feel more comfortable creating an activity.
A need that was identified was the need for an easy way to manage and remember these events. This was especially necessary for recent retirees still figuring out how to manage a new schedule with more freedom. As a result, a calendar page was created to encourage people to sign up for various activities, as they don’t have to manage them themselves.
As the app is differentiating itself from other apps focused on creating one-on-one friendships and is instead activity-focused, the friend pages had to be adapted to fit this need. Instead of getting updates from friends or having a feed, the user’s friend list acts more as a reference. They can invite these people to activities, message them, or view their profiles, encouraging them to get to know each other better through activity meet-ups.
High Fidelity
The need to share activities with friends lists in an easy, pressure-free way became very obvious through testing. On the activities page, a button appears that allows people to send the activity to someone on their friend list in the form of a pre-written message suggesting that they may be interested in this activity. This allows deeper friendships to form from increased interaction while downplaying possible rejection with a less direct approach.
Throughout testing, it became clear that there was a need to make group messages seem less intrusive. It was decided that the messaging, including past messages within the group, would open up once the activity was joined. It made the interaction feel more like opting into a public forum rather than being placed in a private room.
The homepage was finalized towards the end of the project as features changed and buttons moved. Upcoming activities, filtering through main categories, and creating a new activity were the key features that needed to be represented. After those were placed, the messaging and notifications went to the top right, mimicking most social media apps for easy learnability.
The final major decision concerned what to do about groups that didn’t fit the required number of people for an activity and what to do about people who didn’t show up. Those two problems came together into one solution. For activity groups that did meet the minimum, a prompt for an activity review appears on the home screen after the meeting time. The prompt allows users to report if everyone who joined showed up. If someone misses multiple events in a short time, they can only join activities once the minimum group number has been reached.
The header image chosen for the homepage features the identifiable work vehicle and trailer used by the company. This connects viewers with something familiar they may have seen before and conveys professionalism by showcasing dedicated work vehicles. The second button on the page is labeled “View All Services,” which aligns with user expectations and allows the “Contact Us” button in the header to stand out more prominently without redundancy.
All pages have been carefully adapted for both desktop and mobile devices, recognizing that most users looking for lawn care services start by searching on Google Maps on these devices and then clicking through to the website.
The first image on the about page features the owner, aligning with the company’s name and fostering a personal connection between the business and potential customers. Users expressed that knowing who the name represents made them feel a more personal connection. The information section includes interactive boxes, allowing users to engage with specific details they are interested in without overwhelming them with text. The service area image outlines the towns served and includes the text “and surrounding areas” to indicate that even if viewers are not within the outlined towns, they can still contact the company for a quote.
The contact page received minor tweaks based on user feedback about what happens next after filling out the form. Additional text explains that users will be contacted for more information, such as images of the area they want landscaped, or they will receive an estimate. Text was also added to inform users that if they are requesting a service not listed, they can add it in the comment box.
The work page features large images of projects with no text, as users primarily expected imagery here and preferred to see text only on the services page. An interactive before-and-after element was added during development, mirroring the company’s social media style. Additionally, a secondary page specifically adapted for screen readers was included to ensure accessibility.
The services page was simplified to include only a heading, a short description, and an image of the service. This design caters to users who want to quickly see if the service they are interested in is listed and view an example of that service.
The text on the payment page was crafted to reflect the capabilities of the business and to ensure users knew it wasn’t the only payment option available. During accessibility testing, the button color was changed to a darker shade of green to pass color contrast tests, ensuring the page remained accessible to all users.
The prototype
Click through and explore the final prototypes on Figma for both mobile and desktop!
Development Results
The website was developed using WordPress, ensuring a robust and user-friendly platform for both the business and its customers. Key elements such as a cookie policy, privacy policy, site map, and a 404 error page were added to enhance the site’s functionality, compliance, and user experience.
Accessibility Analysis
The biggest accessibility challenge I faced was color contrast. While checks for reading level and accessible links and buttons were easily adaptable, achieving proper color contrast required more time and effort. The colors in the logo—a light blue and green—did not pass web accessibility guidelines when used as small text on a white background. This posed a problem because it was crucial to maintain the business’s colors throughout the website for consistency and brand identity.
To address this, I changed the blue and green to darker shades in areas where text readability was essential, ensuring compliance with WCAG guidelines. Additionally, I incorporated incidental elements that used the original base colors. This approach maintained the website’s visual consistency without compromising accessibility.
Another recurring issue was errors due to the lack of alt text in interactive image elements. Upon checking with a screen reader, it was found that the element being used hid the alt text. To resolve this, a secondary screen reader viewable page was created, ensuring that all interactive image elements were accessible.
Before
After
SEO, Security, and Performance Analysis
To optimize SEO, security, and performance, several key measures were implemented:
Security: Security headers were added to enhance protection. Secondary tests were conducted using WordPress plugins to ensure no SSL, security, SEO, or accessibility issues were overlooked.
SEO: A site map and schema metadata were included to improve search engine visibility. Text, image alt text, headings, and SEO titles and descriptions were optimized to rank on Google for important terms identified in interviews: Dubuque, Iowa, Landscaping, Lawn Care, Snow Removal, Mowing, Shoveling, and Ryan’s Outdoor Services.
Performance: CSS and JavaScript were minified, and page response times were reduced through image and file optimization. Performance checks were conducted using Google PageSpeed Insights.
These efforts collectively enhanced the website’s SEO, security, and performance. You can see the results of these improvements in the next section.
Analytics
The Google Analytics data revealed that after only two weeks of the website being live, traffic was generated both from social media referrals and organic searches. Among the top 10 organic Google search queries, many combinations of terms such as “Landscaping,” “Lawn Care,” “Lawn Mowing,” “Dubuque,” and “Ryan’s Outdoor Services” ranked in the top five average positions. Additionally, further pages showed top 10 ranks for combinations including “snow” and “snow removal.”
To further elevate these rankings, creating individual pages for each of the main services is recommended. The organic Google search click-through rate (CTR) of 10.79% and an engagement rate of 88%, with most users coming from the target city, demonstrate successful SEO efforts in the first two weeks. Continued analysis will be necessary to maintain and improve these results over time.
Additionally, the contact form on the website has successfully generated eight new service requests within the first weeks of being live. This indicates that people are not only finding the website but are also following the designed user flow, resulting in an expanded customer base. This early success shows the website’s effectiveness in converting visitors into potential clients.
The Next Steps
- Create Individual Service Pages: Develop dedicated web pages for each main service (e.g., landscaping, lawn care, snow removal) to boost SEO and provide more detailed information for users.
Officially Release Payment Page: Launch and test the payment page to ensure a smooth and secure transaction process for customers.
Develop FAQ Section: Create an FAQ page based on common questions received through the contact form and input from stakeholders to provide quick and accessible answers.
Monitor SEO Performance: Continuously track and analyze SEO metrics to identify opportunities for further optimization and maintain high search engine rankings.
Analyze User Behavior: Use analytics to understand user interactions and improve the website’s usability and engagement rates.
Gather Feedback: Collect feedback from users and stakeholders to identify any areas for improvement and ensure the website meets their needs effectively.
Improve Accessibility: Regularly review and update accessibility features to ensure compliance with WCAG guidelines and provide an inclusive experience for all users.
