NINDS Design System
Overview
As a pixel-perfect and meticulous designer, I am deeply passionate about design systems. When I first started working with the Federal government and other institutes on website modernization efforts, I immediately recognized the lack of visual consistency and cohesion across their sites. Such was true with the National Institute of Neurological Disorders & Stroke (NINDS), where I advocated for the adoption of a centralized design system for NINDS.
When I began designing for NINDS, my work entailed modernizing UI components and elements, which complied with the U.S. Web Design Standards (USWDS). I also actively started making incremental improvements to NINDS pre-existing style guide including, curating new color palettes and refining header sizes. I used these modernized UI components and updated style guidance for website page redesigns. This helped shape the perception of our stakeholders. Through my improved redesigns, our stakeholders recognized how visual consistency created more clear, intuitive, and user-friendly interfaces. Thus, paving the way for the creation of the NINDS Design System.
Client: National Institute of Neurological Disorders & Stroke (NINDS)
Work: NINDS Design System
Design Tools: Sketch (and later Figma)
My Role
I am the lead UI/UX designer working to transform NINDS digital experience. I led the creative vision and product development of the NINDS Design System. My skills included:
UI & Visual Design
UX Design
System Thinking
Content Design
UI Component Library
UX Collaboration
Process
Throughout the process of building the NINDS design system, there were a few important factors we had to consider:
Unique Target Audience. While the NINDS design system served as a resource for our designers and developers, it was heavily used by NINDS product owners and content editors. NINDS uses Drupal, an open source platform for digital experience, making it accessible for assigned NINDS staff to create and edit web pages. These staff members are usually inexperienced in web page design and even, web writing best practices. So, it was especially important that our design system consisted of flexible UI components and page templates that were easy to understand and implement.
Official Government Site. NINDS is an official government site so, it was necessary that we complied with the USWDS for the site’s overall structural elements and many UI components.
Foundational Elements
I began by conducting a full site audit of NINDS, identifying and documenting all site styles and UI components and elements. This helped me determine how extensive our pre-existing design inventory was and what we had to refine, redesign, and eliminate to achieve visual consistency and an enhanced user experience. As I assessed our design inventory, I used Brad Frost’s Atomic Design Methodology. I focused first on the atoms, the foundational building blocks of a design system including, color palettes, typography, buttons, iconography, tags etc..
I refined the NINDS original style guide that consisted of very limited color palettes and typography details. I reorganized and renamed it’s original set of primary colors and crafted new accent colors. I also defined each color’s use case and relevance across the website. This established an overall unified and recognizable NINDS brand. Additionally, I chose an easy-to-read typeface, detailed header sizes, and ensured buttons complied with the USWDS.
Image: NINDS primary colors
Image: NINDS accent colors
Image: Website header details including, font-family, font-color, font-weight, text-transformation, and font-size.
Image: Website default and secondary button details including, button states, dimensions and padding.
UI Component Library
After producing the foundational elements of our design system, I next developed the site’s more enhanced UI components (aka molecules). During this step, I collaborated with UX Designers and Content Strategists to help identify essential UI components and their appropriate use cases. The end result was a well-curated UI Component Library consisting of over 18 reusable components and patterns. Below, I share several of my favorite UI components.
I built two card types that we referred to as Call-to-action boxes (CTA boxes) and People Cards:
Call-to-action Boxes
CTA boxes invite users to engage with web page content through a call-to-action button. I thoughtfully designed three CTA box size variations (full-width, half-width, and one-third width) and included the ability to add short descriptive text, and a recognizable icon.
Image: View of half-width and one-third width CTA boxes.
Image: View of full-width CTA box.
People Cards
People cards are a unique UI component to the NINDS website and were used for NINDS staff bio and award recipient pages. I arranged the card’s content in a logical format for each variation and added a decorative purple bar for a touch of visual appeal and depth.
Image: NINDS staff bio card including name, degree, job title, division, email, and number.
Image: NINDS award recipient card including name, degree, research/publication link, school, location, and award year.
Text Boxes
Text boxes breakup and highlight content on a web page. I created four distinct colored text box styles, each performing a specific function and purpose:
Attention Text Box (green) - Event announcements, dates, and careers.
Information Text Box (pink) - Highlights important information on a page including, featured content and ‘Important Notices.’
Resources Box (blue) - End-of-page content for ‘Related Topics’ and ‘Resources and Tools.’
General Text Box (gray outline) - Only used for specific instances including, event highlights and ‘Table of Contents.’
Image: Mockup of ‘Attention Text Box’ with NINDS career opportunities content.
Image: Mockup of ‘Information Text Box’ with featured NINDS content for research.
Image: Mockup of ‘General Text Box’ used for page Table of Contents.
Image: Mockup of ‘Resources Text Box’ with page Related Topic links.
Structural Elements
By combining atoms and molecules, we develop more complex components or organisms. This often includes the site’s header, footer, and left-hand navigation etc.. These larger components primarily followed design guidance from the the USWDS and helped to easily identify the site as an official government website.
Image: NINDS header and main navigation
Image: NINDS footer and sub footer
Functional Web Pages
We created several web page templates for NINDS various page types. These page types included, basic pages, secondary landing pages, disorder pages, and event pages etc.. While building page templates, I focused on content design and thoughtfully arranged content-heavy areas and UI components and elements to create clean, concise, and informative web page layouts.
Note: According to Brad Frost’s Atomic Design Methodology, templates use a page’s underlying content structure instead of it’s final content. However, our page templates used real content produced by our content strategists and found readily available on NINDS website. This gave NINDS product owners and content editors strong visual representations of well-structured web pages and provided them with inspiration for when creating and maintaining their own pages. It’s also important to note that our stakeholders responded better to these concrete examples as well as opposed to more abstract visuals.
This ultimately resulted in the development of functional web pages for NINDS modernization efforts. Here are a few of my favorite page templates:
Secondary Landing Pages: Secondary landing pages direct users to left-hand navigation content. The template includes a header, page image banner, short descriptive paragraph, general text boxes for linked left-hand navigation content, and a CTA box.
Disorder Pages: NINDS provides detailed health information for over 100 disorders. The template includes a header 1, table of contents, header 2, CTA boxes, and “was this page helpful?” left-hand feature.
Events Page: NINDS hosts a number of monthly events. The template includes a search and filter functionality, highlighted events text box, calendar graphic, hyperlinks, tags, pagination, and export iconography.
Image: NINDS secondary landing page for “Preparing Your Application”
Image: NINDS disorder page for “Multiple System Atrophy”
Image: NINDS Events page
Design Tools & Web Platforms
We began creating the NINDS design system in Sketch, but later transferred our designs to Figma. We also built out the design system on Drupal for NINDS product owners and content editors. The NINDS web design system is organized into three main parts: design, components, and user guides. Each section provides NINDS staff with detailed guidance, tools, and templates for publishing beautiful and accessible web pages. We updated the NINDS design system regularly and scheduled monthly training sessions for NINDS staff.
Image: Mockups for NINDS UI Component Library and NINDS Page Structural Elements built in Sketch and later transferred to Figma.
Image: Design mockups for NINDS design system Drupal implementation (Version 1.1)
The Results
The NINDS design system resulted in many benefits across the organization and externally:
NINDS Product Owner & Content Editors: We simplified the process of creating and editing web pages for NINDS product owners & content editors. They began confidently building better web pages with the proper use and implementation of site styles, components, and templates. The result was a NINDS site that was more up-to-date, accurate, and clean for NINDS website visitors. We additional saw a reduction in service desk tickets requesting web page design help.
Developers: The design system significantly improved development time, and we saw product efficiency rates increase by an estimated 30%. We achieved quicker product development and deployments for NINDS modernization efforts including, the large-scale Drupal 9 migration and NINDS Intranet redesign site launch.
Designers: Our design team produced faster design iterations for stakeholders, consistently delivering high-quality prototypes and meeting project timelines. We also no longer had to spend time redesigning web pages from scratch and instead, had time to solve for more complex user experience problems.
Website Visitors: We achieved a more simplified, clean, and user-friendly interface that helped website visitors efficiently find resources for over 100 neurological disorders, life-saving clinical trials, and research funding opportunities. We saw website accessibility reach 98% and user web page satisfaction rates increase by 34%.
Brand Identity: Through visual consistency and cohesion, we built a recognizable and strong NINDS brand identity that largely impressed NINDS Digital Communications Branch Chief.
Final Thoughts
A design system is a commitment. Often times organizations don’t want to put in the time, effort, and resources into building one and stakeholders may not see the need for one. As a huge advocate for design systems and visual design consistency, I saw the value of advocacy by doing. This means showing stakeholders tangible results rather than just telling them why it’s a good idea. My journey with the NINDS design system began with making incremental updates and refinements to NINDS style guide and components. I maintained a pattern library and reused components in web page redesigns. Presenting these consistent designs and receiving positive responses is what ultimately influenced our stakeholders.
Design systems also don’t have to appear as this big and tedious task. They are not a one and done effort, but rather are evolving overtime. Design systems are updated regularly to reflect users feedback as well as, seeing what is working and not working. When we released our initial version of NINDS design system, we immediately recognized that NINDS product owners and content editors needed more guidance around the proper use of UI components. For instance, NINDS staff would use three CTA boxes or text box components side-by-side and placed different text lengths in each box, which resulted in awkward page layouts. We in turn added word count parameters, provided clearer visuals for dos and don’ts, and provided resources for web writing best practices.