Bethany Hunter | UX Portfolio - Work: National Academies of Sciences, Engineering and Medicine

Project Overview

The National Academies of Sciences, Engineering, and Medicine (NASEM) needed to consolidate their fragmented digital presence. Each of the Academies—Science, Engineering, and Medicine—had separate online platforms, leading to a confusing experience for not only the general public but also important policymakers and researchers who depend on their content. The goal was to unify their websites under a single, responsive, and user-friendly platform, while also enhancing accessibility and usability. This project would serve to streamline the public's access to critical information and improve internal content management.

My Contributions

As the Lead UX Designer, I spearheaded the website redesign and led the development of a cohesive design system. I worked closely with cross-functional teams to ensure that the new digital experience not only met the needs of diverse users but also aligned with NASEM’s brand standards.

I took ownership of the user experience from discovery to deployment, conducting usability tests, guiding visual and interaction design, and leading the creation of a scalable design system that unified the three Academies. I also provided ongoing support for the sub-brands within the Academies, ensuring consistency and scalability across their entire digital ecosystem.

The Challenge

Inconsistent Branding: The existing digital presence mirrored the structure of three separate organizations, leading to a lack of cohesion.

Confusing Navigation: Content was difficult to find, with unclear paths to important information needed by the public and policymakers.

Outdated Experience: The website needed a modern, responsive design to improve accessibility and engagement across all devices

The Results

Designed, developed and documented over 100 reusable, responsive components.

Consolidated hundreds of page templates into just a handful, streamlining the content creation process.

Conducted usability testing targeting six discrete user groups to ensure the new experience aligned with their needs.

Enabled NASEM’s internal team to manage and scale the site efficiently.

Draft Homepage Redesign

Approach & Execution

Style Exploration Samples

Discovery and Design

I began by working closely with NASEM’s internal team to conduct a deep-dive discovery, analyzing existing user journeys and gathering insights from key stakeholders. Through a series of workshops, I helped refine the goals for the project:

Streamline user access to critical content.
Unify the online presence of the Academies under a single design framework.
Improve internal workflows for content creation and management.

We created initial wireframes and ran usability tests with key audience segments, including policymakers, scientists, and media professionals. These sessions provided essential insights that informed the iterative design process.

Design System and Component Development

In order to maintain consistency across the vast network of pages and platforms, I led the creation of a robust design system. This system allowed NASEM’s internal team to quickly build and manage content in a way that was cohesive and user-friendly.

Component Library: I designed and documented over 100 responsive components and we delivered them to NASEM and their dev partner using Storybook.js. These components were then integrated into Oracle Cloud (their DXP), allowing for flexibility and reuse across different pages and configurations.
Scalability: By implementing reusable components and establishing clear layout guidelines, I ensured that the design system could easily scale across sub-brands and future initiatives.
Accessibility: The design system incorporated real-time accessibility testing, ensuring the highest standards for usability and inclusivity across all user types.

Template Documentation Sample

“LookThink ensured we heard and understood our users as we worked internally to unify hundreds of our websites. They were a true partner throughout the long process of updating our site. Their expertise was essential to building a streamlined, user-friendly experience that highlights our work.”

– Executive Director, National Academies Press

Storybook.js components

Development and Implementation

I collaborated with NASEM's Oracle development partner, Redstone Content Solutions, to ensure a seamless transition of the designs into a functional, responsive website. Together, we implemented Vue.js components, ensuring they worked within Oracle Cloud. We also tested the components in Storybook.js, allowing for rapid development and easy quality control checks.

In parallel, I helped create detailed documentation and guidelines to support NASEM’s internal teams in content management and future site enhancements. This ensured that they could maintain consistency and scalability as the organization evolved.

“LookThink worked hand-in-glove with us providing honest feedback, helpful insight and a multitude of best practices based on their many years of experience. We could also count on them to brainstorm ideas and offer creative solutions. Their estimating process, reporting, development tactics and other processes were all transparent and timely. I look forward to our future projects together!”

– Principal, Redstone Content Solutions

Unifying the Academies