Pioneering Change
Redefining Green Slate’s Digital Presence and Strategy
A UX Website Redesign Case Study
Project Background
Green Slate, a landscape construction group in Monroe, WA, experienced stagnant growth due to a disconnect between their website and ideal audience. Their existing site, cluttered and mobile-unfriendly, frustrated potential clients seeking high-end landscaping services.
Green Slate recognized the need for a website that not only showcased their expertise but also fostered trust and streamlined contact, ultimately driving conversions.
The Problem
Green Slate's legacy website proved fatal to potential leads, choking user journeys like a tangled thicket. Finding portfolios and services became a frustrating trek, driving clients away and crippling lead generation.
Their messaging suffered from a fatal case of blandness, appealing to everyone and no one at the same time. Discerning clientele, yearning for elegance and sophistication, found nothing to resonate with them. This generic voice narrowed their reach, leaving their true potential shrouded in unremarkable visuals and unrefined design.
Timeline
June – September 2023
My Role
Product and Web Designer
UX Researcher
Tools Used
Figma
Squarespace
Google Forms
01. Research
Assessing User Expectations
I began by conducting user research with 10 testers. First, I asked them to describe their ideal experience on a landscape construction website.
Findings from a survey question conducted in the initial user research phase
Initial Usability Study
Next, they provided feedback on their experience with Green Slate’s site, with a focus on identifying opportunities for usability enhancements.
The website did not instill any confidence in me that this company knows what they’re doing.
Every aspect of the website is inaccessible. It’s impossible to navigate and it’s hard to look at.
It’s so hard to achieve anything.
It would be helpful to know if their services are priced anywhere close to my budget.
Only 3/10 users trusted Green Slate’s website
Competitor Analysis
I then analyzed industry peers to prepare for development of the redesign prototype, using elements that best met the user needs I surfaced.
I found that by investing in professional photography, we could meet the user need of more clearly representing the company’s scope and expertise while also meeting the business need of attracting higher-end clientele.
I also found that many competitors included excessive text and distracting animations, which they could have avoided to reduce extraneous cognitive load.
Green Slate's amateur smartphone photos
High-quality photos on a rival's site
Heuristic Analysis
I concluded the research phase with a heuristic analysis of the existing website, where I identified the following critical issues:
#1: Visibility of System Status
Transition animations are too slow to convey appropriate feedback from user interaction
Excessive wait times for carousel images with no visible state indication for the user
Slow transitions and load times
#2: Match Between System and Real World
Internal jargon, such as "softscape" and "hardscape," used to describe company services
Employee bios fail to clearly articulate their role and expertise
Internal jargon on the Services page
#4: Consistency and Standards
Limited interactivity with navigation bar buttons; only a small section is clickable
Site logo is not clickable (should return user to home page)
Inconsistent transition animations between interior pages
Contact icons in header are non-responsive
Only a small section of the navigation bar was clickable
02. Design Goals and Objectives
Identifying User Needs
The project’s main goal, as identified by the user testing process, was to redesign the website with a focus on enhancing usability, accessibility, and visual appeal.
During the ideation process, I used survey results and user feedback to derive the following six design goals:
Design Goals
01.
instill user confidence with purposeful usability considerations
02.
optimize for accessibility and mobile responsiveness
03.
build trust by improving content clarity and service information
04.
be more transparent about response times and pricing details
05.
declutter visual elements to reduce cognitive load
06.
improve navigation and loading speeds for smoother user experience
03. The Design Phase
Information Architecture
I started the design phase by incorporating quotes and insights from initial user feedback to revamp the site’s convoluted information architecture.
The Services tab took me to the Gallery page, which I wasn’t looking for.
Navigation from one tab to another was clunky.
It’s so hard to achieve anything.
The navigation bar is not very responsive.
I had a really hard time navigating from Services to any other page.
User quotes driving information architecture overhaul
Wireframing
I then sketched wireframes, drawing inspiration from surfaced user needs and competitor analyses. These sketches guided my creation of a mid-fidelity interactive prototype in Figma.
Goal 03.
build trust by improving content clarity and service information
Wireframe sketch based on user feedback
Mid-fidelity prototype based on wireframe sketch
Goal 05.
declutter visual elements to reduce cognitive load
Wireframe sketch based on user feedback
Mid-fidelity prototype based on wireframe sketch
04. Iterative Prototype Testing
Further Usability Testing
Next, I user tested the prototype, confirming that it aligned with the goals defined by initial user feedback.
Six out of seven user testers felt confident in Green Slate's trustworthiness after using the prototype, up from four out of ten during initial testing.
This improvement aligns with the user need of enhancing trust through clearer content and service information, identified from early user feedback.
All seven user testers found the website prototype to be user-friendly, intuitive, and readable, compared to only four of ten who felt the same about the original website.
This success aligns with the user need to declutter visual elements to reduce cognitive load, making the website more accessible and enjoyable for all kinds of users.
Pain Points Unearthed
Prototype testing feedback highlighted areas for improvement too. Some users wanted more relevant homepage information, while others raised concerns about the placement of Green Slate's service list in the About section.
These insights served as guiding principles as I continued through the redesign's iterative process.
05. Accessibility Considerations
Adherence to WCAG 2.1
I followed WC3’s Web Content Accessibility Guidelines practices to ensure the website’s usability for a broad audience, including the following:
adding alt text to imagery
improving color contrast
enabling easy keyboard navigation
implementing logical focus order for page elements
avoiding time limits on interactive content
The old logo and background failed WCAG 2.1 accessibility standards with a 2.5:1 contrast ratio
The new combination exceeds WCAG 2.1 standards with a contrast ratio of 14.7:1
06. Iteration Based on User Feedback
A Human-Centered Approach
User feedback served as the cornerstone of this project's entire lifecycle.
Whether testing the original website, the mid-fidelity interactive prototype, or the first iteration of the live website, user-identified pain points firmly grounded me in a user-centric approach that defined the website redesign from start to finish.
I wish each project included a description so I knew what Green Slate contributed.
I started with a quote from initial user feedback
build trust by improving content clarity and service information
I then refined that quote into a user goal
The legacy site lacked context and descriptions of Green Slate's contributions to a project
Goal 05.
The new site presents projects as case studies, detailing contributions with accompanying photos
07. Challenges and Solutions
A Shift in Focus
Halfway into the project, Green Slate’s owner communicated a major shift in the company’s focus. They transitioned from serving a wide range of clients to targeting affluent clientele who seek the largest, most complex projects.
They changed their target audience mid-project.
I carefully curated the portfolio to showcase a select number of standout projects, documented with professional photographs, that highlighted Green Slate’s capabilities better than the old site’s smartphone pictures. By featuring only premium work, we tactfully but clearly communicated Green Slate’s focus on a specific clientele.
Business Wants vs. User Needs
I strongly recommended including pricing information to address a common user need, and stressed the importance of a positive user experience for the business. Despite my recommendation, the owner declined the addition, and I agreed, avoiding further escalation for the sake of professionalism.
I documented the situation, acknowledging its potential impact on future page performance, and plan to revisit it with ownership later.
08. User Testing and Feedback
Test Objectives
The prototype usability test aimed to assess if I had adequately addressed user needs during the early stages of the redesign and whether this resulted in a more intuitive user experience compared to the original.
I wanted to determine the clarity of Green Slate’s available services, the effectiveness of the portfolio’s gallery layout, and whether simplifying site navigation had contributed to a more streamlined interaction for users.
Test Design
The assessment captured users’ initial impressions to assess the prototype’s clarity and ability to communicate Green Slate’s goal and abilities. It then conducted page evaluations where testers completed tasks and rated their performance doing so.
Test Execution and Feedback Collection
Seven unmoderated usability tests were conducted using Google Forms for flexibility.
Feedback was gathered through a survey that used qualitative and quantitative data collection methods, including confidence scales, short answers, and true/false questions.
For example, a tester was asked to locate a list of available services, rate how well they felt they completed the task, and explain why they gave that rating.
Users struggled to locate a list of services, prompting the addition of a dedicated Services page in the main navigation
Insights and Findings
Key testing insights underscored the need for clearer mission communication on the home page, the addition of a dedicated Services page, and the inclusion of detailed descriptions for Green Slate's contributions in the portfolio section.
Overall, though, feedback reaffirmed the redesign's alignment with the goal of improving a user’s journey through the website, satisfying the company’s needs while remedying user pain points.
09. Implementation
Planning for Green Slate’s Future
I translated user feedback and several design iterations, spanning a variety of fidelity levels, into a user-centric Squarespace website, focusing on scalability and ease of future editing.
During pre-launch user testing, I assessed page content clarity, ensured seamless navigation, and checked mobile responsiveness. Additionally, I performed performance optimization and cross-browser checks, confirming that WCAG 2.1 guidelines were met or exceeded.
The final iteration of the website harmoniously blends user-centered design with Green Slate's mission, ensuring a seamless and purposeful digital experience for its users.
10. Reflection and Next Steps
Challenges and Insights
The Green Slate website redesign marked a major milestone in my UX career, and I’m quite proud of what I achieved, both for the company and its users. However, there were some challenges along the way that are worth noting.
First, I was a UX team of one. Despite the project's success, an agile team would have been ideal, especially were this a more complex project.
Most frustrating, however, was the owner’s disregard for user feedback. Despite my emphasis on meeting user expectations, major pain points—like lack of pricing details or positive testimonials––remain unaddressed because they opted not to include those features. The best I can do is closely monitor site traffic to assess the impact of these omissions.
The Future of this Design
Moving forward, monitoring and analytics will provide insights to further refine the user experience. A before-and-after comparison of website activity levels will gauge the redesign's impact on company engagement.
Continuous evolution will be fueled by user feedback and real-world usability testing. An agile, user-centered approach could incorporate A/B testing and updated surveys to guide further adjustments based on data-driven assessments.
Identifying common user journeys will inform intuitive shortcuts, making for a more intuitive user experience and adhering to Nielsen Norman Group’s seventh heuristic, Flexibility and Efficiency of Use.
Finally, I will seek direct stakeholder feedback, including insights from ownership and employees, to ensure ongoing alignment with organizational goals and user needs.