Goal 01
Clarify the Services
Organize Trinity's five service lines so prospective clients could quickly understand its capabilities and explore additional details without leaving the page.
Strategy, Design, Development, and Launch
Building Trinity Environmental's digital presence from the ground up
Trinity Environmental had the expertise, field experience, and professional credentials to support complex construction projects, but no established website to communicate any of it.
I led the strategy, UX/UI design, front-end development, technical setup, launch, and handoff of the company's first full public website.
The finished experience gives contractors, developers, site owners, and infrastructure teams a clear way to understand Trinity's capabilities, evaluate its experience, and make direct contact.
Overview
A clear public experience for a complex environmental services business
Trinity Environmental supports construction projects where environmental compliance, field execution, and demanding project schedules intersect. Its capabilities include SWPPP development, BMP installation, routine inspections, permitting and regulatory support, and geotechnical field services.
With no established website in place, this was not a visual refresh. The project required defining how a complex and growing business should present itself online for the first time.
I organized the experience around the decisions prospective clients needed to make. Visitors can understand Trinity's services, connect those services to relevant project environments, review the credentials behind the work, learn about the company, and reach the appropriate contact without navigating a large or complicated website.
The final one-page experience uses focused sections, real field photography, service and industry details, accessible interactions, and direct contact paths to make Trinity's capabilities easier to evaluate. The work also established the technical foundation behind the website, including responsive development, technical SEO, consent-aware analytics, privacy controls, secure routing, launch backups, documentation, and account handoff.
- Project Type
- B2B Environmental Services Website
- Audience
- Contractors, Site Owners, Developers, and Infrastructure Teams
- Focus Area
- Service Clarity, Credibility, Project Fit, and Contact
- Scope
- Strategy, UX/UI, Development, SEO, Analytics, Launch, and Handoff
01 Problem Statement
A complex service business with no clear way to evaluate it online
Before Trinity's full website was created, prospective clients had no complete online destination where they could understand the company's capabilities, determine whether Trinity supported their type of project, review its professional credentials, or find the right contact.
Trinity's work spans environmental planning, regulatory compliance, field installation, routine inspections, permitting support, and geotechnical services. Presenting everything as one long list would have made the business difficult to understand. Reducing it to a few broad claims would have hidden the range and technical depth of what the company could actually deliver.
The challenge was to translate how Trinity operates into a clear client-facing experience. The website needed to communicate both field execution and technical expertise without overwhelming visitors with industry language or making Trinity look like a generic environmental contractor.
02 Goals & Success Criteria
Make Trinity easier to understand, trust, and contact
The website needed to support the way prospective clients evaluate an environmental services partner. Visitors needed to quickly understand what Trinity does, recognize where its experience applies, verify the qualifications behind the work, and reach the appropriate contact. The finished product also needed to function as a dependable business asset that Trinity could own and operate after launch.
Evaluation Criteria
- Service Clarity
- Credibility
- Project Relevance
- Launch Readiness
Turn operational capability into a clear client decision path
Every major section needed to answer a practical question:
- What services does Trinity provide?
- Does Trinity work on projects like mine?
- What experience and credentials support the work?
- How do I start a conversation?
The experience also needed the responsive behavior, accessibility, search visibility, analytics, privacy controls, documentation, and account ownership required for responsible public use.
Goal 02
Establish Relevance and Credibility
Connect Trinity's services to real project environments, professional credentials, leadership experience, and field photography that showed the work in practice.
Goal 03
Deliver a Complete Digital Foundation
Launch a responsive, searchable, measurable, and privacy-aware website with secure routing, backups, documentation, and a structured transfer of ownership.
03 Research & Discovery
Finding the clearest story inside a multifaceted operation
Discovery began with understanding how Trinity actually operates, what the company wanted to be known for, and what prospective clients would need to see before making contact.
I reviewed stakeholder input, service information, professional credentials, company background, existing brand materials, field photography, and business priorities. The objective was not simply to collect content. It was to determine what each piece communicated and where it belonged within a prospective client's evaluation of the company.
The research showed that Trinity's value could not be communicated through services alone. The website also needed to connect those services to relevant project environments, demonstrate the experience behind the work, and present technical qualifications as visible proof rather than background information.
What surfaced during discovery
Key Insights
- Trinity needed to be positioned as a full-service environmental partner, not as a provider of one isolated compliance task.
- The company combines field execution with technical, administrative, and regulatory expertise. Both sides of the business needed to be visible.
- Service information explained what Trinity could do, while industry experience helped prospective clients understand where those capabilities applied.
- Professional credentials, leadership experience, and field photography provided different forms of credibility and needed to support one another.
- Technical details needed to remain available without making the main page difficult to scan.
- Direct email and phone access were important because environmental and construction inquiries can be specific and time-sensitive.
How the direction was established
Methods
- Stakeholder discovery and business-priority review
- Brand, content, service, credential, and image audit
- Service and capability mapping
- Information architecture across five services, three priority industries, and four credential areas
- Content hierarchy and client evaluation-path planning
- Mid-fidelity exploration of multiple structural and visual directions
- High-fidelity prototyping, client review, and iterative refinement
04 Key Decisions
Turning business complexity into a clear decision path
Once Trinity's services, audiences, credentials, and priorities were understood, the next challenge was deciding how those pieces should work together.
The website needed to give first-time visitors enough information to understand Trinity without presenting every technical detail at once. Each section and interaction was designed to answer a specific client question while guiding visitors toward direct contact.
Decision 01
Organize the Experience Around Client Questions
The page was structured around the questions a prospective client would naturally ask:
- What does Trinity do?
- Does the company work in my project environment?
- What experience and credentials support the work?
- How do I start a conversation?
Organizing the website around these questions created a clearer evaluation path than presenting information according to Trinity's internal business structure.
Decision 02
Provide Detail Without Creating Page Sprawl
Trinity's services and industry experience required more explanation than a short card could provide, but separating every topic into its own page would have made the website unnecessarily large and difficult to navigate.
Service and industry modals allow visitors to open deeper information without leaving the main experience. An expandable credentials section keeps technical qualifications available while allowing the page to remain focused and easy to scan.
Decision 03
Treat Launch Readiness as Part of the Product
The project was designed as a complete public business asset, not simply a finished interface.
Responsive behavior, accessible controls, technical SEO, structured metadata, secure routing, consent-aware analytics, privacy policies, backups, documentation, and account ownership were included as part of the finished product.
This ensured that Trinity received a website that was prepared for real use and could continue operating after handoff.
05 Wireframes & Iteration
Exploring the structure before committing to the interface
I created multiple mid-fidelity directions to compare page hierarchy, content density, navigation, image use, service presentation, and overall visual tone.
The concepts explored different ways to balance Trinity's professional credibility with the field-based nature of its work. Some directions emphasized open layouts and large project imagery, while others used a more structured and corporate presentation.
Rather than selecting one concept without changes, feedback was used to identify the strongest elements from each direction. Those decisions were combined and refined into a high-fidelity clickable prototype.
The prototype established the final page structure, navigation behavior, service and industry interactions, credentials section, contact paths, and responsive priorities before development began.
Iteration continued during development as real content and field imagery were added. Layouts, modal behavior, expandable content, spacing, and mobile interactions were refined to ensure the finished website remained clear and usable across desktop, tablet, and mobile screens.
01
Concept exploration
Three distinct directions tested hierarchy, density, imagery, and visual tone.
02
Direction and refinement
Client feedback shaped the selected direction, then focused comparisons tightened the hero and service architecture.
06 Final Design
A focused website built around clarity, proof, and direct contact
The final website combines Trinity's navy and green visual identity with real field photography, clear content hierarchy, and direct language that reflects the company's work.
The opening experience quickly establishes what Trinity does and who it serves. From there, five service areas introduce the company's core capabilities, with additional details available through focused service modals.
Company and leadership information adds context behind the work. Three priority industry sections help prospective clients connect Trinity's capabilities to relevant project environments, while four credential areas provide visible proof of the team's technical qualifications.
Progressive disclosure keeps the main page easy to scan without removing important information. Visitors can explore detailed services, industries, and credentials when needed while remaining within one connected experience.
Direct email, phone, and office contact paths remain easy to find throughout the website. Responsive layouts, accessible interactions, and carefully planned mobile behavior ensure the experience remains clear and usable across devices.
The result is a professional public presence that represents both sides of Trinity's business: the technical expertise required to manage environmental responsibilities and the field capability required to execute the work.
Gallery 1 of 2
07 Conclusion
Launched October 6, 2026
A complete digital foundation Trinity can own and build from
Prospective clients now have a clear path through Trinity's capabilities, priority industries, company background, professional qualifications, and contact information. The finished website works across desktop, tablet, and mobile devices. It includes secure routing, accessible interactions, technical SEO, consent-aware analytics, privacy controls, launch backups, and documented account ownership.
What Worked
A clearer path through the business
Trinity's first full public website launched on October 6, 2026, giving the company a professional digital presence built around its actual services, project experience, credentials, and business priorities.
Prospective clients now have a clear path through Trinity's capabilities, priority industries, company background, professional qualifications, and contact information.
The finished website works across desktop, tablet, and mobile devices. It includes secure routing, accessible interactions, technical SEO, consent-aware analytics, privacy controls, launch backups, and documented account ownership.
Google Analytics, Google Tag Manager, and Google Search Console were connected and verified. The homepage was indexed, approved analytics events were recorded, and the client received the documentation and access needed to manage the website after launch.
What I Would Refine
Let real behavior guide the next version
As the website collects meaningful traffic and inquiry data, I would review Google Analytics and Search Console patterns to understand which services attract the most attention, how visitors move through the experience, and where stronger content or contact paths could improve performance.
Future refinements should be guided by real visitor behavior and business outcomes rather than assumptions.
What I Learned
Launch quality extends beyond the interface
This project reinforced that launching a professional website requires much more than designing screens and writing front-end code.
Positioning, content structure, responsive behavior, accessibility, search setup, analytics, privacy controls, account ownership, backups, documentation, and handoff all affect whether the finished website remains useful after launch.
The strongest outcome was not simply creating a better-looking website. It was translating a complex service business into a clear public experience and giving Trinity a complete digital foundation the company could own, use, and continue building from.