While mobile “ready”, some features of 211Childcare.org’s search module needed enhancing to be truly mobile “friendly”.
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.
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.
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.
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.
- Only one provider is on screen at a time, but the features are aligned allowing for easy side by side comparison.
- 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.
- A filter allows for removal of unwanted parameters, keeping the screen free from unnecessary clutter.
Other requirements needed to make the comparison tables user friendly were to:
- Keep the labels on screen for each provider
- Make it obvious that there were other options to view
- Make it easily usable from a mobile touch screen
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.
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.
This project is still under development.
Heuristic Site Review
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