Change font size of site
Change contrast of site

Creating a modern homepage for an agency that works to push energy technology forward

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.

Working with the OTT, we Marie Kondo-ed their home page and navigation — slimming down bloated content, shifting focus more on the OTT programs, and building a one-of-a-kind site that won’t blow the bank or OTT developer’s patients.

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: Leverage the components of existing DOE Drupal websites to build a site that better describes the services OTT provides, who those services are for, and when you need to apply to take advantage of them.

  • Client
    • Department of Energy:
      Office of Technology Transition
  • Skills Used
    • Service Design
    • UX Design
    • Visual Design
    • User Testing
Image of a user journey the follows the career path of an employee.

Planning the project

With this project being a two month sprint, it was important that the client and I understood the requirements and had a clear plan of execution. Using Envision, I built an interactive project schedule where we recorded the final requirements for the project, the order in which we will work on those requirements, and identify any key meetings and handoff deadlines.

Image of a user journey the follows the career path of an employee.

Auditing the OTT site and evaluating competitors

I interviewed numerous managers and staff at the Office of Technology Transitions to better understand the goals of the organization and their opinions on the current site. I also reviewed their competitor’s websites site structure and how they position themselves within the market. I made a deck of both a user testing synthesis and competitors analysis deck to present my findings to our client.

Reorganizing the navigation

One of the first things I wanted to address was the poorly organized and labeled navigation.

Splitting OTT programs into Talent Development and Funded Programs was confusing to users as some programs fall into both of those categories. Instead, I consolidated all programs into one dropdown titled Our Programs.

I also added an Other Services dropdown where we can include other tools and services OTT provides besides their programs.

Lastly, to clean up the navigation I combined the current, dedicated Chief Commercialization Officer page with the existing Staffing and Leadership page.

Image of a user journey the follows the career path of an employee.

Building a Drupal component library and low-fi mockups

Drupal is the unofficial governments content management system (CMS). By combing through other DOE pages and gathering existing elements, I was able to build low-fi wires that both address the needs of our client and are easy for developers to implement.

Once designed, I review these low-fi wires with both our client at the Office of Technology Transitions and the developers who will be converting my wires into working code.

Image of a user journey the follows the career path of an employee.

Designing a slimmer, cleaner and more direct home page

After reviewing the low-fi wires with the client and getting developer approval, I designed hi-fi version of the home page. The main goals of this redesign was to remove unnecessary information and overly complicated components while focusing on the more important features of OTT; the programs and services they offer to the public.

The wires were designed in Adobe XD and followed the same styles and spacing as existing components on DOE websites. This insured that the site not only looked professional, but also mirrored the final product.

A header, events, and newsletter updates

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, next to that, a newsletter sign up block that describes what you get from signing up for the newsletter.

These changes make the top section of the site inviting, professional, and practical for users.

Putting programs front-and-center

The main objective of OTT is to promote the advancement and commercialization of energy technology by providing funding and research programs. In the new site design we’re putting these programs front-and-center, creating a designated program section.

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 to focus more finding what program works for them.

Additional services, news, and support

OTT doesn’t just offer programs; they offer marketing and policy analysis as well as access to the DOE national lab directory. When redesigning the site, I included these services in their own section. Beneath that is a slimmed-down news and press release section where we removed the description copy and left the titles as links to their respected landing page. Lastly, I add a program support link that takes users to the OTT contact page and a secondary newsletter sign up block to end the section.

Social accounts and success stories

I replaced the old site’s confusing and poorly executed 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.

Future improvements

While this project was for the homepage, there was the potential of this becoming a larger, digital overhaul for the Office of Technology Transition. 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 assessing superfluous components from pages.

Image of a user journey the follows the career path of an employee.