NINDS Intranet Redesign
Overview
For many organizations, the intranet sometimes becomes an almost forgotten online portal as was such for The National Institute of Neurological Disorders and Stroke (NINDS).
NINDS, an institute within the National Institutes of Health (NIH) strives to deliver fundamental knowledge about the brain and nervous system to reduce any burden of neurological disorders and disease. With hundreds of employees working tirelessly towards this mission, NINDS acknowledged a need for the easy dissemination of institute information across their different offices and a way to reduce the strain of finding that information. This led to the redesign of their intranet.
Client: National Institute of Neurological Disorders and Stroke (NINDS)
Work: NINDS Intranet Redesign
Design Tools: Figma
My Role
I am the lead UI/UX designer working to transform the NINDS digital experience. My role on the project was to lead the creative direction and handle all UI and Visual Design including:
Design Strategy & Ideation
UX Collaboration
Wireframes
High-fidelity Mockups
Prototypes
Client Presentations
Discovery
The Problem
When our NINDS client approached us for an intranet redesign, our initial impression was to modernize the current outdated and stale user interface. However, after a design brief, we discovered that our clients sought an intranet redesign where its users were 1. Not overburdened by a lot of content and 2. Felt engaged and connected to the tools and resources most relevant and meaningful to them.
The intranet redesign was two-fold:
User Interface Redesign (My Role)
Content Management
Design Challenge: Redesigning the NINDS intranet where all NINDS employees could easily navigate the site and find the resources and information that they were looking for.
UX Gathering
Before beginning the intranet redesign, we conducted a thorough UX gathering with our clients. What was unique about this process was that our clients were also our users (NINDS employees). During the UX gatherings, we reviewed feedback previously received from user intranet surveys. The survey feedback and client discussions allowed us to quickly identify and prioritize user pain points.
Top 3 User Pain Points:
Users found the ‘My Dashboard’ feature confusing and bulky.
Users did not understand the ‘My Links’ feature and how to use it.
There was no apparent indication that users were on the NINDS intranet vs. the NINDS public facing site.
Design Strategy & Ideation
After prioritizing user pain points, it was time to strategize and collaborate with the team on innovative solutions.
Pain Point #1: Users found the ‘My Dashboard’ feature confusing and bulky.
Design Strategy: The ‘My Dashboard’ feature displayed 10 visible tiles representing key tools and resources. Users customized their dashboards to show the top 10 resources most meaningful to them. When clicking on a tile dropdown it further revealed several links relating to that resource. The feature clearly burdened the user flow of completing tasks through one too many user clicks and a confusing UI interface design.
In a strategic approach to simplify the user’s experience, we restructured the intranet’s information architecture (IA) and made all pages directly accessible from the main navigation. We also eliminated the ‘My Dashboard’ feature and replaced it with a more intuitive component, ‘Popular Tools & Resources.’ This component removed the users ability to customize and instead, applied data analytics to determine and display the top six most visited links by NINDS employees.
Image: The original ‘My Dashboard’ design had a dropdown feature revealing all links related to the tiles resource.
Image: The original My Dashboard design allowed users to edit tiles with a click-and-drag motion.
Pain Point #2: Users did not understand the ‘My Links’ feature and how to use it.
Design Strategy: The purpose of the ‘My Links’ feature is to guide users to their favorite intranet pages that they visit often. We recognized that the original design gave users no indication of it’s purpose or even how it differed from the ‘My Dashboard’ feature. We considered adding a tooltip for users to specify its use, but ultimately landed on adding descriptive text next to the feature - being mindful to keep it short and easily readable. We also repositioned the ‘My Links’ component, making it more visible and easily accessible for users (view images and concept design under Visual Design).
Pain Point #3: There was no apparent indication that users were on the NINDS intranet vs. the NINDS public facing site.
Design Strategy: The original intranet closely resembled that of the NINDS public facing site especially with its use of global UI components and elements including, the header, navigation, and footer. After some internal deliberation and client discussions, we landed on creating a unique identity for the NINDS intranet. This included creating a stylized NINDS Intranet typeset, restructuring the header and footer design, and reviewing the NINDS style guides’ color palette for alternative color schemes.
Wireframes
I constructed several low-fidelity wireframes highlighting prominent components important to our users including, the ‘Popular Tools and Resources’ feature and ‘My Links’ feature.
Wireframe No. 1: This wireframe displays a prominent search and a two-column format for Popular Tools & Resources, My Links, Announcements, and Upcoming Events.
Wireframe No. 2: The wireframe displays the search and Popular Tools and Resources in a two-column format, while giving My Links its own free flowing, full screen debut.
Visual Design
I spent very little time developing and presenting wireframes to the clients. Reason being and something I’ve experienced more often than not, is that our clients were very eager to see the entire product over a layout of shaded gray boxes.
Building mockups is also my favorite part of the design process. This stage allows me to transform all of our user research, data analytics, and design strategy into a concrete end product.
I primarily designed a desktop version for the NINDS intranet. Not only do desktop views for the Intranet exceed that of mobile views, but our team also uses Drupal, an open source platform for digital experiences. The platform follows responsive design principles so mobile designs are automatically generated. However, it is critical that before any product releases that we always conduct a mobile design audit and work with our devs to address any design constraints.
During the mockup design phase, I provided the client with various mockup iterations of the UI & Visual Design components including, ‘Popular Tools & Resources,’ ‘My Links,’ and different color palettes.
Popular Tools & Resources
The previous intranet ‘My Dashboard’ feature used heavy stock imagery and gradients. I wanted to simplify the user experience through achieving minimalism and intuitive visual design. Thus, for the ‘Popular Tools and Resources’ component, I paired descriptive text with recognizable iconography. I love how using iconography also led to saving design space and creating a more structured and purposeful homepage layout.
Below: I provided clients with two mockups of the ‘Popular Tools & Resources’ design.
Design No. 1: This design includes a 2-3 line description of each resource.
Design No. 2: This simplified design removes the extra text from each resource and is ultimately what the client opted for.
MY LINKS
I thoughtfully positioned the ‘My Links’ feature above the homepage fold, but below the site’s header, search, and ‘Popular Tools and Resources’ component. This gave users immediate visibility and access to their favorite links.
Unlike it’s original blocky design, the new ‘My Links’ design flows effortlessly across the entire screen. It’s light gray background contributes to it’s free flowing nature, while also defining it’s boundaries from other web components.
Image: The original blocky ‘My Links’ design.
Image: The new ‘My Links’ design flowing effortlessly across the screen and includes descriptive text helping users to understand how to use the feature.
Color Palette
The use of color was especially important to our users. We wanted to create a unique identity for the intranet where the user did not confuse the public facing site with the intranet since many of our UI components and elements are used globally across both sites. In doing so, I created various mockup iterations using different color values found in our NINDS style guide until we won buy-in from the client for a purple monochromatic color scheme.
Below: Two different color schemes presented to the client, but never used.
Color Scheme No. 1: Mockup iteration using NINDS colors green and light teal
Color Scheme No. 2: Mockup iteration using NINDS colors navy and light teal
other features
We presented high-quality mockup iterations to clients at various stages of the product development. These client presentations helped us gather more user insight and additional client requirements that we did not receive during our initial UX gatherings discussion. A few of these things included:
Removing the Director’s Message from the Intranet homepage (as shown our original wireframes above)
The creation of the ‘What’s Happening at NINDS’ content boxes using stock imagery
Adding an operating status in the intranet header
Finalizing footer content and layout
Prototypes
I presented two prototypes to the client:
A prototype highlighting the hovering effects of the navigation and homepage link and taking users to an internal intranet basic page and events page.
A prototype walking clients through how users customize their ‘My Links.’
Final Design
After a number of design iterations, client presentations, and reviews, we finalized the intranet redesign. Our final design purposefully arranged UI components and elements in a hierarchal structure, bringing to the forefront what was most important to our users. The design also promoted a unique identity with the ‘NINDSintranet’ typeset, and monochromatic purple color scheme.
The Results
Our team uses data analytics and user surveys/feedback to determine the success of the new intranet redesign. We received an influx of compliments after the launch of the new intranet redesign.
” …all of the components and features that went into this major effort has evolved into such a modern, visually beautiful, and FUNCTIONAL site that is so much more inviting.”
User satisfaction of the intranet’s ease of use reached 98% and user engagement across the intranet increased by 45%. The numbers also showed enthusiasm around the new UI component, ‘Popular Tools & Resources,’ with an average user click rate of 225 users per month.
Final Thoughts
Often times as designers, we spend a good amount of time becoming well-acquainted with our clienteles brand guidelines, style guide and design preferences.
We present visual design concepts that easily fall into what our client is looking for — cookie cutter designs that fit flawlessly into their preexisting sites look and feel and by doing so, we limit design potential.
While it is important to meet business design requirements, it is also necessary to never let that become a hinderance to your creativity and improving the user experience. Being tasked with the NINDS intranet redesign, I was able to step away from that. What began as a project to simply modernize the intranet’s user interface, pivoted into creating a truly welcoming, interactive, and engaging platform for NINDS employees.