ConnectOurKids

Creating mobile tools for social workers.

ConnectOurKids is an organization that aims to connect foster children with a permanent home. Their organization provides free tools to social workers to help expedite their work. Our goal was to take the main tools and features of the ConnectOurKids website and convert them into a mobile app. We had weekly meetings with the CTO of ConnectOurKids.

Role

Visual Design
Prototyping
User Testing

Duration

Dec 2019 - Feb 2020

Live

Checkout the app

The problem

The ConnectOurKids tools only exist in a desktop version. ConnectOurKids provides tools to social workers, but when they are out in the field they do not have access to these tools because they are not in a mobile format. This creates a gap in a social worker's workflow which decreases their efficiency in the mission of matching foster children with permanent homes.

The solution

Convert the ConnectOurKids desktop tools into a mobile format while maintaining full functionality. Our high level goals for this project were to:

How do social workers use ConnectOurKids?

Before jumping into designing mobile layouts it was necessary to define the product that ConnectOurKids provides. By exploring features on the website and using information given to our team by the CTO we were able to identify the 4 main ways social workers utilize the ConnectOurKids tools:

Reviewing existing designs

The desktop tools were reviewed in depth to make sure we transferred all necessary components. For each feature of the ConnectOurKids website notes were made of the layout, typography, colors, and flows. This review helped us brainstorm ways to convert the layout to mobile and find areas to incorporate improvements on the designs.

Here are the desktop versions of the two main tools:

1. People Search

People Search is the way social workers find extended family of foster children. Potential candidates for a permanent home can be located through here.

2. Family Connections

A family connection is anybody who is related to a foster child that has the potential to be a permanent guardian. The Family Connections tab contains the files and any other associated information for a foster child and their family connections. Social workers can log past engagements, upload documents, and edit contact details here.

New design system

Our interface choices were based on the design elements already present on the website. We did not want to reinvent the wheel and have the apps UI vary drastically. So, in order to keep the experience similar between the website and mobile app we used the same copy, color schemes, typeface, and navigation layout as much as possible. Although, some of these aspects were changed to improve overall consistency, clarity, and hierarchy.

Our goals for creating a new design system were to:

  1. Create components that could transfer to desktop easily
  2. Reduce unnecessary text and color styles
  3. Have consistent UI across all tools

The website used several shades of blue for actionable buttons, so we opted to use only one shade of blue that meet all accessibility standards.

This narrowing of text styles and color schemes resulted in a more consistent design system and makes the lives of developers easier when coding these designs and future designs.

Creating a mobile experience

Taking into account all notes made from the website review and the updated design system we were able to craft the mobile experience. Inconsistent navigation UI across pages, font colors, and several shades of blue were updated with reusable components and fewer styles.

People Search

The 5 searching criteria were placed into a top navigation bar with a clear selected state.

A highly visible tutorial button is present so that a new user does not have to go searching for tool instructions.

Search results are displayed in a pop up allowing for a quick return back to the search home.

Editing Family Connections

The Family Connections section contains all information related to contacts for a foster child. A social worker can access phone numbers, addresses, emails, and much more. There is also the option to update any information for a family connection.

We designed this section to resemble and have similar patterns to that a phone contact. The information in the editing screen was divided into sections to make finding particular information faster.

Organizing Family Connections

This is a new feature we designed exclusively for the mobile app. A lack of a way to organize search results prompted discussion for filtering methods.

A color filtering system was put in place to make identifying different types of family candidates easier. Each color corresponds to the current status of a family connection.

Social workers can now filter and quickly identify what type of family connection they are viewing.

Measuring success

How do we know if the app is providing value? These are some metrics that I would want to look into after the app has been released to determine how much value social workers are getting out of the app:

Conclusion

Our team was able to establish a design system, convert the ConnectOurKids desktop tools into mobile format, and eventually ship a working product, which you can check out here.

Future directions

Moving forward and thinking about ConnectOurKids as a whole I think a good direction would be to update the website to same level of design consistency as the app. The issues found regarding color schemes, typography, reusable components, and interactions on the website were left untouched on the website.

Updating the desktop tools will create a more consistent experience between desktop and mobile which would hopefully translate into an easier workflow for social workers.

Final screens

The section below shows some of the final screens for the ConnectOurKids mobile app.

Explore Other Work