My Role: Design Lead · Client Coordinator
Scope: Client project · 2.5 months · 7 students
Practices: Field Study · In-person Interview · Prototyping
overview
We worked with a non-profit organization called It’s All About The Kids (IAATK) dedicated to providing low income families food as support. As the scope of organization expand, the founder of IAATK, Angela struggled to keep track of food purchasing information by hand, resulted in math errors which then lead to leftover food and overspending.
The goal of our project was to come up with a more efficient & error-free way for IAATK to calculate the accurate amount of foods it needs to purchase.
Understanding Angela’s Struggle
“I want you to make me a Food-purchasing WebApp that can export to an excel sheet with name of food, amount and the total price of each kind of food.”
This was Angela’s initial request.
Instead of following blindly to this request, we wanted to understand the story behind. Why webApp? Why excel sheet? What went wrong in her previous services?
I had a few video-chat with Angela to learn more about the context and her current process of food purchasing. During which, I tried to let her talk me through her entire purchasing process from planning, purchasing to distribution, but her answers only further confused me. I soon realized that the purchasing process is too complicated to explain over Skype. We need to get down to the field and empathize through experiencing. I convinced our entire team to volunteer for IAATK on their Thursday service. This time, we found where the breakpoints are:
Observation Insights
1. Memory slip results in unnecessary mess
During afternoon’s food organization and distribution session, Angela merely relied on her memory to determine how much of each food to put in each bag. It is noticeable that many occasion of memory hiccup happened, which resulted in extra work for volunteers to correct the mistakes, not only time-wasting but causing chaotic situations.
2. Calculating correctly by hand in chaotic environment is impossible
Both during food purchase and food distribution, the external environment is chaotic and noisy. It is just impossible to do complicated multiplication or division correctly by hand.
Angela and Her Volunteers
Through conversations and observations during volunteering, we were also able to create personas to help identify relevant stakeholders and their capabilities, which guided us in the ideation process followed.
Redefine User Needs
Besides the requirement of having an excel sheet as output and the obvious need of some calculation support, we settled on some additional user needs that should be addressed by our final solution.
1. Sustainability: IAATK needs something cheap & easy to maintain
As a private non-profit, IAATK did not have a lot of funds to hire software engineers to maintain complex softwares or websites. Since Angela herself aren’t very familiar with coding either, the solution should be something that is easy to maintain in the long run.
2. Accessibility: IAATK needs something accessible in office and the field
The real case was more complicated than Angela described. As pointed out above, we noticed that Angela needed to do recalculation at multiple points during food distribution process.
3. Functionality: The solution needs to have small learning curve & allow multiple-accounts
Although Angela will be the only user at the moment, she implied that as organization expands, she want to bring in volunteers to help. To avoid lengthy tutorials & possible corruption, our innovation should be easy to learn and have the ability to record multiple users’ action in the system.
A Customized google sheet is a better solution than WebApp
After exploring different available tools, we decided to start prototyping with google sheet. It was not only a tool widely used, but also allowed multiple users and history tracking. Furthermore, it gave us the flexibility of adding customized coding to support IAATK’s specific calculation needs.
Convincing Clients Through Scenario-based Testing
Yet, we faced another challenge. Our client, Angela deeply believed in a webApp solution. What should we do to convince her to open up for other options? We decided to do it through user testing. Via shared screen, I let Angela use our prototype to calculate one of the food she would like to purchase this week, observing pitfalls as she operated thinking out loud.
Testing session with Angela operating the prototype
Adjustments Based on User Behaviors
1. Using color coding to differentiate categories
During testing, we observed that keying in basic product informations, Angela had a hard time finding the column she needed to change each time, since each column looked exactly the same. She had to read through the column name every time to find the correct column. We applied color coding to help with this problem. By categorizing column used frequency, we hoped to decrease her mental load during operation.
Before color coding
After color coding
2. Tradeoff between automatic & manual rounding
When designing formula to generate the amount to purchase, we were unable to decide when to round up and when to round down. We decided to provide the unrounded number on our prototype and observe how Angela reacted to the number. When she saw the number, she clicked on the cell next to it and tried to manually write down a rounded number. She suggested that she liked seeing the raw number and made the decision herself. Thus, we added an editable column where the user could manually input the rounded amount to purchase.
3. Preventing Errors by making backend design transparent
We also observed that sometimes Angela tried to change the cells where formula were imbedded. Doing so would result in formula malfunction, generating error code in every cell. This error was caused by non-transparent design. The user was unaware of the code in the backend, therefore changing columns that should not be changed. To control for this error, we added pop-up warning message when change to wrong cell was attempted and color coded the cells to gray.
Malfunction caused by accidental operation
Added warning message to control accidental changes
Final Solution Highlight
Consistent Wording with Food Bank Catalogue
Customized Formula
Credit to Jeffery Chen for designing the formula
Automatic Color Coding Update
Credit to Jeffery Chen
Challenge Conquered 🎉
The modified version was then sent to Angela to tryout for a week. We hope through successfully using our prototype, she would change her bias. It proved to be the right approach. After a week, we proposed fine tuning the prototyping into actual product instead of the webApp, Angela accepted without hesitation.
Takeaway
1.Do not make assumptions, understand what users really mean: Angela told us she needs unit conversion which turned out to be completely different than what we thought previously. If we did not went on field study, we would not be able to understand what she really meant was calculating how much item to give each person based on her purchase. Thus when conducting user research, instead of interpreting what users said, ask for clarification and make observations are crucial.
2. Empower existing technologies and mediums to solve new problems: Since when as design students we started to aim for creating an App or designing an interface for every project? Sometimes we did not need to create something new for the sake of being innovative. Through this project, I learned that an innovative solution can also be integrating technologies and resources we already have and apply them in a new way to solve problem.