Leaf Maintenance
My role
UX designer
UX Researcher
Visual designer
Tools
Figma
Adobe Illustrator
Adobe Photoshop
Adobe Premiere Pro
Contribution
User interview
User persona
Ideation
Deign System
Prototyping
Wireframing
Duration
12 weeks
Leaf Maintenance – A Fresh Start for a Green Brand
Leaf Maintenance reached out to me with a website that felt cluttered, repetitive, and hard to navigate. Visitors struggled to understand the company’s services, and important details were buried under confusing menus and outdated visuals. For a business built on trust, professionalism, and sustainability, their online presence wasn’t sending the right message.
The old Leaf Maintenance website
Project Overview:
I led the redesign process from research to final delivery, focusing on transforming a cluttered, hard-to-navigate site into a clean and user-friendly experience.
The Problem: The old Leaf Maintenance site was filled with repetitive content, confusing service descriptions, and cluttered menus. Users couldn’t easily tell what the company offered or how to contact them. The visual identity also felt outdated and inconsistent across pages.
The Role: I led the redesign process from research to final delivery, focusing on transforming a
cluttered, hard-to-navigate site into
a clean and user-friendly
experience.
The Goal: Design a modern, easy-to-navigate website that builds trust, highlights Leaf Maintenance’s services,
and provides a seamless user
experience across
all devices.
Responsibilities:
-
User research & interviews
-
Personas & journey mapping
-
Wireframes & prototypes
-
UI design & usability testing
Design Thinking Process
Empathize​​
-
User interviews
-
Pain points
-
Competitor audit
Define
-
User personas
-
User Emphaty
-
Problem statements
Ideate
-
Site map
-
Feature planning
-
Prototypes
-
Wireframes
-
Mockups
Design
-
Usability testing
-
Feedback iterations
Test
Empathize​​
User Interview
To better understand user needs, I designed a set of interview questions targeting both homeowners and contractors. These interviews were meant to uncover frustrations with existing green roofing services, as well as expectations for an improved digital experience.
Summarize Key Questions:
-
How do you usually find information about green roofing services?
-
What challenges do you face when using company websites?
-
What kind of details would make you feel more confident in choosing a roofing provider?
-
How do you prefer to communicate with or book a company (phone, email, online form, etc.)?
-
What frustrates you the most when comparing different providers?
User Interview Pain Points
Users struggled to find trustworthy, detailed content on existing websites.
Lack of Clear Information
1
Homeowners and contractors wanted examples of past projects and clear evidence.
Missing Proof of Expertise
2
Booking and inquiry processes felt complicated, causing missed opportunities.
Confusing Contact Flows
3
Photos of real plants and roof transformations reassured and excited users.
Need for Visual Trust
4
Insights from Interviews: Users clearly valued trust and clarity. They wanted easy ways to see past work, proof of expertise, and a booking process that didn’t feel like guesswork.
Competitor Audit
Looking at competitors like LiveRoof, Skyspace, Ginkgo, and ZinCo showed us the same pattern: cluttered websites, unclear booking flows, and weak visuals. This confirmed our focus on clarity, trust-building visuals, and a smoother user journey for Leaf Maintenance.
Why It Matters for Leaf Maintenance
Competitor Logo
Competitors
Understand how extensive product information and systems support user trust
What to Evaluate
ZinCo Canada
Product variety and technical specs
Skyspace Green Roofs
Ginkgo Sustainability
LiveRoof Ontario
Localized brand, streamlined flow, educational content
Scale, innovation, additional living elements
Modular system, technical depth, rapid installations
Learn how visuals and narratives build trust in a local context
Explore integration of tech and eco-friendly storytelling
Leverage clarity in service structure and horticultural details
Opportunities from the Audit: From competitor audits, we saw that many sites failed at clean navigation and strong visuals. This pushed us to prioritize easy-to-follow flows and authentic, real-life imagery that instantly built confidence.
Define
Personas
To keep our designs grounded, I created two personas that reflect users’ goals, frustrations, and motivations. These personas guided every design choice, ensuring the experience stayed focused on real needs.
Empathy Map
I built an empathy map to capture what users say, think, do, and feel when exploring Leaf Maintenance’s website. By combining Emma’s and Daniel’s perspectives, I could clearly see their frustrations and motivations around green roofing services.
Key Insights
-
Trust through visuals: Users want real before/after project photos and clear examples, not generic stock images.
-
Simplicity matters: Complicated, multi-step quote processes lead to frustration and drop-offs.
-
Transparency builds confidence: Clear service breakdowns and upfront pricing help users feel secure in their decisions.
Problem Statement
Property managers and real estate agents need a simple and trustworthy way to explore green roofing services online. But most existing websites feel outdated, with poor visuals, unclear pricing, and complicated booking flows — leaving users uncertain and unable to make confident decisions.
Ideate
Sitemap
I redesigned the website structure to make information clear and accessible. The sitemap highlights key sections—About, Projects, Services, Blog, and Contact—so users can quickly find what they need. This clear hierarchy replaced the cluttered old menus and created a smoother path to booking and exploring Leaf Maintenance’s work.
Future Planning
Looking ahead, there are several ways to build on the redesigned Leaf Maintenance website:
Interactive Project Galleries
​
Showcase before-and-after visuals and real examples to build user trust.
Simplified
Booking Flows
​
Streamline quote requests and scheduling to save time and reduce effort.
Enhanced
Accessibility​
​
Strengthen contrast, labels, and responsiveness to make browsing easier for all.​
Mobile-First
Optimization
​
Ensure smooth browsing for property managers and homeowners on the go.
Design
Prototype
After mapping the sitemap and planning the core features, I moved into prototyping to bring the redesign to life. Starting with wireframes, I explored different layouts to simplify navigation and highlight Leaf Maintenance’s unique services. From there, I refined the designs into clickable prototypes that let users experience the booking flow, explore project galleries, and view pricing details in a realistic way. These prototypes became the foundation for testing how well the new design worked in practice.
From there, I refined the designs into clickable prototypes that let users experience the booking flow, explore project galleries, and view pricing details in a realistic way. These prototypes became the foundation for testing how well the new design worked in practice.
Wireframes
I turned the sitemap into high-fidelity wireframes to bring the Leaf Maintenance redesign to life. Using real copy and visuals, these layouts show how content, navigation, and interactions work together on desktop and mobile, creating a clear and user-friendly experience before final mockups.
Mockups
Test
Usability Testing
For Leaf Maintenance, I recommend framing this as a moderated usability test. Here’s why:
​
-
Moderated sessions give you richer insights because you can ask follow-up questions while participants interact with the website.
-
Since this is a website redesign, context is important—hearing participants’ immediate thoughts while navigating helps identify where they hesitate or get confused.
-
Moderation also allows you to test specific flows like booking a service, exploring project galleries, or checking pricing transparency.
Usability Test Parameters
​
-
Type: Moderated remote test
-
Participants: 5 users
-
Prototype: High-fidelity interactive prototype of redesigned website
-
Tasks: Explore service categories, view project gallery, request a quote, and find pricing details
-
Session Style: 30–40 min moderated sessions with screen-sharing and think-aloud
-
Goal: Identify points of confusion in navigation, booking, and information clarity
Participants loved seeing real project photos but wanted easier ways to browse by type or location.
​
→ I introduced clear categories and filters to improve navigation.
Project Gallery Navigation
On smaller screens, some buttons felt too close together and text was harder to read.
→ I adjusted spacing, improved contrast, and optimized touch targets for accessibility.
Mobile Experience
Thanks for scrolling!