UX Case Study: P4: Mesh Food Exchange

An online wholesale recovery platform for redistributing food between suppliers and recipients to reduce food waste.

Mesh Food Exchange is a food rescue marketplace that simplifies the food re-distribution process. Their online platform matches unsold food products to secondary markets to help reduce waste, save money, and feed more. Our project is to redesign their website to engage the visitor and convey the Mesh story and the software platform they developed.

Brief

For our fourth project at Red Academy we were tasked to design an informative brochure in the form a responsive website. Our final deliverables will include a clickable high-fidelity prototype and style guides for our client. The project timeline was 3 weeks.

Project Goals

  • Depict the Mesh narrative through a responsive website
  • Clearly communicate the online Mesh platform
  • Inspire a sense of community
  • Create blog post templates

Our Team

Our design team included me and Kevin for User Experience Design, and Christina for User Interface Design.

The Opportunity

The cost of food waste in Canada is immense. Every year, $31 billion worth of food in Canada end up in landfills and composters, which amounts to 40% of total food produced. While 47% of food wasted in Canada occurs at home, the other 53% of wasted food is generated in commercial and institutional settings. This is often because it’s easier and cheaper to discard imperfect food than to manually coordinate finding the right end user. To counteract this, Mesh has created an online B2B platform to find alternative destinations for surplus food outside of landfills.

With this information, we see a great potential for Mesh to not only raise awareness to this immense issue but also improve the online experience for the organizations that view the website.

The Challenge

Currently, we found the website had a lack of engagement and clarity of what the Mesh platform is to the visitor. Mesh offers a B2B marketplace that handle large volume food products, but is not evident at a quick glance. Additionally, it was structured as a one page parallax website, but its content could be more descriptive and improved.


Research

Design Inception

We initiated the UI research by creating a Design Inception chart to help us visualize what we know about our client so far. The centrepiece is why people choose Mesh, which we have determined as making an impact in reducing food waste and partnering up with local organizations with the same incentives. Moving out to the middle section, we looked into the existing website for the mood being portrayed, and on the outer level for visual language, we combined keywords that described Mesh from the current site with what we learned from the kickoff meeting.

Adding on to what we know so far through our client kickoff meeting, we identified who the stakeholders are and who the website will speak to. These are Food Suppliers, Recipients, Drivers, Waste Streams, and Governments. While there are several stakeholders involved, our project will focus on the main users, which are the Suppliers and Recipients.

In order for our team to gain a deeper understanding of our main users, we conducted a series of user interviews. We sought out several Suppliers ranging from vendors from farmers markets, organic food distributor managers, and co-ordinators from markets with zero waste incentives.

Affinity Diagram

After speaking to a few Suppliers, we compiled our interview notes together and created an affinity diagram to find the commonalities of what they valued most.

We determined that Suppliers valued partnering up with local organizations and the community that is built through working together towards the same goals. Most importantly, they valued the trust that is formed by supporting and answering each other’s needs.


Planning

User Persona

With our research, we were able to focus on the patterns and overlapping data between our interviewees, and created a user persona which we can utilize as a unified representation of our primary user.

“It’s amazing to be connected to a community.”

Meet Sarah; she owns and operates a food processing company based in Vancouver. Aside from her environmental focus and love for local restaurants, she is bright and spunky and can be seen at acoustic shows in the city. Her passions lie within supporting organizations that promote sustainability, and uses her leadership to help feed those in need. Furthermore, she values showing openness and transparency to promote trust between organizations and people that use their products.

Next, we looked back at our project goals to ensure we’re on the right track. In order to communicate the narrative, the explanation of the platform, and the community aspect, then mesh it with our research data, we looked into other companies located globally. These include Yume Food Australia, FreshSpoke, and Spoiler Alert. Through their websites, we identified how their platforms work, who their users are, and what type of products they handle. This would also give us a better understanding of how Sarah’s organization would run.

Feature Prioritization

Conducting a Competitive/Comparative Analysis gave us the knowledge of the key features of other organizations operating in a similar domain. With this in mind, we were able to compare their features with what was brought up in our interviews.

From speaking with Suppliers, we learned that before they commit to joining an online platform, they would like to learn about how the platform works and then learn about the company behind this, in that order. This tells us that the platform knowledge page would be more important than the company story page on the website.


Design

After learning about other companies' key features, we focused on the layout of their websites. This would give us a better understanding of how they communicated their stories, and the types of pages they have on their navigation bar.

Sketching existing website layouts to identify the sections on their homepage.

We took the relevant sections that would connect with our project goals: to convey a sense of inspiration, community and partnership, and transparency and trust, then we implemented these into our design. These include adding big, bold copy to provide supporting information, providing detailed explanation for better platform knowledge, and adding a Testimonials carousel to promote company transparency.

Key Findings Circling Back to Project Goals

Revising the About section to add a more detailed explanation and image to represent the company and not the platform.

Depicting the Mesh narrative

Currently, the About section of the website lacks information, so we decided to move this into its own dedicated page in order to hold more body copy and description. In addition, throughout the website we added ‘big copy’ placeholders for areas that needed supporting copy. We also decided to change the page title to About Us to better depict that this section will be the company story and not an explanation of the online platform.


Communicating the online Mesh platform

The How It Works section would become its own page.

In order to communicate the online platform, we had to provide a clear explanation of not only what it is, but also who it’s for. We learned in our client kickoff meeting that it is for businesses that handle large volume and wholesale produce, so we wanted to make sure this is mentioned immediately after landing on the homepage.

Additionally, we would create a more comprehensive step by step process that explains how the process would pan out for either Supplier or Recipient. We also moved the How It Works section into its own page.


Testimonials add a personable level of trust from current Mesh users.

Inspire a sense of community

The sense of community is depicted by how Mesh matches Suppliers with Recipients, and even on the Partners & Collaborators section on the homepage, where we can see the organizations from the Lower Mainland that Mesh works with.

However, what came out of our interviews as the most significant was the need to show company transparency, before an organization gains the trust of the online platform. This would come from the added explanation of the how the platform works, the story of how Mesh was started, and with the new Testimonials section above the Partners & Collaborators section on the homepage.


Using Design Studio to create a Blog Post template

Blog post templates

We rapidly created blog posts layouts using Design Studio. By timeboxing ourselves we were able to make rapid iterations while prioritizing the main sections needed for a blog post. In the end we combined our ideas and features such as related blog posts, social media sharing, and possible media such as photos and videos.


Style

Mood Board & Logo Exploration

Clean & Organic Moodboard

We presented two moodboard directions to our client. They pointed out what stood out to them from each direction, and we combined them into a unified moodboard. Some of these elements are: the use of white space, fresh, crisp images of food, simplified icons and illustrations, and people that value food.

Logo Exploration

We explored how Mesh can be conveyed in a new way through the logo. Some ideas examined in the image above were (1) organic-shaped, imperfectly hand drawn but appealing, (2, 4) a mosaic that represented the community and the people involved, (2, 5) fast moving shown with a forward tilt, (3, 5) the supplier-recipient pairing, and (5) a combination of pears, supplier-recipient pairing, and the letter ‘M’.

After discussing with our client, we created a logo that better conveyed the idea of Circular Economy, as seen on the current logo with its arrows in a cycle. However to create a bold, contemporary logomark, we added new elements such as the gradual steps of green changing hues and stylized the pear outline instead of using arrows to depict the flow. This would later be approved by Mesh.

We continually developed the logo up until our final presentation for our client. However for our high fidelity prototype, we opted to use the current logo, since the client was still satisfied with that version and we were not able to get final approval before the presentation day.



Usability Testing

Though we were not able to test with real Suppliers due to availability issues, we emulated the ideal situation for when they would require an online food redistributing platform such as Mesh by creating a user testing scenario for our testers.

Scenario
  • You are a food processor who operates in Vancouver. Your motivations are to provide quality, nutritious meals for your clients. You love your work, however sometimes it is hard to know exactly how much produce to order in to fulfil your orders. You hate wasting food.
  • After packing up all the orders, you have an excess of unused produce that are unsellable.
  • You have heard about this local food recovery platform that matches excess food with Recipients and you want to look into it.
  • A quick search pulls up Mesh Exchange.
Tasks
  • Learn about Mesh Exchange’s online platform. How does it work?
  • Learn about the company
  • Find out who is involved with this community
  • Learn about the supplier side of the platform
  • Register for an account
  • Browse back a read a blog post

The first few tests brought up these points to consider:

On the desktop Homepage, the Featured Posts section under Partners & Collaborators would later be removed.
“Is there a large demand from the identified users for a blog?”

Originally, as a client request, we included a section on the homepage for Featured Blog Posts, to lead the viewer into the latest updates from the company. However, at this point, we were unsure whether or not there would be engagement from the current Mesh Suppliers.


When the hamburger menu is clicked on mobile, the nav bar would slide in from the right.
“Is there a better way of chunking the menu?”

Adding a space between the main navigation pages and the Log In and Get Started links made the navigation bar more clear and less crowded. This would also help with hotspot spacing on mobile.


The first version of the desktop How It Works page consisted of infographics of the step-by-step process.
“Can the ‘How It Works’ be showcased in a different way?”

Because there is a slight difference on how a Supplier and Recipient would go about the step-by-step process through the online platform, we improve the first version by creating a separate mini infographic for each user. This would provide more clarity when either user views the site.


Further testing

Upon further testing, we took the above points and implemented them into our mid fidelity prototypes. We would then receive the following feedback after conducting more tests:

“What is the justification for the check boxes on the right side?”

Although we assumed the interactions could follow along strictly on the right side on the mobile version, our user tests would suggest otherwise.


“The type displays small and impacts the readability.”

Increasing the body text size and widening the paragraph widths throughout our mobile screens would improve legibility.


Future Considerations

Our first main hurdle for the project was sourcing user interviews from Recipients. Because the online platform is a closed, vetted marketplace, we were unable to gather contact information from the registered Recipients of Mesh. Conducting user interviews from Suppliers was also a challenge, and we resolved to visiting different groceries, farmers market vendors, and speaking with existing contacts within this industry. Although one of the goals for this project was to design a website for potential new users, it would have been insightful to know how the registered users feel about the current website.

In addition, creating a user persona for a Recipient would have been beneficial as well. However, due to our project timeframe, our team has decided that in order to keep making progress, we had to move forward and work with the best version of what we currently had.

After our client presentation, we sat down with them to go through the website prototype thoroughly. They suggested to have a section that shows the brands they carry, and we thought implementing this would further support the users’ need for company transparency.

Summary

Our team worked really well with each other, and our skills complemented each others’ even better. We learned a lot about each other and what we would bring to the next project moving forward. Working alongside each other really pushed our project forward, however having a teammate fall into sickness and being unable to be present for a few days in class slowed our momentum but didn’t stop our progress. We found that communicating with each other everyday, even by just mentioning small changes made or what came up during the day, kept us going in the direction we had intended. Consequently, I enjoyed taking part on a bit of the UI side by helping to generate logo ideas.

Our client as well as our team were quite satisfied with what we were able to come up with in three weeks. There were a few hiccups encountered, but communication was key to producing a minimum viable product. All in all we were able to reach the goals we had set within our scope.

This project gave me an opportunity to experience real world situations in terms of working with a client and being temporarily shorthanded. However we faced these as a challenges and keeping positive has allowed this project to be a great learning experience.