Kamryn Truesdale
Breaking down food barriers through technology and design.
My team, consisting of two other students, took an Interactive Design course at UW-Madison this semester. Our goal was to design an app that would assist community members with mobility limitations to access food pantries and address food accessibility, which is a major social determinant of health. This case study outlines our design process, including user interviews and observations, problem identification, brainstorming, prototyping, testing, and refining the design.
User Interviews and Observations
We began by conducting user interviews and observations at local pantries to identify their underlying needs. We observed that customers with mobility limitations face several challenges when accessing food pantries, including long waiting times, difficulty carrying heavy groceries, and lack of accessibility. We realized that our app should address these issues to create a better experience for these customers.
Problem Identification
Based on our observations at the food pantries, we created and distilled a problem statement: "How might we assist customers with mobility limitations to access food pantries?" We used Figma, a digital affinity diagram tool, to group similar observations and identify themes. Through this process, we identified several key challenges that we needed to address in our app.
.jpg)
Brainstorming Potential Solutions
We then brainstormed potential solutions to our design problem statement. We visually mapped out as many solutions as we could think of and then grouped similar ideas together. Through this process, we identified three potential interfaces for our app.
Sketches and Critiques
We created sketches of these three potential interfaces and then had them critiqued by our instructor and peers. Based on their feedback, we refined our sketches and narrowed down our options.
.jpg)
.jpg)
Paper Prototype Testing
We then created a paper prototype of our app and had users test the app. We recorded observations as the users worked their way through the paper prototype and made sure to record any breakdowns. We realized that some users had difficulty understanding certain features and had trouble navigating through the app. We used this feedback to refine our design further.
Task Flows and Wireframes
We then created task flows for three tasks a user could complete on the app. We only ensured to include key elements to keep the task flow low-fidelity. We used Figma to create wireframes for the same three tasks identified for the task flows.
.png)
.png)
.png)
Final Mockup
After conducting user interviews, creating sketches, and testing paper prototypes, our team was ready to create a high-fidelity mockup of our app design. Using Figma, we crafted a final mockup that integrated all the key features we had identified in our design process.
Our final mockup was designed with accessibility and usability in mind. We aimed to create an intuitive and easy-to-use interface for users, regardless of their level of experience with technology. To achieve this, we used clear and concise language, large and easily distinguishable icons, and a simple, clean layout.
One of the key features of our final mockup was the ability for users to filter search results by their accessibility and transportation needs. This feature was designed to help users quickly and easily find the food pantry closest to them that would fulfill their mobility requirements.
Overall, our final mockup represented the culmination of months of research, testing, and design work. We are proud of the app we created, and confident that it will help address food insecurity due to mobility limitations and improve access to food pantries for members of our community.
Breaking down barriers to food.
By designing an intuitive and accessible app, not only have we made the pantry experience more attainable for members of the community, but we have provided a solution to food insecurity due to mobility limitations, as food access is a major social determinant of health.