The Office of Technology Transitions’ (OTT) goal is to bring new, innovative, and reusable energy technology to the commercial market through funding and educational opportunities. Unfortunately, their current site is bloated with unnecessary content and doesn’t reflect the modern mission of the agency.
I worked with OTT leadership to make their site cleaner, clearer, and more useful to their target market. And, because I redesigned the site using existing components, implementing this new design won't break the bank or piss off developers.
The Problem:The OTT home page and navigation is unorganized, bloated with unnecessary copy and components, and isn’t useful for both OTT employees and users interested in applying to their programs.
The Opportunity:OTT has an amazing portfolio of programs, services, and success stories that we can feature on the site and DOE has tons of existing sites where I can steal existing components to use in a site reskin.
The Solution:I leveraged the existing features in their Drupal theme to build a modern site that better describes the services OTT provides, who those services are for, and when you need to apply to take advantage of them.
This project was a two month sprint and it was crucial that the client, developers, and I understood or objectives and had a clear plan of execution.
Using Invision, I made a interactive project schedule that we used to record final requirements for the project, benchmark deliverables, and mark down key meetings and deadlines. Everyone had access to this schedule and we often referenced it throughout the sprint.
I interviewed numerous managers and staff at the Office of Technology Transitions to better understand their opinions of the current site and how it falls short of the future goals of the non-profit.
I also did a deep dive into their competitors; picking apart their sites and study how they depict themselves within the DC non-profit community.
Armed with this information, I presented both competitor analysis and user testing feedback to the client and discussed how OTT can better position themselves.
One of the first things I wanted to address was the poorly organized and labeled navigation.
Instead of splitting programs between two categories, I consolidated all OTT programs into one, simple "Our Programs" dropdown.
I also added a section for additional, non-program specific tools and services that OTT provides.
Lastly, I consolidated individual employee pages into a single "Staff and Leadership" page.
Because of its security features, Drupal has become the government's site manager of choice. It's also known to be simple, safe, and stale.
By combing through other OTT Drupal based sites and pulling the best components of each, I was able to build low-fidelity wires that addressed the needs of our client, aligned with the skills of our developers, and looked original and professional.
In these designs I cut down on unnecessary content and complicated components, putting focus on the programs and services that OTT provides.
The wires were designed in Adobe XD and and because the designs used existing components on other OTT sites, they not only looked professional, but they accurately mirrored what the developers can build.
I replaced their old, post-based header with a full-width image overlayed by the OTT’s new tagline. Below that we have a calendar feed showing important dates and deadlines for OTT programs and information on their newsletter with the option to sign up.
These changes make the top section of the site inviting, professional, and practical for users.
The main objective of OTT is to "promote the advancement and commercialization of energy technology by providing funding and research programs", so it makes since that we create a designated section on the home page for these programs and funding opportunities.
Each programs will have a short description, the status of the current program—whether it’s closed or open for enrollment—and who can benefit from applying, Programs will also use the same image background, cutting down on cognitive load and allowing users o easily determine which programs are right for them.
OTT doesn’t just offer programs; they offer marketing and policy analysis as well as access to National Lab directories. While these services aren't used as often as their programs, they are extremely useful and warrant a space on the home page.
Beneath that is a simplified new and press release section that takes up half as much space as the old site.
I replaced the old and oddly designed 'Connect with Us' section with a more straightforward, social media focused section. Each OTT social account will feature their tags that will link to their respective pages.
We also pulled four individual OTT success stories to be placed in an interactive gallery at the bottom of the page. This component replaces the elaborate, Tableau generated story map. This puts projects made possible by OTT funds and programs the focal point of the section.
While this two month sprint was only for the home page, this project has the potential to become a lager digital overhaul for the entire Office of Technology Transitions digital presence. After handing the final wires off, I provided a half-dozen suggestions for larger improvements to the OTT site, including improving the individual program pages, providing better support for users signing up for programs, and removing superfluous components from pages.
