Chevron iconBack to top.
A mock-up of the Green Slate website.

Green Slate Redesign

A website redesign prioritizing usability, accessibility, and visual appeal, strategically repositioning the company to better reach their target audience.
Briefcase icon
Client
Green Slate Landscape Construction
Person in circle icon
My Role
UX Designer, User Researcher, Web Strategist
Hourglass icon
Timeline
June-September 2023
Paintbrush icon
Tools Used
Figma, Google Forms, Squarespace

Design Process

The Green Slate redesign's design process.The Green Slate redesign's design process.
Trophy icon
Product Snapshots
A screenshot of the homepage of a landscape construction website
A screenshot of a website promoting recent projects
A screenshot of a website with a grid of gallery images
A screenshot of the contact page of a website

My Impact

Arrow up right icon
Shipped full end-to-end redesign swiftly, collaborating closely with company leadership across all stages, from research and design to implementation and testing.
Eyeglass icon
Defined project vision, conducted robust user research, and established product framework, validating design decisions with interactive prototypes for a dynamic and user-centric redesign.
2 arrows in circle path icon
Delivered a cohesive, seamlessly integrated design with a scalable foundation, allowing future teams to build upon and extend the project.
understand

Background

The Client
Green Slate, a family-owned landscape construction company in Monroe, WA, sought a comprehensive digital overhaul to effectively highlight their range of services, spanning from plantings and maintenance to multi-million dollar exterior redesigns.
Their outdated website failed to showcase their capabilities and connect with their target audience, while confusing copy and accessibility concerns prevented them from communicating their brand identity.
Trash can icon
The Legacy Site
A screenshot of the legacy site's landscape offerings page.
A screenshot of the legacy website.
A screenshot of the legacy site's Metalwork page.
A screenshot of the legacy site's contact page.
"how might we" statement
How might we redesign Green Slate's website to effectively communicate premium services, foster user trust, and highlight unique offerings?

User Personas

To better define our target audience, two representative user personas were developed.

Primary User Persona

A persona avatar of a man with short, brown hair and a beard.
Harry
Financial analyst
Moderately tech-savvy
“I want my home to make a statement, but I need someone who understands my budget constraints and provides hassle-free maintenance.”
Motivations
A beautiful, functional outdoor space
Hassle-free service with transparent pricing
Challenges
Concerned about post-installation maintenance
Needs to see detailed service descriptions, successful past projects, and client testimonials
Behavior
Researches businesses on his tablet or desktop at home

User Personas

To better define our target audience, two representative user personas were developed.

Primary User Persona

A persona avatar of a man with short, brown hair and a beard.
Harry
Financial analyst
Moderately tech-savvy
“I want my home to make a statement, but I need someone who understands my budget constraints and provides hassle-free maintenance.”
Motivations
A beautiful, functional outdoor space
Hassle-free service with transparent pricing
Challenges
Concerned about post-installation maintenance
Needs to see detailed service descriptions, successful past projects, and client testimonials
Behavior
Researches businesses on his tablet or desktop at home

Secondary User Persona

A persona avatar of a young woman with short, dark hair.
Emma
Real estate agent
Very tech-savvy
“Time is money in real estate. I need landscaping solutions that enhance property value quickly and offer reliable service for my ongoing business needs.”
Motivations
Quickly increase the sale value of properties she represents
Establish a go-to landscape service for regular business
Challenges
Needs to balance quality and cost to maximize property values
Works on tight deadlines to prepare homes for sale
Behavior
Conducts online research on her phone while on the go

Secondary User Persona

A persona avatar of a young woman with short, dark hair.
Emma
Real estate agent
Very tech-savvy
“Time is money in real estate. I need landscaping solutions that enhance property value quickly and offer reliable service for my ongoing business needs.”
Motivations
Quickly increase the sale value of properties she represents
Establish a go-to landscape service for regular business
Challenges
Needs to balance quality and cost to maximize property values
Works on tight deadlines to prepare homes for sale
Behavior
Conducts online research on her phone while on the go
research

User Expectations

I surveyed 10 users that met the criteria for Green Slate's target audience to establish a foundational understanding of their needs.
“What information should be accessible within seconds?”
Statistics from the user expectations survey.
Statistics from the user expectations survey.
“What influences your trust in a landscape construction website?”

10/10

wanted clear, concise service descriptions

9/10

wanted transparent pricing information

8/10

wanted to see positive client testimonials

7/10

thought including company mission was important

Usability Testing the Legacy Site

Building on insights from persona creation and the user expectations survey, user testers performed tasks and provided feedback on their experience using the old website.
Information icon

Services Offered

Projects don't explain Green Slate's contribution
Gallery images unrelated to service offerings
Hand tap icon

Interaction

Nav bar nonfunctional on some pages
Interaction animations felt slow and clunky
Paintbrush icon

Visual Design

Full bleed background obscures content
Gallery grid is overwhelming
Target icon

Corporate Identity

Unprofessional employee bios
No information about goals or mission
analyze

Competitor Analysis

Criteria
Nussbaum Group's logo.Terrain's logo.Alderwood Landscaping's logo.
Value proposition
Expertise in landscape services with a proven process
25 years of luxury exterior construction
Luxury exterior construction with elegant design
Target audience
High-end clientele
General audience interested in luxury landscaping
High-end clientele
Website strengths
Cohesive visual design
Intuitive layout
Broad experience
Social media integration
Elegant website design
Social media integration
Website weaknesses
Accessibility concerns
(color contrast, font size)
Inconsistent typography
Inconsistent page formatting
Distracting auto-play videos
Inconsistent page formatting
Navigation structure
Some issues with gallery organization
Intuitive
Intuitive
High-quality photos
A checkmark icon.
A checkmark icon.
A checkmark icon.
Concise body copy
An X icon.
An X icon.
An X icon.
A competitor analysis for three of Green Slate's rivals.

How to Compete

Key Insights from Competitor Analysis
Camera icon
Invest in high-quality photography to better showcase successful projects.
Left justified list icon
Reduce excessive text to improve content clarity and readability.
Megaphone icon
Implement strong, strategically-placed calls to action to guide user engagement.

Heuristic Analysis

Based on NN/g's 10 Usability Heuristics for UI design

Heuristic 1
Visibility of System Status

An hourglass icon
Transition animations too slow to convey feedback from user interaction
A clock with exclamation mark icon
Excessive wait times with no visible state indication
A 1 icon.

Heuristic 1
Visibility of System Status

An hourglass icon
Transition animations too slow to convey feedback from user interaction
A clock with exclamation mark icon
Excessive wait times with no visible state indication
A 2 icon.

Heuristic 2
Match Between System and Real World

A speech bubble with ellipsis icon
Internal jargon used to describe core services
A person with an exclamation mark icon
Employee bios don't articulate their roles or expertise
A screenshot of Green Slate's legacy website showing internal jargon.
A 2 icon.

Heuristic 2
Match Between System and Real World

Internal jargon used to describe core services
Employee bios don't articulate their roles or expertise
A screenshot of Green Slate's legacy website showing internal jargon.
A 2 icon.

Heuristic 2
Match Between System and Real World

A screenshot of Green Slate's legacy website showing internal jargon.
A speech bubble with ellipsis icon
Internal jargon used to describe core services
A person with an exclamation mark icon
Employee bios don't articulate their roles or expertise
A 2 icon.

Heuristic 4
Consistency and Standards

A mouse cursor with a line through it icon
Limited interactivity with navigation bar buttons
A house icon
Site logo doesn't return user to home page
A phone with an exclamation mark icon
Contact icons in header are unresponsive
A 2 icon.

Heuristic 4
Consistency and Standards

A 2 icon.
A mouse cursor with a line through it icon
Limited interactivity with navigation bar buttons
A house icon
Site logo doesn't return user to home page
A phone with an exclamation mark icon
Contact icons in header are unresponsive
design

Design Goals

Refined through the research above, the following were the most prominent redesign goals, as agreed upon by Green Slate's leadership team.
Location with magnifying glass icon
Improve usability, navigation, and accessibiliy sitewide by implementing intuitive navigation, optimizing page loading speed, and ensuring compatibility across devices.
Document with magnifying glass icon
Improve content clarity and service information by utilizing user-friendly language, providing concise service descriptions, and organizing information into scannable sections.
2x2 square grid icon
Declutter visual elements to reduce cognitive load and define brand identity by minimizing distractions and maintaining consistency and restraint in design elements.

Information Architecture

Users struggled to find services and often got lost while navigating the legacy website. To address the first design goal, information architecture was refined to improve navigation and general usability.

Before

The legacy site's information architecture.

After

The revised information architecture.

Wireframes

I translated the second and third desgn goals into wireframe sketches, then fine-tuned these into mid-fidelity prototypes in Figma for usability testing.
Design Goal
02
Document with magnifying glass icon
Improve content clarity and service information
  • user-friendly language
  • concise service descriptions
  • scannable chunks of information
03
2x2 square grid icon
Declutter visual elements to reduce cognitive load
  • minimizing distractions
  • maintaining consistency
  • practicing restraint in design elements
Wireframe Sketch
A wireframe sketch of the About page.A wireframe sketch of the Portfolio page.
Interactive Prototype
A mid-fidelity prototype of the About page.A mid-fidelity prototype of the Portfolio page.
Design Goal
Improve content clarity and service information
  • minimizing distractions
  • maintaining consistency
  • practicing restraint in design elements
Declutter visual elements to reduce cognitive load
  • minimizing distractions
  • maintaining consistency
  • practicing restraint in design elements
Wireframe Sketch
A wireframe sketch of the Portfolio page.A wireframe sketch of the About page.
Interactive Prototype
A mid-fidelity prototype of the About page.A mid-fidelity prototype of the Portfolio page.

Iteration Based on User Feedback

User input drove iterative improvements leading into the prototype testing phase.
“I wish each project included a description so I knew what Green Slate contributed.”
Before
Legacy Site
After
Prototype
A screenshot of the legacy website.A mid-fidelity wireframe showing the addition of project details.
Project examples in a gallery grid with no context
Project details are added to each portfolio piece
user testing

Prototype Testing

I conducted usability testing on the interactive prototype with seven participants, aiming to gauge whether the research and design phases aligned the redesign with the most prominent user needs.
A prototype flow for the Green Slate website redesign.A prototype flow for the Green Slate website redesign.
Test Objectives
Assess if user needs were adequately addressed and whether this resulted in a more intuitive user experience.
Test Execution
Qualitative and quantitative data collection methods were used for an unmoderated usability test, including
  • confidence scales
  • true/false questions
  • short answer responses

Test Design

01
Assess initial impressions of the redesign
An arrow pointing down and right.
What is this home page for?
Who is this home page for?
02
Evaluate content clarity and service descriptions
An arrow pointing down and right.
How easy was it to understand the web page?
Was the home page clear and concise?
03
Page evaluations where testers perform critical tasks
An arrow pointing down and right.
Find Green Slate’s portfolio of past projects.
Send Green Slate a project inquiry.

Insights from Prototype Testing

Compared to the baseline usability test

7/7

found the prototype easy to understand compared to 5/10

7/7

thought it was impactful, clean, and organized compared to 4/10

6/7

were confident that Green Slate was trustworthy compared to 4/10

Redesign Opportunities

Though most feedback was positive, some users encountered challenges with certain aspects of the design.
3D stacked squares icon
Services offered should have a dedicated page instead of including it on the About page.
Rectangle on rectangle with plus icon
Explicit descriptions of Green Slate’s contribution should be included for each portfolio project.
3x1 square grid above 1x2 line grid icon
The Portfolio gallery should be organized by project, not by service type.
implementation

Accessibility

We ensured the redesign aligned with WCAG 2.1 accessibility standards, one of Green Slate's core goals.
WCAG 2.1 practices met or exceeded
Photo icon
Added alt text to all imagery
Eyedropper icon
Improved color contrast to exceed level AAA compliance
Keyboard icon
Enabled keyboard navigation for alternative navigation pathways
Location icon
Implemented logical focus order for improved mouse-free navigation
Before
An infographic showing the color contrast of the legacy site.
After
An infographic showing the color contrast of the new site.

Pre-Launch Testing

After translating the design to a Squarespace site, I conducted a final test before launch. Seven participants tested the desktop site, while another seven tested the mobile site.
Test Results
Result statistics from the pre-launch test.Result statistics from the pre-launch test.

Launch

In August 2023, the redesigned Green Slate website launched, blending robust user research and human-centered design with a mission-driven digital experience.
Airplane departure icon
Launched with Squarespace for future scalability and ease of hand-off
Gauge at 33% capacity icon
Performance optimization tested using PageSpeed
Network icon
Completed cross-browser compatibility checks for both desktop and mobile
Accesibility icon
WCAG 2.1 met or exceeded sitewide
Trophy icon
Redesign Showcase
A screenshot of the homepage of a landscape construction website
A screenshot of a website promoting recent projects
A screenshot of a website with a large image of a landscaping project
A screenshot of a website with an overview of a landscape construction project
A screenshot of a website with a grid of gallery images
A screenshot of a website with a lightbox image of a landscape construction project
A screenshot of the contact page of a website
reflection

Challenges and Opportunities

Business wants vs. user needs

Green Slate declined to include pricing information and client testimonials despite overwhelming user feedback from both the baseline and prototype usability tests.

Opportunities

Building with columns icon
Identified key areas for future improvements, serving as logical starting points for V2.
Binoculars icon
Explored alternative ways to build user trust and convey value through the site’s visual design.
Hammer icon
Crafted a UX that emphasizes personal engagement and the bespoke nature of Green Slate’s services.

What's Next?

If time allows for another iteration of the Green Slate website, there are a few features I will prioritize.
Sheild icon
A logo refresh would better reflect the company's revamped visual identity. Despite rich symbolism connected to their busines model, its use of multiple colors creates a disconnect with the website's modern, minimalist design.
Graph with upward trend icon
Website analytics will offer a clear roadmap for website improvements. Tracking metrics like traffic acquisition and user engagement can serve as a foundation for future iterations.
Arrow pointing opposite directions icon
Including before-and-after comparisons for portfolio projects would allow users to visually assess Green Slate's contributions rather than relying solely on descriptions and final outcomes.
Other case studies
A mockup of the Hourglass app on an iPad
Hourglass Productivity Timer
Product Design, 3D Modeling
An arrow pointing right icon
A mock-up of the SafetyNet app.
SafetyNet App Prototype
UI Design, User Research
An arrow pointing right icon
Made with
in Seattle
© 2024 Addison Pann