Redesigned Core Pages
Homepage, service pages, and outreach content redesigned for clarity and trust-building.
Green Mechanics Website Redesign UX Research & Design Case Study
UX Research & UI Design / 2025
A 9-month UX research project uncovering how an environmental engeneering BLLC nonprofit could better communicate its mission, services, and impact to the people it serves.
Project Overview
Help visitors decide if Green Mechanics is the right fit 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 Meetings
- 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 clear goal: understand what users needed from the Green Mechanics website and where the current experience was falling short. 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
We identified three distinct user groups: past clients, internal staff, and collaborators, and recruited roughly equal representation across all three to ensure findings reflected the full range of stakeholder perspectives.
Methods – Contextual Inquiry
We conducted semi-structured interviews with 14 participants. Each session followed a shared set of core questions, with follow-up questions adapted in real time based on participant responses and behaviors, allowing us to probe unexpected directions without sacrificing consistency across sessions.
Usability testing was embedded directly into each interview. Participants navigated the live site while sharing their expectations, mental models, and trust signals, giving us behavioral observation and self-reported data simultaneously.
- 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 insights directly informed our design decisions
Synthesis
With 14 interviews across three audience segments, synthesis required a structured approach. We combined affinity mapping to cluster emerging themes, qualitative coding of session notes, and quantitative tallying of recurring pain points producing both the pain point bar chart and the thematic groupings that drove our How Might We framing and design priorities.
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
Synthesis at Scale
Working across 14 interviews and three distinct user groups taught me that synthesis is its own research skill, separate from data collection. Grouping insights at a high level before diving into specifics helped surface patterns that individual sessions obscured. Combining affinity mapping, qualitative coding, and quantitative tallying gave the team a shared language for prioritizing findings and communicating them clearly to the client without losing nuance in the process.
Clearly defining team communication protocols reduced misunderstandings and created a more efficient and collaborative workflow.
Communication is Key
Weekly client check-ins significantly improved transparency and kept expectations aligned throughout the project. Clearly defining team communication protocols early reduced misunderstandings and created a more efficient collaborative workflow, this applies equally to research stakeholder management as it does to project management.
Know Your Limits
Scope creep is a real research risk. Being realistic about what was achievable within our timeline meant we could concentrate effort on the insights and design directions that mattered most, rather than spreading too thin. Knowing when to constrain a research scope is as important as knowing what to investigate.
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)
