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.
Team Leader, UX Design, and front-end development
HTML, CSS, SCSS, JS, InVision(interactive prototyping), Figma(hi-fi prototypes), Photoshop/Marvel(lo-fi prototypes), pen & paper (paper prototypes).
CCH had just began their Live Well Community Market Program to improve and promote access to healthy food across San Diego county by providing various forms of aid to neighborhood markets. CCH staff began to fill out surveys regarding the current state of markets however they had no way to easily classify the community markets into “levels” which would determine the amount of aid they would provide each market.
A web application that serves as an automatic classification tool as well as a visual aid for market information. This solution eliminates the need for manual classification, removing a regular 20+ hour workload. With a more efficient system, CCH was able to increase the frequency of the market surveys from once every six months to a monthly process, reducing the time it takes for markets to receive their aid and increasing community access to fresh produce.
This solution eliminates the need for manual classification, removing a regular 20+ hour workload.
Expert Interview Findings
These were the primary findings from our expert interviews with CCH staff.
- 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.
From the interviews we were able to generate a list of 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.
Target Audience Research
Our initial findings from research were not only that the general population has had a huge increase in cell phone usage over the years (figure 1), but also that 45% of people in the low-income bracket used cell phones as their primary source of internet (figure 2). Our client expressed the desire for this tool to eventually be a resource for not only their staff but also for market owners and eventually the community. Our findings also showed that a large portion of the mobile users in the low-income bracket use android or other third party phones which would not have access to iOS applications.
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.
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.
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
From the information we gathered through research we evaluated many different possible ways to solve this problem. We made the decision to find a solution that would fulfill five design requirements necessary for our client:
- Functionality — Multiple concurrent users, quick classification
- Flexibility — Easily changed if the survey were to be altered
- Accessibility — Available to future expansion of user base
- Usability — Simple to use for average to low tech literacy
- 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
Rather than designing a mobile app for Android or iOS users, we made the decision to build a responsive web application, as it ultimately meets all five of our design requirements. It is functional in that it allows concurrent users and can do the data processing near instantly, we can make the classification algorithm flexible to allow changes in the survey, widely accessible to those in the low-income bracket, simple ui for ease of use, and the use of a free web hosting platform would make the solution completely free.
After our initial ideating and research process we began prototyping. From talking more with our clients, they discussed two core functionalities essential to the design: a data table displaying all of the markets and their information, as well as some sort of way to visualize the data.
We met with the CCH staff to discuss our current work and gave them interactive low-fidelity prototypes to test. From testing we found the side-by-side view to the most intuitive for the users and we generated an additional list of features to be added for our next iteration:
- Specific market requirements checklist
- Data table search market by address
- A way to visualize location
- Data table filters
High Fidelity Prototyping
After meeting with the back-end team and determining the desires would all be feasible, we used our client’s feedback to redesign the user interface. The changes that we made from what we learned at the meeting included:
- 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
User Testing — More Feedback
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
In the final product we made the decision to put the search bar and filters on the same line. This decision both saved space by utilizing one line instead of two, as well as made it more intuitive that the filters would be applied to all elements on the screen.
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.
My personal role in the implementation was using HTML and CSS to build the header, about page, contact page, and organize all elements on the home page. I used JS to manage the tab creation when a market was clicked, and I was responsible for making the full application mobile-friendly.
Design Requirements Check
We re-evaluated our final product to ensure we met the design requirements we initially set.
- The product is functional, the web application immediately classifies markets and allows for multiple concurrent users.
- 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.
- The application utilizes the free web-hosting service Heroku to maintain affordability.
- It is mobile-friendly meaning it is accessible should the staff choose to expand their user base to market owners or consumers.
- Finally the application proved to be usable throughout user-testing including with users of lower-than-average tech literacy.
Overall, our client was very pleased with our finished product and emphasized the impact the application will have on not only her organization but also in increasing the access to fresh produce in under-served areas of San Diego.
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!