Neurobiologist-turned designer driven by sense-making, systems thinking, and storytelling. Seeking full-time interaction, experience, or product design roles.
Work spans the digital and physical, including functional user interfaces, immersive experiences, research, and creative strategy.
UX Design
Web Design
Organizational Strategy
Content Development
May - Sep 2020
Figma
SurveyMonkey
Zotero
Google Suite
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.
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:
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.
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.
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:
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:
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.
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.
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.
Ann Li 2020
