Chris Wilson

UX + Visual Design

2-1-1 Childcare Search

Portfolio ·

While mobile “ready”, some features of 211Childcare.org’s search module needed enhancing to be truly mobile “friendly”.

Final mobile screen states for inspections.
Final Sketch designs of various screen states for reviewing state inspections.

The United Way of Connecticut manages a number of programs and websites for the state of Connecticut. Many of these fall under the 2-1-1 branding (pronounced two-one-one, as in, dial 211 to reach state assistance). These sites have a relatively high percentage of mobile users. One, in particular, has a mobile visitor rate just over 85%. With these stats in mind, the development teams at the United Way very mindful of making sure their websites are mobile friendly.

UX Challenges

For the 211Childcare.org site, one of the features we were looking at was a comparison table. Since tables tend to cause problems for smaller screens, generally the solution is to dump the table for mobile and find a different way to display the data. However, this does not work for comparison tables, since any other solution breaks the main intent, which is to compare items side by side.

Animated GIF showing broken comparison table in mobile view.
The app is mobile friendly until you view the comparison table, which breaks due to the screen’s small size.

A second feature that needed simplification for both desktop and mobile was the ability to drill down into results of state inspections on any given childcare provider. While incredibly straight forward, it took three taps to navigate into inspection details and three to get back out. A minimum of 6 taps for every childcare center. Even more, if reviewing multiple locations.

Technically there were ‘sign-posts’ to show you where you were and where you came from. However, the implementation of these was unwieldy enough to cause a loss of context. A visitor might exit the inspection details and not know which item had just been reviewed.

Animated gif showing too many clicks to get to data and loss of context as you do so.
This screen capture of the site shows the depth of navigation to get to inspection details and also loss of context.

UX Solutions

To tackle the issue of a mobile comparison chart, we started by researching solutions online. Most of what were found were simply scrolling tables. There was very little in the way of a modern, slick solution already out there. A custom solution would be needed.

Several options were prototyped. All have several traits in common.

  1. Only one provider is on screen at a time, but the features are aligned allowing for easy side by side comparison.
  2. The provider name and a ‘remove’ button are pinned to the top of the screen to keep functionality and context on screen at all times.
  3. A filter allows for removal of unwanted parameters, keeping the screen free from unnecessary clutter.
Animated gif showing the feature selector opening.
Rapid prototype of a ‘feature selector’. The user can pare the table down to only the details that are important to her.
Animated gif showing how the name and controls are locked to the top of the screen.
This prototype pins the provider name and ‘remove’ button to the top and maintains context and functionality at all times.


Other requirements needed to make the comparison tables user friendly were to:

  1. Keep the labels on screen for each provider
  2. Make it obvious that there were other options to view
  3. Make it easily usable from a mobile touch screen
Animated gif showcasing three visual treatments for a mobile comparison table.
Medium fidelity rapid prototypes of three different layout options for a mobile friendly solution for comparison tables.

Several promising approaches were prototyped and tested to find a solution for streamline the inspections data, including sliding panels and accordions. The chosen solution that worked best for both mobile and desktop alike was a simple popup window. This window listed all inspections with details hidden behind disclosure panels. This reduced the number of internal taps between providers from six to five. A small improvement, tap-wise, but the new design greatly increased the user’s sense of location and the overall readability. The big saving in user effort is seen when viewing multiple inspections for a single provider, reducing the number of taps in half, from two to one.

Animated gif showing the popup solution for both mobile and desktop.
Medium fidelity rapid prototypes for both mobile and desktop for a pop-up window solution for viewing item details.

A third issue was found during a heuristic review of the app.  It turned out that all of the relevant information for a childcare provider could be found on the app, but not all of it could be found in a single location. The information was spread around in different locations. We mapped out all of the information and locations and worked with the client to make sure all of the information could be found in at least one place and while the other locations contained the data necessary for their functions.

Image of a portion of data-mapping spreadsheet.
Data mapping of childcare provider information as it appeared in the application when we started this project.

This project is still under development.

Tasks

Heuristic Site Review
Research
Wireframes
Prototypes
Full-color Mockups
Design Specs
HTML/HAML
CSS/SCSS/SASS

Tools

Sketch
InVision App
InVision Studio
Principle App
Origami

Team

Client – State of Connecticut, 2-1-1 services
Development Team – United Way of Connecticut
Executive Team Lead – Leo Pellerin, CIO
Project Lead – Scott Robidoux
User Experience & Visual Designer – Christopher Wilson
Front-end Developer – Christopher Wilson

Reader Interactions