Behavior + Cognition
Outreach + Events
May - Sep 2020
Children and Screens: Institute of Digital Media and Child Development is a non-profit organization dedicated to addressing and understanding the impact of digital media on children and adolescents.
As a Design and Research Intern collaborating with a small team, I initiated a digital transformation for the non-profit, working to create and implement a novel design system and branding update as well. One of my main projects involved streamlining user experiences across web and mobile systems, furthering the institute’s mission by improving usability and access to resources for parents, researchers, and other practitioners. I also contributed to the planning, execution, and distribution of a popular outreach webinar series, launched during the onset of the COVID-19 pandemic to bring the expertise of researchers and clinicians to parents across the world.
Web experiences and visual language were inconsistent and varying in quality. The overall user experience was overwhelmed with extraneous cognitive load.
To identify the most pressing issues and understand existing behaviors and attitudes, I conducted remote observational interviews with users and reached out to fellow research and communications interns. Three main themes emerged, and potential points of intervention identified:
- UI guidelines had not been clearly established across pages and breakpoints, resulting in a fragmented and confusing experience
- Information overload due to a lack of content grouping and organization frustrated users trying to access various resources
- Design patterns were implemented inconsistently across the site, resulting in visual clutter and erroneous mental models that detracted from the overall experience
To help the institute convey its status as a reputable and reliable source of information, we needed to improve clarity, consistency, and accessibility throughout the interface, such that users could access resources and findings with ease.
Using constitudent identities and needs to define areas of improvement and drive implementation
Though the entire Children and Screens website could benefit from a design overhaul, due to time constraints and additional responsibilities, I needed to prioritize which areas to implement the system first. The weekly webinar series was Children and Screens’ biggest focus this summer, receiving a majority of our promotional efforts and gaining ample interest and traffic. We decided that the webinar series pages and homepage should adopt the design system first.
User Insights and Organization Goals
From senior staff feedback and webinar attendance data, we identified our active and intended audiences.
With their initial insights, I set to work exploring visitor motivations, defining the organization’s goals, and identifying areas for improvement. I distilled trends from our findings into general objectives:
- Access tips for parents and actionable advice from clinicians, researchers, and other experts
- Quickly find information on upcoming events
- Browse past webinars and access recordings
- Review noteworthy academic findings
- Register to keep up with new findings and events
- Promote current outreach events (weekly webinar series)
- Encourage event registration and improve attendance rates
- Increase newsletter and YouTube channel subscriptions, as well as retention rates
- Facilitate longer interactions and website visits
- Communicate the institute's identity and mission
We decided to prioritize usability and navigation, with special emphasis on promoting and directing access to webinar content and encouraging lasting relationships. Our objectives consisted of the following:
- Reduce information overload by improving grouping relationships across different content areas
- Update and standardize visual design, making content easier to navigate and browse
- Communicate a friendlier, more approachable tone to improve user engagement and sustain connection
- Enhance credibility through design quality and consistency
Exploration and Design
Working from existing styles, we created a modern visual system, balancing feedback from staff and maintaining the visual DNA of the original site. While crafting the new design system, factors such as accessibility, usability, and user delight were taken into account.
The original website relied on a dark, monochromatic color scheme, and heavily utilized the C&S patterned background without breaks. Reliance on solid containers against dark and patterned backgrounds created stark contrast, and contributed to a heavy, outdated feel. To liven up the website and improve visual hierarchy, additional colors were introduced and color styles were standardized.
The updated palette draws from a complementary color scheme to highlight the existing dramatic theme. Analogous blues brighten the patterned background, which is retained for continuation and per request of internal decision-makers. Energetic orange is introduced to convey enthusiasm and warmth, complimenting the blue hues and working to emphasize action items.
Defining and testing UI styles and layouts
Drawing from our discussions and staff feedback, layouts were designed according to existing mental models. Interactions and groupings were designed to feel familiar and intuitive to the user, minimizing cognitive load and matching real-world conventions. We focused on reducing complexity and choice overload, and establishing clearer relationships across content areas. These were presented in wireframes for quick turnaround.
Previously unchunked content was divided and differentiated to help viewers identify underlying relationships and distinct units of information. Using varying background colors, alignment rules, negative space, and formatting styles, our redesigns allow the user to quickly find, view, and process information.
Implementing the design system and final designs
Due to the short timeframe and investment into various other projects, extended usability testing, taxonomy development, and full screen schematics and prototypes could not be followed up upon and refined. In acknowledgement of future work and progress to be made, I instead compiled a comprehensive package for documentation and handoff. This included, but was not limited to: the expanded and revised style guide; interaction patterns, components, symbols, grid structures, and layout templates; available information architecture maps, workflows, and models; visitor insights reports; and findings reports, including areas of opportunity and next steps, along with synthesis of academic literature findings.