Image for post
Image for post
Finished Product — https://cchtool.herokuapp.com

Case Study of CCH Market Classification Tool

This was a project with my Global Ties team for our non-profit community client, San Diego Center for Community Health (CCH). My primary role on this project was UX design and front-end development. I worked with HTML, CSS, SCSS, and JS to make an appealing, mobile friendly web application while also adhering to our client’s branding guidelines.

My Role

Tools

The Problem

Image for post
Image for post
70+ markets with 100+ questions. No wonder it was taking 20+ hours

Our Solution

This solution eliminates the need for manual classification, removing a regular 20+ hour workload.

Expert Interview Findings

  • There was currently no one-to-one correspondence between the survey questions they collected data for and the requirements listed for each level.
  • Their long-term goal is to make this tool open to market owners so it can motivate them and show them how they can improve their stores.
  • They would also in the future like to make this tool available to consumers so they can see what their neighborhood markets and compare markets by their level.
  • They would also want to present the progress of the markets that are receiving aids.
  • Their plan wanted a solution that is flexible to changes of the market survey questions.

Needs

  • A solution to automate the market assessment and classification process.
  • The solution should be able to classify any new survey data that will be collected in the future.
  • The interface for the tool should be very simple and intuitive because CCH staff members have intermediate technical fluency.
  • The solution needs to be cost-efficient because they do not have enough budget to allocate in this area.
  • The automated solution should be easily accessible.
Image for post
Image for post

Target Audience Research

With our clients wanting to expand the product to the community they serve, we chose to use a responsive web application which catered best to the low-income demographic.

User Personas

Image for post
Image for post

Sandra, a CCH Staff Member

Bio: Sandra has been a member of the CCH staff for a year now and is very passionate about food systems. She works directly with markets, helping them strategize and implement best practices in order to better the communities that they serve. She currently struggles with making use of the survey data that she has on markets and would like a way to be able to use it without having to spend an afternoon looking at a spreadsheet.

Role: Helps run CCH and enables community markets to provide healthy options for their surrounding community.

Desires: A functional automated classification to allow for better allocation of resources for market partners for overall success of the program.

Hopes: To improve the overall health of the community markets and the community that revolves around them.

Worries: Not being able to provide timely aid to CCH market partners.

Image for post
Image for post

Jordan, a CCH Market partner

Bio: Jordan has served the City Heights Community through his market for several years now and loves to see the effect his market has on his surrounding community. He currently is seeking aid in order to better his market because he currently struggles to maintain the current status of the market.

Desires: Support in various forms in order to better his ability to better his customers and communities through fresher produce and a more accessible market.

Hopes: To transform his markets into healthy centers of support for his surrounding community.

Worries: The market won’t be able to improve in a manner in which CCH can deliver more support to his to have further growth.

Fears: Being unable to secure enough funds to continue his market and go out of business, leaving the community with less food options and places of social gathering

Design Requirements

  1. Functionality — Multiple concurrent users, quick classification
  2. Flexibility — Easily changed if the survey were to be altered
  3. Accessibility — Available to future expansion of user base
  4. Usability — Simple to use for average to low tech literacy
  5. Affordability — low to no cost to fit within client’s budget

After analysis of many possible solutions — such as outsourcing work, hiring seasonal interns, and altering the survey for easier classification — we decided automating the process would be the best solution. Other options such as changing up the survey process or hiring interns for manual classification were either not feasible due to constraints or were out of budget for our client.

Shaping a Solution

Rapid Prototyping

Image for post
Image for post
Image for post
Image for post
Paper Prototypes
Image for post
Image for post
Image for post
Image for post
Low-Fidelity Prototype

Initial Feedback

  • Specific market requirements checklist
  • Data table search market by address
  • A way to visualize location
  • Data table filters

High Fidelity Prototyping

  • a checklist detailing the requirements each market has met and still needs to complete
  • a more visible search bar
  • a google maps view for the markets
  • filters for both the data table as well as the pie chart
Image for post
Image for post
Click here for link to interactive prototype

User Testing — More Feedback

Image for post
Image for post

After creating the high-fidelity prototypes using Figma we began a round of user testing. The user testing involved our primary stakeholders, CCH staff, as well as various students around the UCSD campus that would be representative of our client’s student interns. We did our best to choose users that were of similar tech fluency as our client and their staff.

Our main discovery was that the filters were not intuitive. Users expected the filters to apply to all elements on the screen.

Final Design Decisions

Our team also made the decision to swap the dashboard filters out with an option to toggle the view method instead, for example you can view by levels or by store type. This component was placed within the borders of the dashboard on the right to signify to the user that it would affect only elements within the dashboard. When the view is toggled it affects both the pie chart and the google maps view.

Implementation

Image for post
Image for post
Final Product

Design Requirements Check

  1. The product is functional, the web application immediately classifies markets and allows for multiple concurrent users.
  2. It is flexible, we provided full documentation, including a video tutorial, for how to upload a new survey rubric should they decide to change it.
  3. The application utilizes the free web-hosting service Heroku to maintain affordability.
  4. It is mobile-friendly meaning it is accessible should the staff choose to expand their user base to market owners or consumers.
  5. Finally the application proved to be usable throughout user-testing including with users of lower-than-average tech literacy.

Takeaway

As a result of this experience I learned the importance of gaining outside perspective through user-testing as well as the value of keeping the full team involved in the design process.

We had many rounds of user-testing and in each I was able to gain more insight as to the way the users expected the product to function. Oftentimes as a designer we project our own framework and expectations onto our work and it can be difficult to think of other possible use cases. This is why I firmly believe in the importance of the human-centered design process.

Thanks for reading! I’m always trying to improve so any feedback is extremely appreciated!

Head back to my portfolio or check out another case study about my work co-founding a civic engagement startup.

Image for post
Image for post
My team with our CCH clients

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store