GABRIELLA MILLER KIDS FIRST DATA RESOURCE CENTER

Brand & Website Redesign

Kids First DRC Website

The original Kids First CMS was a custom-designed system which made it difficult to update and design website content. Importantly, the original website design didn’t adequately highlight the real star of the Kids First DRC - the rich collections of childhood disease data made accessible to researchers.

Much of the essential content was buried deep in the site, making it difficult to find specific value propositions or information without a comprehensive exploration of the site. Additionally, the number of different styles and designs made the site visually overwhelming for users.

Strategy & Site Mapping

The first step in the web redesign began with an audit of the existing Kids First website to capture the existing copy/layout contained within the website. Next, I met with team members and key stakeholders from the National Institute’s of Health’s Gabriella Miller Kids First Pediatric Research Program, as well as the Kids First DRC leadership, to outline the requirements for a new website site map. We determined to reduce the overall site copy to create a more simple and easily-navigable site architecture.

Collecting Stakeholder Feedback

I used the feedback collection tool Mural to provide a space to organize and collect feedback about the page architecture and asked respondents to share their impressions of the simple site map layout. I chose to organize the content with each page from the simple site map listed across the top along the x-axis, and then along the y-axis, I used a color-coded ranking system to support the prioritization of content that would populate each sub page. Using this system, the suggestions for page content were generated and quickly sorted by priority, which allowed me to more effectively scale the minimum amount of content that needed to include for each page.

I sorted the website content suggestions by three categories to enable simpler prioritization:

  1. Essential Content (Green)

  2. Recommended Content (Yellow)

  3. Non-essential Content (Red)

Fig. 4 - The original design of the Kids First website - this site design was adequate for community users, but lacked specific content to be most useful to researchers.

After collecting the feedback, I sorted the sticky notes into the most relevant page section, while considering how a typical user persona might navigate through the page architecture. Despite nearly all of the discussed content considered ‘essential’ to the website, I was able to identify opportunities to combine and reduce the length of the copy for several of the sections, as well as recommending graphical representations for the site that would add more of a visual quality to each page.

I revised the site map headers to reflect the actions we wanted each user to take as a result of visiting the Kids First website. This allowed us to have a clear action identified for each main header of the site.

After organizing, revising and consolidating the feedback, I moved the mural sticky note content into a new, expanded site map architecture.

Wireframe Development

With the expanded site map reviewed and approved, I was able to begin the creation of basic wireframes. I researched other related medical- and data-focused efforts, as well as innovative website designs from throughout the technology sector. I compiled a list of these sites, along with feedback from internal stakeholders, into a spreadsheet for easy reference and comparison.

Due to client requests for accelerating the timeline of production, and uncertainty regarding which developer would actually code the website, I was tasked with creating a more detailed, styled wireframe that would incorporate the final look and feel of the new website from inception. The initial designs considered the new focus of prioritizing the data as the ‘product’ of the Kids First DRC. Each aspect of the data would be highlighted on its own layer, and corresponding pages and content would link out to other areas of the website. I chose a darker color theme based on the existing colors approved by the NIH. For this redesign, the colors, styles and logo element would remain unchanged.

Design Iteration

After submitting an initial draft of the home screen/landing page as a proof of concept, I further developed the layout and overall style to include additional page concepts, effectively building a mockup of the website design and functionality. Providing containers and spacial arrangement allowed me to provide more specific guidance related to the target amount of website copy. This also helped our team to workshop many more of the potential needs and use cases for future site visitors.

Development Considerations

Shortly after designing the styled wireframes, our team determined to pursue a contract with a different developer who would build the site content on a different CMS platform. Initially, I had created the wireframes with the specific development style and platform considerations for the Wagtail CMS integrated into the design. I needed to adapt the design style to be more compatible with the new developer’s ability and lack of familiarity with Wagtail and/or python development stacks. Our new developer worked exclusively in WordPress, so I was able to adapt the design slightly to better accomodate known WordPress modules and design system components.

Deployment & Testing

After creating the initial wireframes, I considered the process to deliver the site assets to the developer. I packaged the site files into folders and provided guidance related to CSS styles and component libraries, providing links to Tailwind CSS styles and components. I also had several coordination calls to provide clarity to which elements should be deployed across the new website. Additionally, I provided links to the specific components and their .SVG code to allow for the most seamless process and the highest consistency to wireframe styles during the site deployment.

Designing the Booth Experience

I also explored optimizations for the booth layout and traffic flow through the convention space. I created this mockup to plan the optimal layout of the booth furniture and imagined a natural flow for booth visitors to receive technical portal demonstrations. I also found this mockup to be instrumental to help communicate the goals and strategy for the booth layout to senior leadership at the National Institutes of Health.

KIDS FIRST WEBSITE REDESIGN

Representing Datasets & Studies

The Kids First Data Resource provides researchers with a growing number of studies and datasets to support their research efforts. I needed to design a modular, scalable table layout that would integrate tags and other searchable terms across the entire site. I considered many of the specific search terms provided by data scientists and based on common facet searches performed in the portal to date. As the studies scaled in number, these pages needed to be able to be inclusive of the unique disease types and conditions across cancer and structural anomalies, which each have unique properties and need their own systems of classification, or phenotyping. I worked with our team to determine the best fields to include and which data could be represented in the individual study cards.

I created a simple initial wireframe and then returned to our key stakeholders to receive feedback and input on the site’s initial organizational structure. I determined to keep the architecture of the site clean and minimal, as one of the primary goals was to simplify the amount of copy on the site and make site’s primary focus more about data use and researcher support.

The initial site map contained three primary content sections:

  1. Data Resource

  2. Get Started

  3. Blog

User Training & Help Center Development

Working alongside the primary web developer and data scientist from the D3b Center, I mocked up a Help Center environment which would provide users with access to tutorials and documentation, along with animated walkthroughs of the portal and other supported Kids First analysis platforms. Organizing this content and creating a simple-to-navigate help center would allow users of the portal to more quickly and easily connect with resources and have a better overall experience using Kids First platforms. I also developed a Tools page to showcase the available platforms and what activities each platform allowed users to perform. This was based on existing component libraries to ensure scalability for mobile and tablet users. While the vast majority of users access the portal tools from a PC/laptop, I wanted to ensure a high level of mobile functionality throughout the website, which would be utilized by lay users, who may be more likely to access from a mobile device.

CLIENT

Gabriella Miller Kids First Data Resource Center

Site Deployment & User Testing

Due to unforseen limitations on the timeline and overall budget by leadership, there were not sufficient opportunities to test the website with members of the community after the initial launch of the designed development site. However, I identified opportunities to test and collect feedback from members of the project team, as well as internal researchers within the D3b Center. I created user challenges and scenarios and observed their ability to navigate through site content. I also connected Google Analytics and began to monitor initial site traffic and facet searches on the website.

Despite alterations to the initial site wireframes I created, resulting from programmatic direction and leadership requirements outside of my control, the new website would become well received by users across the globe, helping funnel scientists and clinical care providers to valuable data and research resources. Since the site’s launch, user traffic and adoption of the Kids First portal tool has grown steadily, to more than 7,000 users.

ROLE

Senior UX Designer, Brand Strategist

Research & Learning

I was invited to refresh the branding for the Gabriella Miller Kids First Data Resource Center in preparation for a large, international scientific conference. From the previous branding, I developed a more sleek brand style which better reflected the theme of technology, data and innovation adopted during the Kids First brand planning discussion period. The request for a new brand was shared by Kids First DRC and NIH program leaders and would expand to include nearly all of the branded content for Kids First.

During the brand development process, I also focused heavily on improving the user experience for researchers and data portal users through the design of a new website. I defined the researcher journey and outlined many of the most important features and capabilities of the Kids First portal and website design, to best support their research interests. I’ve outlined some of the highlights from this process in the content below.

Fig. 1: Design system graphic I designed for the initial launch of the Kids First website. Working with developers and creative teams, along with subject matter experts, I designed a flow to illustrate all of the required inputs and how information would flow through the Kids First design system.

Building a New Brand Identity

While attending a large, national scientific conference, I observed that researchers and scientists were not associating the Kids First DRC brand with the cutting-edge data and resources available through the Kids First Portal. I wanted to create a more streamlined and modern style for the Kids First DRC that would better highlight the available data resources.

I conducted a brand audit across all Kids First materials, before researching other partner organizations and initiatives with a similar mission as Kids First. In addition to reviewing the Kids First branded collateral, I compared examples from the corporate, pharmaceutical and scientific communities. I created a rubrick to evaluate and capture notable design features from other brands while also considering accessibility, scalability and deployment considerations across a diverse set of project domains.

During the branding identification process, our team described Kids First as “Stronger, Faster and Greater” than many other research efforts to date. This theme was used to develop some of the initial branded collateral I created, including detailed brand guidelines. The new style featured deep, bold gradients and clean iconography, combined with powerful images of patients, clinicians and other scientists. I wanted to include themes from the tech industry while still allowing a place for families and community members to connect with the brand identity.

Mission, Vision & Brand Values

Defining User Personas (Key Communities)

In support of NIH program requirements and institutional goals, I needed to create designs that worked across a diverse group of researchers, clinicians, patient advocates and federal partners. Sharing complex themes such as data sharing, genomics and translational research proved a challenge to convey simply for all levels of understanding. I was able to create channels and specific tactics to best meet the needs of specific communities, while versioning and segmenting the content for different user personas.

Website Planning & Research

From the successful deployment of the new Kids First branded materials and updated style, I was asked to bring the new design style into the development of a comprehensive website - to partner with and drive users to the existing Kids First Data Resource Portal.

For references, I compared brands within the tech, pediatric and research domains and identified features and layouts as inspiration for the Kids First website. I also considered the WCAG accessibility requirements, specifically for 508 compliance which is mandated for NIH programs. The website would primarily target data users and researchers, but would need to also apply broadly to a large user community.

I worked with other team members and partnered across a community of stakeholders to review the site copy and make other adjustments to the design requirements. I also considered factors such as scalability, partner interoperation and modular deployment to allow for the development of new features and content. Integration and cohesion with the Kids First Data Resource Portal was also essential. Working with other UX designers, I ensured consistency across the Kids First Figma design system, reducing the number of total CSS styles from more than 80 to less than 10 - ensuring consistency across the entire suite of branded materials.

Color & Typography

The initial Kids First color scheme provided six bright, attention-grabbing colors, so I developed additional values and included gradients to soften and expand the color combinations available within the Kids First design system. Adding additional tint values also provided greater flexibility to design brand collateral across print and digital applications.

Fig. 2: Original color values of the Kids First Brand.

Fig. 3: Expanding Kids First color values - these tint variations allowed for dimensional design across a wide number of applications.

Expanding the Color Palette

I created gradient values to expand the applications for the Kids First color palette and enable more dimensional designs, including:

Fig. 3: Expanding Kids First color values - these tint variations allowed for dimensional design across a wide number of applications.

Showcasing the New Brand: Trade Show & Scientific Conference Design

I explored the themes of Stronger, Faster & Greater in the booth materials used for display at large, international scientific conferences. These materials required a bold and eye-catching aesthetic to draw attention from passing conference attendees in a large convention center hall. Pairing the new gradient designs with high-resolution imagery allowed the banners to be more instantly recognizable. This new design greatly increased the number of visits and overall traffic to the Kids First conference booth, increasing the number of portal demos by 400% over the previous year.

BRIEF

Created brand guidelines, website wireframes, trade show booth visuals and content, training and educational materials.

Kids First DRC Brand Refresh

The Gabriella Miller Kids First Data Resource Center (Kids First) is a collaborative pediatric research effort, supported by the National Institutes of Health, which aims to help researchers uncover the links between cancer and structural birth defects in children.

I was asked to redesign the branded elements for Kids First and imagine a new user experience as part of a new Kids First website, targeted at making data more accessible to researchers and data scientists.