Eco Eats is an organization that aims to provide food insecure communities with discounted food from vendors, while minimizing the amount of food wasted by such vendors. The organization is currently located in Vancouver but hopes to expand its community base across North America. The app will allow community members to shop for discounted food items in a dignified manner before the items reach their best-by or expiry date.
Many organizations attempt to provide food to people in need through in-person options such as soup kitchens and neighborhood houses. Many of them unintentionally fail to provide dignified access to these services as they leave consumers feeling as if they receive leftover food.
Currently, there is no app that provides the community with dignified access to affordable food. Also, there is a limited number of apps that effectively provide education and assistance for consumers and vendors to reduce their food waste. The app, therefore, has the chance to deliver communities with a solution for both food insecurity and food wastage.
The project was conducted in collaboration with two user experience designers, Natascha Mehrabi & Irem O, who conducted the UX-related research, planning, paper prototyping, wireframing and testing. As the user interface designer, I was responsible for the visual identity and ensuring the core design intent was reflected in all user interface elements to create a seamless interaction.
Through an elaborate interview with the client, the founder of Eco Eats, we were able to elicit an extensive list of descriptors and keywords that could define the identity of the organization. Using an affinity diagram and reverse-inception analyis we were able to narrow down the organizational values as:
dignified, sustainable, efficient, supportive, holistic, strategic, light hearted, empowering.
In combination with the research conducted by the user experience (UX) team, and in conversation with the client I was able to narrow down the core design intent to:
EMPOWERING COMMUNITIES THROUGH SUSTAINABLE ACCESS TO FOOD.
With the design intent in mind two different art directions were created. The first one reflects an uplifting & inspiring community that supports one another to enable easy access to economically sustainable food. The other art direction showcases the relatable interaction between community members in their quest for dignified access and food.
Through conversation with our client and from the UX research we decided t0 focus on the uplifting & inspiring art directions as the basis of the visual language. The established mood allows the community to feel a sense of ease, even in the light of food insecurity. This mood is reflected in the visual language as an airy & efficient use of space with fresh & bright color. The shapes would be bold & loud with simple & smooth motions.
Colours for the brand are specially chosen to reflect the triad of stakeholders of the organization. The users (blue), vendors (green) and charities (orange) all bring complementary characteristics to establish an uplifting and empowering sense of community.
The logo features the font ‘coquette’ which entails both round playful curves and sharp innovative edges. These two characteristics are carried through into the playful heading typeface of ‘Quicksand’ and sharp body typefaces. For the body font, Ingra is used for the general brand however for improved loading time and accessibility the system font ‘San Francisco’ proved to pair well with the heading font.
The logo creation process went through many iterations until reaching the final typographical logo with the organizational title below. In line with the color palette established, the logo highlights the interaction of the community members and vendors. The ‘basket weave’ inspired pattern highlights the integration of vendors into the alleviation of communal food insecurity. The typeface letter continues to reflect the uplifting & inspiring spirit of the brand.
To ensure that the user continues to feel dignified while purchasing the ‘saved food,’ illustrations are used throughout the app to add a light-hearted notion. In additon to the light-heartedness the illustrations also enhance the functionality with mood evoking interactions.
Through the user research conducted it became apparent that an onboarding process was needed, to ensure users were aware of the variety of functionalities in the app. Therefore, users would be guided through an onboarding process during their first app use. This enables them to learn about functionalities such as the item drag and drop as well as the wishlist notification.
Once in the app, the user has a variety of ways of searching for products through both a list/map browsing view and search function. Once the item has been added and reserved, the user can view their reservation pick up times and see the amount of money they saved by using the app. If an item is not available the user can add it to the wishlist to receive a notification as soon as it becomes available.
By creating Material Design inspired hovering effects and interactions, the UI elements are matching the app experience to a real life shopping experience. For example, the individual products appear to be sitting on a shelf with their price and information on a tag below. Once the user has found the item they were looking for, they can drag and drop the item into their basket.
In addition to the high fidelity prototype our team decided that the research and brand identity had to be succinctly summarized for easy access and future use by the organization. Therefore we created a brand guide that includes items such as domain research and personas as well as a detailed description of the visual brand identity.