Heading
This is some text inside of a div block.
client
DTG Recycle
date
2024
The project hero image

DTG Recycle Website Relaunch

UX/UI, Creative Director, Analyst, Site Builder

The problem

DTG Recycle approached Whereoware in a state of urgency. The company had recently undergone significant management changes, resulting in a neglected website. On top of that, the site had never accurately represented their offerings, voice, or level of professionalism, and it was failing to convert visitors.

After our kickoff meeting with the client, I knew we needed a lean and efficient approach, focusing on rapid prototyping and a blurring of lines between design and development. I spearheaded a strategic shift, reallocating hours from administrative tasks to activities that directly added value. Despite the tight budget and strict timelines, I saw an opportunity for a transformative project.

diagnosis

I led the requirements gathering, creative direction, design, project management, and information architecture, beginning with a UX audit of the current site. This audit helped us understand what was working and what needed improvement. My informal annotations, with a touch of humor, resonated with the client, highlighting fundamental issues beyond a simple visual refresh. This exercise established trust and demonstrated our expertise, reassuring the client of our ability to guide the project effectively despite their busy schedules. See below for an interactive example of the audit presentation.
I decided to start with a fresh WordPress instance and use Elementor Pro due to its extensive user base, robust support material, ability to create Loop Grids, compatibility with Advanced Custom Fields, ease of accepting CSS and JS overrides, and support for advanced layouts with flexbox controls. I was given access to WPEngine, where I added a new site and managed the development, testing, and production environments.

Information architecture

The next step was overhauling the navigation and IA. The existing site had odd and unintuitive structures: the About page contained service information instead of company history, leadership, and mission. The facilities drop-down had so many locations it extended beyond the screen on a 1920x1080 display. Press releases were labeled as Updates, which could confuse users seeking service updates or facility closures. Detailed information on material recycling was more prominent than the actual recycling services offered. Additionally, high-profile services like portable restroom rentals for events and a new landscaping mulch business were absent from the navigation.
Screenshots of DTG Site map diagrams
I created a modular site map in Figma, enabling quick iterations by dragging and dropping items. We finalized a more intuitive and streamlined navigation after collaborating with the client through various versions. This included a utility navigation bar featuring their phone number, service alerts, and a link to the client portal. The main navigation was reorganized to highlight Services, which are now showcased with a visual mega menu.
One business requirement I couldn't change was the insistence on grouping portable restrooms under Site Services, the construction-focused internal unit handling this product, along with services like street sweeping. However, DTG wanted to increase its event rentals business, and navigating to Site Services was not intuitive for those customers. We solved this by adding a top-level Event Rentals navigation item that grouped the same services (portable restrooms and dumpsters) in a context that was logical for event planners.

facility finder

DTG operates numerous recycling facilities where customers can drop off materials. The current site listed these facilities primarily by location, but customers needed to know which materials each facility accepted. Additionally, accepted materials and location-specific status alerts could change. I designed and implemented a real-time, filterable list allowing users to select the materials they want to recycle to find an appropriate location. Users could then drill down for more detailed information, all editable by the client via custom backend fields. I also renamed this section "Drop-Off Locations" to reflect its purpose accurately. Because these facilities were now templatized, they could be reused and linked more efficiently throughout the site, for example, on a service page.

FINAL design

My concept for the site's visual design was to juxtapose rough, gritty textures with clean, bright sections to represent the business's core function: transforming waste into something clean and reusable. The primary customers were construction companies, and the old site didn't reflect the company's rugged and powerful nature. Additionally, their social media presence was genuinely funny and playful. I sold the client an additional block of hours for copywriting punch-ups to bring this confident playfulness into the headings and subtitles. The stakeholders loved the bold new look, feeling that the tone matched who they were and set them apart from the competition.

View the live site: https://www.dtgrecycle.com/
A screenshot of the DTG home page

Key Improvements

Elevated Existing Strengths:
  • Beautiful photography and video
  • Engaging social media voice
Removed Inefficiencies:
  • Duplicate and outdated content
  • Bugs and accessibility issues
  • Low-value, repetitive SEO junk content
Modernized Platform:
  • Migrated to a new/clean Wordpress instance with all the latest updates
  • Switched the latest version of the popular Elementor Pro platform vs their old builder which was so obscure I don't even remember the name
Enhanced User Experience:
  • Thoughtful and intentional navigation and information architecture
  • Logical and attractive page structure
  • Impactful and engaging copywriting
  • Improved forms with conditional logic
CMS and Content Management:
  • Intuitive CMS for easy content updates
  • Ability to quickly spin up location-specific landing pages
“I AM SO EXCITED. Seriously, this is one of my favorite projects I have ever worked on.”
- Alyssa Place, Sr. Marketing Specialist, DTG