Harmony
Design System
Overview
In this project, we designed a complete, original design system to redesign the website of the Northwest Adoption Exchange, a foster care agency based in Seattle, Washington. Our goal was to improve the user experience of current or future foster parents, provide more educational content, and design a more friendly, less-intimidating approach in child adoption. We named this design system Harmony.
Duration
September - December 2022 | 8 weeks
Tools
Figma, Figjam, Miro
Role
UI Designer
Contributors
Bijou Kim
Nick Liang
Shelly Zhao
Takumi Shimada
Background & Problem Context
The Northwest Adoption Exchange (NWAE) is a non-profit organization that connects youth in foster care to potential adoptive families. They partner with the Washington Department of Children, Youth and Families, Alaska Office of Children Services, and Oregon Department of Human Services.
In this project, we were instructed to audit, brainstorm, and redesign the existing website of NWAE using a full, original design system.
Original Product
The link to the original product can be viewed here.
Research
Website Audit
We began our process by conducting a website audit, extracting the current colors, design patterns, and layouts. Our main focus for the redesign was the youth profiles page. The two biggest flaws we identified in the existing website were:
The youth profiles page resembled a shopping catalog, effective in presenting each child in a, fair, ethical design.
The website is designed for an audience already fully immersed in the adoption process-- users simply exploring the idea experience a gap in resources and knowledge.
User Research
We identified our main user groups as current and prospective foster parents and adoptive parents. We interviewed Anna Marshall, the Executive Director of Northwest Resource Associates, the parent organization of NWAE. Here were the key takeaways:
Family Demographics
1
73% of adoptive families are heterosexual couples, 13% single females, 5% single males, and 4% lesbian couples. 40% of families had no prior children in their home.
Motivations
2
Motivations for foster care adoption include: infertility, being a same-sex couple, being single, older, or wanting to help.
Children Demographics
3
Currently over 400,000 children in foster care in the U.S. Older children or children with disabilities struggle to find homes in comparison to other children and sometimes require broader recruitment process for foster care adoption.
Personas
.png)
Design Foundation
Before we dove into the design process, we identified our stakeholder's values, our design principles and our own values we wanted to incorporate into the design.
Design Principles
-
Design with intention and purpose.
-
Design for learning, positivity and storytelling.
-
Design for accessibility and differences.
Values
-
Values of NWA: Equity, inclusion, connection, enhancing the safety of children, families and communities.
-
Strength-based
-
Youth Driven
-
Fiercely Optimistic
-
Honest, purposeful design
Given these research insights, website audits, and personas, my team and I created our final design system, Harmony.
Full documentation is omitted for presentation purposes.
Colors & Typography
Colors
Our primary palette is comprised of a bright blue and pink to bring energy and positivity to our brand. Our secondary palette is used to mainly supplement primary colors, hover interactivity, and add accents. The neutral palette consists of dark grays and off whites, used throughout the website for backgrounds, headings, and body texts.
Typography
We used single typeface throughout the website to emphasize consistency and our design principle of simplicity. The range of text sizes, styles, and weight ensure logical hierarchies and readability.
Imagery
Below is a collection of some of the imagery and vision board we created, which reflects positivity, hope, and community. Our intention behind icon and imagery gathering was to rebrand the website and portray the foster care and adoption process as a hopeful possibility for current and potential foster parents.
Design Patterns
Banners
-
Headers at the top of the page for major pages.
Cards
-
Used to display youth profiles, information and educational content layout.
Table Views
-
Used to organize the youth profiles, the core feature of the website.
Components
Collection of some of the main components including buttons, cards, header & footer, navigation, and form inputs.
Header & Navigation
The order of the navigation tabs were rearranged-- "How to Adopt" as the first tab to encourage users to learn about the adoption process before diving straight into youth profiles.
Buttons
Buttons colors and shapes were redesigned, using the primary and secondary color palettes. The blue and light orange creates a happy and positive mood to the interface.
Youth Profile Cards & Information Cards
The youth profile cards were significantly redesigned--emphasizing the child's name and age rather than their profile photo. A description of each child is displayed on the main card, allowing the child's personality to shine through more effectively to prospective foster parents. The redesign reduces the look of a shopping catalog and allows users to view profiles in a more ethical manner.
Information cards were designed with different variants-- including different aspects of the card such as title, description, button and image. These variants create a richer, more effective layout of information especially on the website's landing page.
Form
A new feature we added to the website is a form prior to browsing youth profiles. The profiles page will be locked until the user has completed the form. The rationale behind this design is to encourage the user to approach the adoption process in a more intentional manner, by helping prospective parents narrow down what they're looking for while also educating them on important information regarding children in foster care such as disabilities and age distributions in the system.
Infographic
Another new feature we added to the website is an infographic on the landing page that introduces the organization and foster care adoption to users who are not fully immersed in the process yet. The infographic also includes additional links to informational content and resources regarding different types of adoption and how to adopt from foster care.
