Redesigned Core Pages
Homepage, service pages, and outreach content redesigned for clarity and trust-building.
Green Mechanics Website Redesign
UX Research & UI Design / 2025
Project Overview
Enable visitors to figure out if Green Mechanics is right for them in five clicks or less.
Create a user-friendly website that showcases their environmental services and allows potential clients to quickly understand Green Mechanics' offerings.
9 Months
End-to-end UX Redesign
Before & After
Impact & Outcome
Interactive Prototype
Delivered full high-fidelity Figma prototype to support client implementation.
Scalable Design System
Created a modular design system enabling future site growth and consistency.
Understanding the Problem Space
Our Team's Assumptions
- Users had difficulty understanding the services offered
- Visual design lacked credibility
- Content was too technical and unclear
- Navigation was confusing
Client Meeting
- Emphasized the importance of showcasing impact, not just listing services
- Wanted a website that builds trust and feels professional
Competitive Analysis
- Compared 3 similar sustainability-focused websites
- Found others used clear categories, client success stories, and testimonials
- Identified lack of branding and trust signals on current site
User Interviews
- Conducted 14 participant interviews
- Pain points: confusing layout, unclear mission, and no visible proof of impact
- Insights directly informed design decisions
Sprint Timeline
Before each sprint, we outlined clear plans to guide our work in our project sprint plan. We held weekly check-in with the client to stay aligned, and closed each sprint with a client retrospect to reflect, gather feedback and adapt our approach moving forward.
1
Grounding & Goal-Setting
We aligned with our client on mission and scope through a kickoff meeting, content audit, and competitive peer analysis. We identified design gaps and set a clear foundation for the project.
2
Research & Real Voices
User and stakeholder interviews uncovered pain points around clarity, navigation, and trust-building, which shaped personas and a new site map.
3
Ideas into Interfaces
Using Crazy 8s and sketching exercises, we translated research insights into low-fidelity wireframes to explore layout options.
4
Brand & Visual Identity
Through a branding workshop, we established Green Mechanics' design system and brand guidelines.
5
Polish, Test & Deliver
We refined designs through iterative prototyping, tested usability with stakeholders, and finalized client-ready deliverables.
Research Strategy & Goals
We began our research phase with a goal to improve content clarity and showcase Green Mechanics’ services more effectively. Our research was driven by the following question:
“What are the expectations of users who visit the Green Mechanics website and how well does the website showcase available services and past projects in a way that is visually appealing and easy to navigate?”
Target Audience Segmentation
- Past Clients
- Internal Staff
- Collaborators
Methods – Contextual Inquiry
- User Interviews: Conducted with 14 participants
- User Testing: We embedded usability testing into each interview. Participants shared their expectations and described what they needed in order to trust and understand Green Mechanics’ services. These insight directly informed our design decisions
Artifacts Developed
Customer Journey Map
We developed a Customer Journey Map to visualize the experience of key user groups, identifying frustrations, expectations, and trust-building opportunities across stages.
Pain Point Bar Chart
Bar chart summarizing recurring user pain points across navigation, messaging, and trust-building elements. This quantitative analysis of interview data highlighted common patterns and directly informed our design priorities and content strategy.
How Might We Framing
Building on our research, we identified key focus areas using "How Might We" framing to structure actionable design solutions.
Research Highlights
Our research helped us gain a clearer understanding of the marketing and content design improvements that would align with both user needs and client goals.
01
Content & Messaging Challenges
- Dense technical language confused non-expert audiences
- Mission and values were unclear or buried
- Service descriptions lacked plain language clarity
02
Trust & Credibility Gaps
- Missing proof of impact (case studies, client stories, metrics)
- Inconsistent visual design and branding reduced credibility
- Site lacked trust-building content and signals
03
Navigation & Usability Pain Points
- Users struggled to locate services and understand full offerings
- Visual distractions reduced focus
- Navigation labels lacked clarity
Design (UX Principles in Action)
1
Information Architecture & Navigation
- Restructured navigation using card sorting insights
- Grouped services into intuitive categories
- Simplified homepage for quicker comprehension
2
Visual Hierarchy & Branding
- Established consistent typography, colors, and iconography
- Highlighted trust-building content through hierarchy
- Used authentic project photos in place of stock imagery
3
Content Strategy & Messaging
- Rewrote services in plain language
- Clarified mission statements
- Added case studies and impact metrics
4
Accessibility & Usability
- Responsive design for mobile and tablet devices
- Improved spacing, contrast, and font sizing
- Applied accessibility best practices
Reflection & Outcomes
This project reinforced the power of user-centered design to simplify complex information, build trust, and align design solutions with real organizational goals.
- Clarified services and simplified complex content for potential partners
- Aligned design decisions closely with client needs through weekly collaboration
- Strengthened skills in information architecture, content strategy, and trust-building UX
- Delivered a complete high-fidelity prototype, content recommendations, and scalable design system
What I Learned
Communication is Key
Having weekly check-ins with the client significantly improved transparency and helped keep everyone on the same page, allowing us to address concerns early and keep expectations clear throughout the project.
Clearly defining team communication protocols reduced misunderstandings and created a more efficient and collaborative workflow.
Work Smarter, Not Harder
When working with a large volume of interview data, grouping insights at a high level helps simplify the analysis process. It makes it easier to identify common themes, prioritize key takeaways, and communicate findings clearly without getting overwhelmed or lost in the details
Know Your Limits
Don't be afraid to adjust your project’s scope and priorities to align with timeline constraints as you progress. Being realistic about what is achievable and what isn't helps you concentrate on what truly matters
The Team
Team
- Andrea Tavakol
- Chris Esmele
- Jummy Adelaja (me!)
- Sharvonne Sisco
- Stephanie Apollon
Roles
- UI Designer
- UX Researcher
- Project Manager
(Roles were rotated after each sprint)
