Food Not Bombs
Bridging designers and developers
4 MINUTE READ
ROLE
UX Designer
TIMEFRAME
1 week
Dec 2023
TEAM
4 UX Designers,
3 Developers
TOOLS
Figma, FigJam, Zoom, Google Slides
PROBLEM
The Food Not Bombs website doesn’t clearly communicate their identity or mission, and navigating their resources is difficult.
SOLUTION
Create a clear hierarchy to highlight the organization’s mission and primary resources, and summarize key takeaways to make information easier to digest.
OVERVIEW
Our small but mighty team
I collaborated in a cross-functional team of UX designers and developers to redesign the Food Not Bombs (FNB) central hub website for a 5-day hackathon.
FNB is a decentralized organization that provides free meals. They don’t have headquarters or leaders, so their website serves as a directory of local branches and a collection of resources for volunteers.
Our team started with 4 developers but one dropped out on kick-off day, so our remaining members rallied to produce a polished app by the deadline.
It wasn’t until the final day of the hackathon that we discovered our development team was actually 40% smaller than every other team in the competition.
RESEARCH
Identifying the main issues with FNB’s website
A teammate and I wrote a usability testing script to test the ease of completing tasks on FNB’s existing website, focusing on 4 functions of the website:
Our other UX teammates wrote user interview questions for our target demographic- people who are interested in engaging with non-profit organizations.
Key takeaways from usability testing and interviews- the existing website:
The website contains a ton of resources for people interested in starting a new branch as well as a detailed record of FNB’s history, but none of it was presented in a way that was easy to access.
IDEATION
Adapting the UX process to the development schedule
Because the focus of our redesign was making FNB’s identify clearer and making the website’s information more digestible, there was no backend development necessary.
This actually presented a challenge to our developers- all of them were more comfortable working in backend. The only developer comfortable in frontend was the one who had dropped out at the beginning of the hackathon!
This was also a challenge on the UX side because it meant there was no backend setup to buy us time while we synthesized research. We had to skip steps and speed up our ideal UX process in order to hand off wireframes to the developers as quickly as possible.
DESIGN + PROTOTYPE
Prioritizing communication between UX and Development
Since I was interested in learning more about how developers work, my main role was bridging the designers and developers.
Because we had handed off low fidelity wireframes as soon as possible, we had to make a lot of decisions on the fly while designing high fidelity wireframes.
I communicated those design updates to specific developers depending on what components they were working on, like elements we realized were unnecessary.
Most of my UI work was also directly related to the developers. Since this was a concept project without any direct contact with Food Not Bombs, we wanted our deployed app to clarify that we weren’t associated with the organization.
Our UX team came up with the idea of having modal dialogs- one would be linked to any pages we wouldn’t have time to build out, and another would be used to link out to FNB’s actual website to show their in-depth resources.
I designed the two modals and coordinated with the developers to make sure links were connected to the corresponding modal.
I also worked with one of our designers to create and apply local styles to the high fidelity wireframes, as well as checking for color contrast issues. I made a style guide for our developers and did a final check of our text boxes and colors to make sure they were labeled with local styles.
USABILITY TESTS
Validating our redesign
We tested our Figma prototype with the same tasks in our original usability testing to see if our redesign actually made them easier.
The results revealed huge increases in ease of use and direct successes.
LESSONS LEARNED
Introducing Dev Mode to the development team
Our developers weren’t familiar with Figma’s Dev Mode, but they had heard about things going wrong when people copied and pasted code from it. They also didn’t have enough time to learn how to use Dev Mode during the hackathon.
But they didn’t have to use code straight from Figma’s Dev Mode for it to still be useful. I explained specific ways to use Dev Mode that would save them time, like where to find font information and how to check where links should lead.
Minimizing the need for back-and-forth communication
Working under a time crunch with a short-staffed development team, our UX team realized how important it was to be specific when describing potential design elements to the developers. Whenever possible, we would show an example similar to what we wanted to design.
It was easier and clearer to describe design elements over Zoom, but we couldn’t always get a hold of each other quickly enough. We would end up hopping back and forth between Slack and Zoom.
To save the developers time, I included visual references in my Slack messages as often as possible. If I referred to a specific section of our Figma file, I would include a screenshot to make it clear where to look. If I was describing a design element, I would make a GIF of my screen recording as I showed it in our prototype.
We had a unique challenge with how small our development team was, and I’m really proud that instead of letting it create tension and conflict, we turned it into an opportunity to listen and find ways to help each other out.
