Overview
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.
End Product
Let's dive into the design and explore how the pages looked 'before' and 'after' the changes.
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
Process
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.
Values
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.
Typography
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.
imagery
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.
.jpg)
