An urban nonprofit that offers free clothing to two distinct audiences was looking to transition from a pen-and-paper, lottery-based appointment allocation system to a digital one where users could schedule appointments and staff could check visitors in and out of the store. Primary goals of the project included: reducing “no show” rates among guests; reducing administrative overhead; and facilitating data gathering for easier monitoring and assessment of the program.
In addition to many calls with the client, I spent a day sitting down in person with various representative “customers” (referred to as guests) of this free clothing program to assess if a digital solution was even viable given the nature of the audience, many of whom are homeless, non-English-speaking, and/or have limited access to, or familiarity with, digital technology.
From this discovery process I produced two key deliverables: a five-page interview summary and then a longer recommendations document that outlined a proposed implementation of a custom, web-based application to handle their appointment system’s needs. This document outlined the different user groups, a proposed technical architecture, and a budget for the project.
We identified a number of significant obstacles to success and potentially problematic issues for users. Key needs included:
- A trilingual interface (English, Spanish and Cantonese)
- Distinct user groups for individual guests, family guests, social/case workers, and internal staff
- A way to handle authentication for an audience of users that could not receive emails nor be trusted to remember passwords
Primary users of the system consisted of two main classes of “guests,” individuals and families, each with slightly different needs. Secondary users included social/case workers, and internal staff. Our main focus was on the user flow for guests.
Initially we crafted a flow for users that presented extremely limited information and choices per-screen to reduce cognitive load; after preliminary user-testing of the beta version of the app many screens were later combined. Here’s an example user flow from an early stage of the project:
Wireframes & Prototypes
I used Axure RP to generate interactive wireframes to demonstrate the user journey and layout of each screen. View these preliminary prototypes here »
Several rounds of revisions took place before these prototypes where approved by the client.
Design took place in two key phases. First involved producing a style tile and form component guide that adapted their existing brand standards to an WCAG-compliant, accessible online application:
The second, and obviously much more involved, process involved developing designs for actual screens in the application. This included iconography, modal windows, and a variety of state changes, among other things. Designs for guests were mocked up at tablet screen sizes, as the client planned to set up kiosks on-site for users.
Case workers, who were more likely to be using laptops, had different screens for their experience:
Last was staff, who would also be using tablets, but would be managing the guest checkin/out process and needed more complicated tools than the other user types.
While I provided architectural guidance as a senior developer, the implementation — done as a progressive web app in vue.js with WordPress acting as the data provider via REST API — was carried out by other staff. The system has evolved significantly since initial launch as features have been added and the user experience has been refined based on user needs, but can be visited online at FreeClothingSF.org.
We are so fortunate to have found Cornershop for this ambitious project in which they helped us build a client-facing appointment scheduling website and staff service management interface. They delivered to us an extraordinary product, both functionally and visually. I credit the fact that so much of their team comes from a nonprofit background, and that their leadership seems to genuinely value and be attuned to real-world issues concerning equity in access to services and user experience. I’m very grateful they brought a sensitivity and understanding of these concepts to the relationship from the beginning.David Watterson, Manager, St. Anthony’s Free Clothing Program