top of page
Transforming a really big, really confusing website.
By taking a look at one specific page... the portfolio.
Greasing the wheels on the energy supply chain.
Helping to redesign a massive, dense, complicated website to be more user friendly and actionable - so that manufacturers can get the funds they need.
New
Old
A Little Background Info
A federal office was created in 2022 to distribute over $20B of federal funding, develop new research, and to lead a workforce development program started in the 1970s. Their site was hard for users to understand, and they often had calls to explain their mission and programs. The team wanted people to understand their mission and program structure from navigating the website, as well as how to apply for their offerings, and to demonstrate their investment success in an easy to understand way.
Step 1:
Content Structure
Originally, the portfolio page was simply a list of funds that are awarded through various grants.
However, users come to a portfolio page expecting to see more than just a list of awards. They expect to see all the products and programs and offerings.
The client internally organizes these offering into three silos: they call them the Areas of Focus.
So the decision was made to bring the Areas of Focus into the portfolio page. However, this creates many layers of pages and clicks in order for users to arrive at the content they're searching for.
Through interviews and guided conversations, we realized that these Areas of Focus make up the bulk of the MESC portfolio and should be incorporated into the page.
The Areas of Focus work well from an internal point of view - but not so much from an external one. So we identified the content that users are targeting and pulled those pages up one level within the site map, effectively grouping like-things together.
Step 2:
Wireframing
Big header to improve hierarchy and reinforce the brand / mission
Simple repeatable sections for each portfolio item with clear language along with primary and secondary actions that connect users to associated content.
Card components for sections that have more than 2 actions, for instance the Analysis section, which links to multiple reports.
A secondary card component that take users to the Department's topic pages - which tie in MESC's mission to the greater mission of the DOE.
Step 3:
Mockups
Step 4:
Rejoice
A Little Background Info
A federal office was created in 2022 to distribute over $20B of federal funding, develop new research, and to lead a workforce development program started in the 1970s. Their site was hard for users to understand, and they often had calls to explain their mission and programs. The team wanted people to understand their mission and program structure from navigating the website, as well as how to apply for their offerings, and to demonstrate their investment success in an easy to understand way.
So basically, our client had a problem. Their website was:
Too confusing
Hard to navigate
Users can't understand the mission and goals
Users have trouble taking actions on page
And they wanted us to:
Make the portfolio page easier to understand
Improve navigation to other pages
Include the Program Areas (I'll explain in a sec)
Make page more actionable
Emphasize the impact that MESC is
Step One:
Content Structure.
1. Back to basics - what is the purpose of this page?
However, users come to a portfolio page expecting to see more than just a list of awards. They expect to see all the products and programs that MESC enables.
MESC internally organizes their offerings / content into three distinct categories - they call these the Areas of Focus. Within these categories we find these like grant pages, special programs, and analytical reports.
So the decision was made to bring the Areas of Focus into the portfolio page. However, this creates many layers of pages and clicks in order for users to arrive at the content they're searching for.
Our big realizations was that the Areas of Focus work well from an internal point of view - not an external one. Organizing content like this on the website actually decreases usability. So we pulled the target pages up one level and grouped like-things together.
Resulting in...
Our client considered the portfolio to be a list of funds that are awarded to manufacturers through various grants.
2: What about all of this stuff over here?
3: Is this the best way to do this?
4: Let's simplify
The new portfolio! By getting rid of unnecessary layers of webpages, and consolidating like-things together, we were able to emphasize and feature the actual portfolio items in a clean, user-friendly way.
Step Two: Wireframing
Big header to improve hierarchy and reinforce the brand / mission
Simple repeatable sections for each portfolio item with clear language along with primary and secondary actions that connect users to associated content.
Card components for sections that have more than 2 actions, for instance the Analysis section, which links to multiple reports.
A secondary card component that take users to the Department's topic pages - which tie in MESC's mission to the greater mission of the DOE.
Step Three:
High Fidelity Mockups
Who's going to write all of these titles, subtitles, and paragraphs?
Oh, dang it. It's me. I wrote all of the language on this page by reviewing and synthesizing language on other webpages and reports.
We realized right here that the images just aren't sitting right. So we tried to fix them.
Nope, still don't like them.
Let's get rid of them.
Step Four:
Get a really good idea
The client wanted to emphasize the impact MESC has in an easy, quantifiable way.
So what if we grabbed the stats and numbers from the latest published report and featured them prominently at the top of the page?
Fantastic.
Oh yeah, lookin' good.
So clean, so usable.
Step Five:
Mobile
Yup, looks great.
Step Six:
Rejoice
bottom of page