ccap-thumb sysccap-thumb sys

CLIENT

Cultural Care Au Pair

DISCIPLINES

Product Design

INFO

Cultural Care Au Pair is in a transformative state. It's a growing business that has leaned on a technological system that was in need of a vastly new system.

Initial Problem

With so many disparate systems operating the business, Cultural Care and it's users, needed an overhaul to their system so we could more effectively move users through our system and improve quality of design, tech, and experience. 

My Solution

My solution was to create a design system that would be the backbone to how we think, design, implement, and expose our users to a modern application that would help them get into the pipeline faster, cheaper, and have a better experience while doing so. 

How Did I Get There?

I first set out to do a full audit of all of our systems, interviewing people across the business, to get a full understanding of the entire landscape, how we are using the systems, and what the business needed to run a fully compliant program.

From there I did a deep dive into the systems that were publicly exposed. We had applications, accounts, matching systems for both sides of our audiences. After fully understanding the entire landscape, I started to develop a system based on atomic structures and how they map to basic web elements.  From there I built out all the atoms that our system would need. Everything from buttons to flat cards.

bunch copy 2bunch copy 2
bunch copy 3bunch copy 3

I Did My Part

With the design system in place, we were able to quickly iterate and build prototypes that we could test against our users. Having this system and place, and allowing for it to create complex pieces allowed for us to remove the top layer of our design practice (the purely visual) and focus on repeatable patterns for a better user experience. This helped with the speed with which we could pivot on design, but also keeping our development process as DRY as possible. 

The final step was to keep a living guide in the form of documentation of the entire system. This included how to create elements, how they are styled (with included CSS), how spacing should work, as well as animation guidelines. 

[unex_ce_button id="content_oa452371a" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#fd3d49" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://kylemitchell.co/wp-content/uploads/2017/08/DES-140217-1138.pdf" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]CHECK IT THE DOCUMENTATION[/ce_button]
Mastodon