Ann Li

Hand-written name, "Ann Li"

Ann Li

is a multidisciplinary designer
driven by
storytelling, sense-making, and curiosity, exploring experiential narratives and creative tech

Best viewed on desktop

Ann Li

Neurobiologist-turned designer. Currently pursuing a Masters in Interaction Design at Carnegie Mellon University.

Work spans the digital and physical, including multisensory exhibits, creative direction and strategy, interactive installations, and user interfaces.

Children and Screens

Modernizing web experiences to help children and young adults navigate the digital age

Roles

UX Design
Web Design
Organizational Strategy
Content Development

Context

May - Sep 2020

Tools

Figma
SurveyMonkey
Zotero
Google Suite

Overview

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.

Problem

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:

  1. UI guidelines had not been clearly established across pages and breakpoints, resulting in a fragmented and confusing experience
  2. Information overload due to a lack of content grouping and organization frustrated users trying to access various resources
  3. 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.

Screenshots of old web and mobile interfaces
Starting points across web and mobile

Discovery

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.

Notes and feedback from web kickoff meeting. Primary audience identified: parents, researchers and clinicians, educators, policymakers, and media/advocacy groups. Additional audiences: students, interns, and job applicants. Notes include a rough plan of improvements and feedback from the president and founder.
Excerpt of notes and suggestions from initial kickoff meeting. Additional feedback from senior staff and the president/founder.

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:

Visitor Motivations
  • 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
Organization Goals
  • 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

Objectives

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:

  1. Reduce information overload by improving grouping relationships across different content areas
  2. Update and standardize visual design, making content easier to navigate and browse
  3. Communicate a friendlier, more approachable tone to improve user engagement and sustain connection
  4. Enhance credibility through design quality and consistency

Exploration and Design

Visual 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.

Preliminary wireframes for the home page. Includes content requirements and hierarchy. Additional markups and feedback noted in red, with a mobile version sketched on the right.
Preliminary home page wireframes and notes. Additional markups and changes noted in red, with a responsive mobile version sketched on the right.
Preliminary wireframes for the webinar landing page. Includes content requirements and hierarchy, along with additional noted feedback.
Webinar page wireframes and notes


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

Mockups of final designs on laptop, mobile, and tablet.
Sample of final designs for home and webinar pages

Reflections

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.

Click to navigate to the top
© 2023 Ann Li
LinkedIn link