National Institute of Neurological Disorders & Stroke (NINDS) Intranet Redesign
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 full site 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/visual design including:
Design Strategy & Ideation
UX Collaboration
Wireframes
High-fidelity Mockups
Prototypes
Client presentations
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 (Target Audience) 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 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 original ‘My Dashboard’ feature displayed 10 visible tiles representing the Institute’s 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 revealed several links relating to that resource. Clearly, there was a lot going on with the dashboard feature, so for the intranet redesign, we wanted to create a more simplified and easy-to-understand user experience.
In doing so, we quickly came to the decision of removing the header, “My Dashboard,” and replacing it with a better and more intuitive phrase, “Popular Tools and Resources.” We also removed the users ability to customize, and instead, applied data analytics to determine and display the top six most commonly visited links by NINDS employees. This also reduced the number of user clicks. Lastly, we redesigned the feature entirely to align more closely to the industry’s latest design trends, but more on the Intranet’s visual design later.
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.
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
Wireframes help me visualize the overall layout and order of positioning for UI components on the page. 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, before any product releases, we always conduct a mobile design audit and work with our devs to address any design inconsistencies.
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 original intranet dashboard feature used heavy stock imagery and gradients. I wanted to simplify the user experience through achieving minimalism and intuitive visual design. Not only did we change ‘My Dashboard’ to better and easier understood language, “Popular Tools and Resources” (as previously mentioned), but we also paired it with recognizable iconography. I love how using iconography also led to saving design space and creating a more structured and purposeful 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
It was important for the ‘My Links’ feature to be immediately visible and clickable for users when entering the site. With this in mind, I thoughtfully positioned the component above the homepage fold, but below the site’s header, search, and ‘Popular Tools and Resources’ feature.
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 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 globally used 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.
How We Are Monitoring User Success
Our team uses data analytics and user surveys/feedback to determine the success of the new intranet redesign. The user survey gathers both qualitative and quantitative data. It gives us valuable insights on a users impression of the interactive ‘My Dashboard’ and ‘My Links’ feature, it’s intuitive use and 508 feasibility etc.
On the other hand, collecting data analytics helps us get a deeper dive into how users are engaging with the platform. Such data points include, ‘Popular Tools & Resources,’ and ‘My Links’ configurations, top viewed pages, top clicked links etc.
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 your client’s 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 develop a “better” looking and organized intranet, pivoted into creating a truly welcoming, interactive and engaging platform for NINDS employees.