Reducing food waste by connecting the community
As part of a three week project at General Assembly, my team was tasked with the design of a service that would match people with excess with those in need.
UX Team: Urvi Fontenot, Noel Oropesa, Shiwani Pal, Patrick Ree
Web Developer Team: Jeanette Adelson, Niran Manandhar, Chris Robbins
UX Design, Research (Interviews, competitive analysis, persona development), Branding and Logo Design, Content Management, Wireframing, Visual Design
Pen and paper, Balsamiq, Sketch, InVision, InDesign, Illustrator, Photoshop, Trello
It was challenging finding a process to match charitable organization that had needs with the food donors with the products the charities needed.
To face this challenge we focused on the product taxonomy to ensure that it was simple enough to be able to suggest appropriate matches.
We conducted a competitive analysis and interviews to get insight from our users.
We conducted a competitive analysis for Food Cowboy, Keep Austin Fed and City Harvest. Food Cowboy allowed direct donor to charity communication which wasn't as apparent in the other competitors. We definitely wanted to include a communication aspect to our service. We also learned that there were a lot of scheduling and registration difficulties which Feed512 needed to simplify for our users. From our interviews we learned that a lot of businesses were open to helping people in need, and simply needed to find easy processes that would be easy to implement in existing operations.
Following the interviews we developed three user profiles that highlighted some of the main pain points we discovered. We established two giver and one receiver persona. By creating these personas we wanted to focus on easing the process of matching givers with the right receivers in need.
First thing we did to kick off our planning process was to brainstorm the necessities and features of the service based on the discovered needs of our users. We understood that we needed to include features that allowed for easy implementation for existing operations and also to include a transportation feature.
Site Map and User Flow
Once we agreed on specific features, and wIth our users in mind, we developed a site map and user flow so that we could move into wireframing our content.
When we were creating sketches alongside our user flow, we ran into a recurring problem, which was how we would allow users to show what items they either had available or needed. Our team knew that we wanted to create a process as easy as possible, and knew that our personas did not have enough time in the day to type in every specific item, therefore we concluded that we wanted to have a set of high level categories that our users could select. We looked at the way groceries arranged their goods in their store and used similar categories. If users wanted to provide more specific information on their goods, they would be able to do so as well.
Once we developed a site map and specific user flows we developed a process flow. We wanted our web developer team to have a reference to the flow of the entire site.
Wireframes and Design
After we held a design studio, our team jumped onto the whiteboard to develop our first sketches that included all of our ideas.
Once we developed the Balsamiq sketches using our initial whiteboard sketches, we realized that there were a lot of pages that exceeded our initial user flow. We understood that each click and page jump could be a possible mental speed bump for our users and we needed to eliminate steps, clicks and pages.
We asked a few users to test our first iteration (and later on our latest iteration) and we learned that users wanted to reduce clicks even more, they wanted an opportunity to customize their pick up/delivery time and they wanted a tool to indicate the quality/state of the goods. We addressed the first two discoveries by further reducing our page count and combining several pages, and then adding a scheduling feature to specify the time of the exchange. Since the users main goal is to quickly post their goods without too much effort, we decided to only include a text box in the request page where users would be able to report on the quality of the goods if they wanted to.
Once we developed the Balsamiq sketches using our initial whiteboard sketches, we realized that there were a lot of pages that exceeded our initial user flow. We understood that each click and page jump could be a possible mental speed bump for our users and we needed to eliminate steps, clicks and pages. With the support of our usability test findings we decided to consolidate several of the pages and steps as seen in the images above. We discovered that we created two separate pages for the selection of a location and time scheduling. In the second iteration we combined the two pages onto one with the inclusion of a drawer for the time selection feature.
We developed a style guide to provide to our web developers to make the design process easier for them, so that they could focus on the more difficult tasks such as the database and matching feature. We used the Bootstrap grid throughout our design, not only to make the web designers' design tasks easier, but also to develop a responsive design that could be translated to various different mediums.
Once we developed a style guide and final iteration of the low-fidelity Balsamiq wireframes, our team started to design the high-fidelity wires. With the help of the Bootstrap grid we were able to also modify our designs for iPad and iPhone. Please click on the link below to see the interactive prototype for Feed512.