Los Alamos Website Navigation Redesign

The website for Los Alamos National Laboratory(LANL) is rich with information and resources about the lab's research, mission, business collaboration, and education and a complete redesign of the external site's navigation was implemented to help improve the overall user experience of an external, as well as internal(employee), audience.

Duration: May 2023 - June 2024

Role

UX Researcher

Task Included

Creating competitive analysis, conducting user interviews, creating personas, journey mapping, conducting surveys, usability testing

Tools

Figma, Userzoom, Microsoft Teams, Google Sheets, Google Forms

The Problem:

The website for Los Alamos National Laboratory is rich with information and resources about the lab's research, mission, business collaboration, and education, but the navigation and search features were confusing and difficult to use for both the public and lab organizations. With public outreach an increasingly critical part of the lab's agenda, we needed to rethink and overhaul the experience, structure, and interactions.

The Solution:

Over the course of 13 months, we set out to create a navigation system that was scalable, accessible, and accommodates both user needs and organizational priorities. Most importantly, the navigation system respects the wide variety of ways in which people seek out information.

Los Alamos

UI/UX Team

The UI/UX team is a dedicated team at LANL that ensures all web and interactive experiences are user-friendly and accessible.

"We create digital experiences with users in mind."

Our Process

Process Strategy

Discover

Understand: Benchmark Testing

We added anecdotal feedback from internal users about what they did not like about the current navigation system and what the resulting information architecture limitations were. But we had very little data on how an external audience perceived or interacted with the UI.

We conducted a series of benchmark tests that measured how people interacted with the homepage and navigation and what their emotional and/or cognitive responses were

Utilizing Userzoom, we gave 16 participants two tasks. The first task asked users to navigate to a 4th level subpage using the existing navigation system. The second task asked them to backtrack to the parent topic. We hoped to understand what parts of the navigation system users interacted with, how successful they were in completing their tasks, and any unknown pain points.

Post-test we extracted and collected the data and synthesized results. The team then collectively analyzed the results to understand their impact on the new UX design. We found that the results were positive and upended some of the anecdotal assumptions that the navigation system was difficult to use. The system mostly fit with existing mental models.

Watching the screen recordings, however, gave us further insight into exactly how users engaged with navigation. Problem areas that surfaced were the lack of dropdown menus, placement and identification of breadcrumbs, and unfamiliar language. The recorded interactions confirmed that users mostly weren't engaging with the secondary navigation and that information seeking isn't a linear path, even when seekers are given a task with linear steps.

Participant Quotes During Benchmark Testing:

"My immediate thoughts on the navigation of the Los Alamos website are that it feels kind of dated and clunky/unintuitive. Not necessarily from a visual aspect, but more from a user interface perspective"

"The inability to navigate to any page on the website directly from the home page. This would be fixed by making a navigation bar at the top of the home page into a drop down sub-menu/navigation tree interface."

"The words are big and I know it might not be much but being able to read easier catches my attention and I'm more likely to click on the site."

"It doesn't feel intuitive to look at "lists" of navigation laterally vs vertically. I inherently want to look down not across. There are so many options and sub-categories, it is a bit confusing."

*The results of each test guided changes in the next iteration.

Empathize

We extracted data from an early internal survey about users experience with the lanl.gov homepage. During the survey, navigation and design challenges surfaced. We also gained insights into users' priorities, interests, and general willingness to engage with the website and content

We found that visual design was an area that needed improvement. User response to the current design was divided, but in subsequent usability tests, we found recurring themes of what did or did not work.

Empathize: Persona Creation

We leveraged the collective knowledge of public affairs and communications partners to build possible personas we wanted to target. This helped not only the UX/UI team understand our users, but provided our stakeholders insights into the human centered design process.

Persona Takeaway's

LANL has a large and diverse audience with a variety of interests
Navigation needs to be easy and as intuitive as possible

Empathize: Journey Mapping

Based on early surveys, we created emotional journey maps for two targeted user groups: students and potential employees.

The journey maps were initailly created for understanding user engagement with the homepage, but we found they were equally applicable to the navigation experience.

Understand: Information and Seeking Analysis

This board examines audience groups and their potential interactions with the new nav/search UI. This exercise reflects on core information seeking models & hypothesizes user behavior and needs. Those user behaviors and needs are mapped to the nav/search UI of a sub-page to determine what actions users might take upon entering the page.

The relationship between audience interest/impact and the nav/search UI influence feature visibility and design

Using information seeking models, we mapped our user goals, behaviors, and content to proposed navigation patterns

This exercise occurred late in the design development phase but it is an excellent example of the iterative process of design thinking.

Re-evaluating early research ensures that design remains true to discovery findings.

This led us to move away from an especially minimal design to richer display. We traded some elegance for functionality.

Explore: Pattern Analysis and Best Practices

To assist with pattern analysis and best practices we began evaluating navigation systems for 9+ large, complex organizations researching navigation patterns.

Extracting ideas for structure, hierarchy and interaction to adapt and test.

Creating a shared board of research conducted on mobile UI/UX design for nav/search.

Define

Define: Problem

Problem Statement:

The website for the Los Alamos National Laboratory (LANL) is rich with information and resources about the lab's research, mission, business collaboration, and education. But the navigation and search features were confusing and difficult to use for both the public and lab organizations. With public outreach an increasingly critical part of the lab's agenda, we needed to rethink and overhaul the experience, structure, and interactions.

Define: How Might We

As a team we generated How Might We statements to brainstorm and address issues that we noticed from collected data from previous benchmark testing results.

Define: Hypothesis

We collaborated on possible hypothesis's to help address the How Might We statements from before.

Define: UX Design Strategy

Hierarchy:

We decided to keep site hierarchy in user's mind as they browse or navigate through the site:

They should understand how many levels down they are when exploring the site-which means they need a visual cue, traditionally breadcrumbs. Page templates can also be used to reflect hierarchy.
Create distinct top-level categories with very little blur. Keep laboratory jargon to a minimum.
Top level categories should be familiar to users: About, Careers, Science, Operations, Mission, and Strategic Plan
2nd tiered page should be closely tied to their parent page in topic.

Support Information Seeking:

We recognized that users will depart from the prescribed map and follow their own information scent based on need or motivation. we needed to:

Provide cues that anchor them(I was in this category, but by following that link, I'm now in another category)
Provide an "escape hatch"(I don't want to be here, I need to go back 2 pages)
Understand that users may not remember where they where at two or more steps back.(I saw a link that might be more helpful than the one I actually clicked on. Where was that again?) A new-ish user returning a day or week later may want to revisit a topic page but may not remember how they got to that page or what the parent category was.
Anticipate that a user may not have a clearly defined idea of what they are looking for. It may be vague or casual, or they may be browsing the site in order to clarify their need.
Anticipate that a user may have a clearly defined destination or need. They could be comparing one product or service with a different organizations. They could be a frequent user who knows their destination and has been their before.(Checking a job posting or reviewing benefits again after a job interview; retrieving a report or checking to see if the report has been published; periodically searching the news site; referring content to a colleague or friend.

Define: Interaction Flow Analysis

Using information seeking models, we mapped user groups goals, behaviors, and context to proposed navigation patterns.

We created several flow charts to map out the paths users might follow to a destination.

The maps revealed the potential number of clicks, decision points, and cumulative efforts in the process. Results form the interaction flow included:

building the navigation model to relieve cognitive overload by limiting the depth of the global menu and picking up sub-topic exploration in the secondary menu.
Simplifying the sitemap hierarchy's true to discovery findings.

The maps helped show us better understand the path a user might follow to a destination as well as helping to reveal fewer decision points and decreasing cognitive effort.

The interaction flows were important for the development team as they evaluated how to model the new navigation and sitemap models.

Develop

Develop: Sitemap

Original Sitemap

The old sitemap clearly displayed a overwhelming amount of disorganized starting positions for any potential user along with a wealth of call to action buttons that seemed confusing to users.

New Sitemap

The new sitemap helps to organize the wealth of resources within Los Alamos national Laboratory into well defined categories that users could explore along with cementing a utility navigation that helped to convey resources that the lab's stakeholders wished to display.

Sitemap Translation to Navigation

Develop: Ideation

Navigation Pattern Structure

Secondary Navigation Interaction

Before prototyping, the design team extracted more complicated test cases from the sitemap and mapped corresponding menus. The partial sitemap helped to guide the structure of the prototype.

Low Fidelity Interaction: Version A

Very early in the process, we began testing complex use cases against patterns we were interested in, such as Unilever and Harvard University. These frames roughly map out a navigation flow, from homepage to 5th level sub-page. We found that there wasn't an existing pattern that met the entirety of our vision and needs.

Low Fidelity Global Navigation

Low-fidelity exploration of structuring the information architecture in the global navigation

Design Considerations

Usability first
Micro animations to help ground users
Iconography as signifiers(arrows vs carets)
Minimization of effort and friction
Menu hierarchy and scanning through typography and grouping
Recognition over recall
Minimization of necessary learning curves

Ease of task completions
Accessibility(WCAG3 & screen readers)
Scalability & flexibility
Brand identity
Structure and consistency
Interactions

Iteration 1

We decided against this design direction very quickly:

saturated colors are visually heavy
too much to look at (visual noise)
it would "age" very quickly
the designers didn't want to look at it for the next several months

Iteration 2: Horizontal Pattern

Iteration 3: Vertical Pattern

Mobile Navigation Iteration

Iteration continued

We were getting closer with this design, but we would have several more rounds of smaller iterations across every element, from the top navigation bar to the links.

Exploring broadly and with curiosity

As we researched common navigation patterns, instead of picking one and adopting the site to it, or visa versa, we decided to explore widely. This gave us the ability to find solutions we might not have otherwise considered.

We had two significant iterations, and each included multiple smaller interactions or design changes. The iterations and final design pattern were determined by user testing results.

Develop: Prototype

About

Our strategy was to create a high fidelity product that surfaced and addressed every possible usability and structural issue before beginning the development process. Because of the complexity of the system, the cost of backtracking in the middle of development would have been more costly than time spent prototyping.

The UX design team spent four weeks on the first prototypes, and then another three months iterating between tests.

Strategy

We wanted to ensure that we would:

Create a realistic product for testing and development team analysis
Use the worst case scenarios- the ones that would "break" the navigation
Create high fidelity interactions to work out pain points in:
- navigation structure
- task completions
- interaction sequences
- sitemap translation
- edge cases
- readability

Extracted Sitemap

Before prototyping, the design team extracted more complicated test cases from the sitemap and mapped corresponding menus. The partial sitemap guided the structure of the prototype.

Having the visual representation:

coordinated the efforts of multiple designers
focused on the pages needed and their hierarchical relationships
mapped the interaction journey & surfaced potential problems

Navigation Flow(Desktop)

Navigation Flow(Mobile)

When doing the same process for mobile, we found that:

the interaction flow for two navigation models had to be adapted to mobile view
There were two possible models(A was selected) and subsequent task verification tests confirmed our hypothesis

Develop: Prototype & Testing

About:

Over 5 months we conducted 10 tests as we iterated on designs and interactions. Each test was designed to answer an overarching question as well as smaller questions.

Interactions
Readability
Task Completion
Visual Design Preference
Structure Viability

*We applied the results of each test to subsequent iterations.

Prototype usability and quality control: 4 participants
Benchmark test of original navigation: 15 participants
Navigation A/B testing(horizontal vs vertical): 41 participants
Horizontal vs Vertical Navigation preference test: 100 participants
Navigation click test: 73 participants
Navigation A/B test(expanded vs condensed): 50 participants
Navigation click test(task completion): 73 participants
Second navigation preference test: 100 participants
Search (icon vs search bar) preference test: 100 participants
Mobile navigation usability test: 15 participants

Develop: Horizontal vs Vertical Navigation

Horizontal Navigation:

Vertical Navigation:

For our first usability test, we conducted A/B test for horizontal vs vertical navigation patterns. While the results were close for some aspects, users ultimately preferred and performed better with a horizontal navigation design

Testing revealed a number of pain points for both navigations, and we addressed these in subsequent iterations. Additionally, we learned several important lessons about testing with general audiences, such as keeping tasks simple and avoiding complex concepts and terminology.

Develop: Condensed vs Expanded Navigation

For our second iteration, we explored the possibility of a "condensed" secondary navigation vs the expanded form of secondary navigation. By necessity, LANL had long link titles and often several pages under a topic. We hypothesized that there might not be a difference in effort between truncating a menu with a "More options" or wrapping the entire menu under "Explore sub-topis". This hypothesis was not supported by A/B testing

Condensed Navigation:

Expanded Navigation:

While the condensed navigation functionally and logically worked better for managing the complexity of our sitemap and organizational behavior, it did not improve task completion. While users seemed to prefer the condensed navigation after learning how it worked, for new users, it wasn't a good strategy to expect willingness to form a new mental map.

Develop: Mobile Navigation

During the develop phase, the team concurrently designed for desktop and mobile. Some of our considerations included:

adaptive over responsive
menu placement
pushing content down instead of an overlay to keep users anchored to the page they are on
contextual menus that open to where users are in the sitemap and highlight the page they're on

Mobile Global Menu

The global menu opens in panel overlays, focusing on one topic menu at a time. Design considerations included:

avoiding confusion between the browser back button and the navigation panel back button
contextual responsiveness
progressive disclosure

Mobile Design Iteration 2

Iteration 2 tested a typical responsive hero pattern and secondary navigation below. However, we felt that the limited screen space made the design "crunchy". In iteration 3, we experimented with a more adaptive design that incorporated an asymmetrical hero and moved the navigation above the banner.

Usability tests confirmed our hypotheses. Users quickly completed their tasks and were pleased with the design.

Mobile Design Iteration 3

Part of the mobile navigation redesign included updating the banner layout. We:

re-designed the hero to accommodate smaller screen sizes and the inevitable lengthy page title
created an interstitial screen to address slow loading of images due to poor connectivity

After completing our fourth design iteration, we conducted usability tests through Userzoom to verify its ease of use. For the test, we assigned a simple task and measured task completion time along with task success rate. We also recorded the sessions and reviewed them for any behavioral insights. unlike some of the early iterations of the desktop patterns, the mobile experience was far more successful.

One of the team's most successful design decisions was placing the secondary navigation above the banner. In most UI patterns, it's found below the banner, if at all. We hypothesized that it would be easier to find and use, and the menu title would be another anchor for the user within the sitemap. We also thought that users might generally like having it above the banner. Usability test confirmed these hypotheses.

As we prototyped, we built an extensive component library that allowed us to test existing menus via components with properties. Component menus allowed us to create hundreds of interactive variants very quickly.

Deliver

Final Global Navigation Design

Final Utility Navigation Design

Final Secondary Navigation Design

Navigation Redesign: Going Forward

Impact:

A redesign of the Los Alamos National Laboratory's external websites navigation design, site structure, and search functionality will allow first time and novice users of the site a more enjoyable and efficient experience. By streamlining the flow of information from the vast amount of LANL's resources, web pages, and organizations, we help to encourage users to spend more time on the site.

What We Learned:

We learned that, while the current navigation system is usable and functional for users that are already comfortable with the Los Alamos National Laboratory website, there needs to be an ongoing effort to improve site functionality, layout, and content to encourage new users.

Next Steps:

1

Allow external users the ability to provide feedback on the new design of the Los Alamos National Laboratory's external website to have data from which to continue making iterations.

2

Start collaborating with organization stakeholders to begin the process of changing the lab specific scientific jargon to a more user friendly laymen's terminology as to not confuse visitors of the site.

3

Start research into the internal search functionality and determine what research could be done to improve overall search results to assist users in their site navigation.