ConnectOurKids
Building 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.
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.
Convert the ConnectOurKids desktop tools into a mobile format while maintaining full functionality. Our high level goals for this project were to:
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:
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:
People Search is the way social workers find extended family of foster children. Potential candidates for a permanent home can be located through here.
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.
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:
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.
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.
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.
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.
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.
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:
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.
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.
The section below shows some of the final screens for the ConnectOurKids mobile app.
