1.5 months

My Role:

UX/UI Designer


User Persona, User Journey, Design System


4 Designers


During our Informatics 498 course, our team of four designers spent 1.5 months learning about design systems.

Following this phase, we channeled our knowledge into a project focused on improving the user experience and interface of the Northwest Adoption Exchange website. This non-profit organization serves a crucial role by bridging the gap between children in foster care and prospective adoptive families.

Our goal was to use a method called 'atomic design' to make their website easier to use and more touching for users.

Who are our stakeholders?

Northwest Adoption Exchange:

Founded in 1976, the Northwest Adoption Exchange was the first regional, multi-state adoption exchange. “As an adoption exchange, our role is to assist with adoption recruitment and help make the important connections between youth in foster care and potential adoptive families.

End Product

Let's dive into the design and explore how the pages looked 'before' and 'after' the changes.

Home page


Youth Profiles Page


Profile Introduction Page

User Journey
We delved into the website ourselves to gain firsthand insights. During this exploration, we mapped out the user journey. It became evident that the discovery stage of the website demanded the most user interactions, as it marked the beginning of the process where users started to get to know and start forming a connection with children.
Critical flows
We prioritized two main user flows:
1. From the homepage to the profile page
2. From the profile page to selecting a child and reading an in-depth profile
❌  Biases Hidden in the Filter System
❌ Profile Page Fairness
❌ Balancing Profile Information
As we were concentrating on only two user flows, we needed to redesign three pages: the Home page, Youth profile page, and Children introduction page. We used the Atomic process to deconstruct the original website, working from small to large. We broke down the elements from the website and refined them based on our goals.

The biggest challenge was finding a way to use visual elements to create a welcoming and emotionally engaging environment for individuals interested in adopting children, helping them better understand the children.
The Solution
Home Page
Making an adoption decision should not be a quick process, so creating a slow navigation process for the user was one of our main priorities when designing.

Thinking outside the box included more wavy elements rather than straight and blocky in order to create more of an emotional connection visually.
Profile page
We designed a new profile card to create a visual representation for teens.

Considering Miller's Law', people can only hold seven plus or minus two items, in their short-term memory at any one time.  We reduced the number of profile cards to two lines per page.

Rearranged and modified the filter selection to put all filter options into their own categories to avoid bias and less like a e-commerce site.
Profile Introduction Page
Incorporating more visual elements, such as pictures and videos, can make people feel less fatigued when reading a lengthy introductory paragraph.

Using active illustrations and dynamic elements can create a sense of closeness for children.
Design System
Design Principles
Promote user-centric designs
Design with user needs and user journey in mind
Think out of box and be willing to take risks
Display adequate color contrast and intuitive navigation & interaction
Diverse imagery representation of children, youth, families
Highlight important information with hierarchy, color, and effect
Maintain consistency
Reuse components, attributes, and grids
Create an emotional connection
Convey hope and positivity
Personal Identity: There will be no discrimination and marginalization as we will display each adoption card with the same style and components and the usage of descriptive language will be in a respectful manner.

User-centric: develop and apply emphasis throughout the design process, consider the needs and use scenarios for the users
Color palette
When we selected colors for the interface, our goal was to use colors that communicate a sense of brightness and hope to our audience. We wanted users to feel warmth and a deep connection with the children and the organization while navigating our site.
We used Airbnb's Cereal fonts because their roundness created a soft, clear, and user-friendly interface. We only used this font for project materials, not for business-related use.
We prioritized inclusivity and diversity when selecting imagery. Our goal was to feature a diverse range of images that represented children, youth, and families, reflecting the broad spectrum of our audience and the children in the adoption organization.
Other components
Our design system incorporated various components that contributed to the consistency and hierarchy of the interface in both desktop and mobile designs. These components enhanced the user experience and overall interface quality.
What did i learn from this project?
Use the power of design to influence the user's browsing experience and choices. For example, hiding the filter option can reduce biases among users.

Don't hesitate to think outside the box and experiment with unconventional elements, such as wavy shapes, to create a more dynamic and engaging visual experience on a website.

Always remain mindful of the purpose of each design feature and element. For instance, every color choice for buttons, images, and fonts can capture a user's attention and evoke different emotions and convey different meanings.