The Problem:
This project presented the challenge of conveying a robust data set of primary and secondary research in a coherent narrative flow. The interface needed to be educationally evocative while also conveying the hopefulness and connection the project is meant to inspire.
Solution:
After a vigorous research process, a strategy was developed to organize the website into four narrative sections with external about and resources sections. The interface employs a coherent narrative structure with intuitive interactive components and an accessible navigation system. Undergirding the entire enterprise is an evocative and calming visual identity that can be applied as a robust design system beyond the digital realm.
What I did:
Design Direction
Primary, secondary, & UX Research
Video production
Copywriting
Information Architecture
MVP
Wireframes
Competitive Analyses
UI Design
Prototyping
Interaction Design
Branding & Identity Design
Digital Illustration
HTML & CSS
Content Management Systems
Research
This stage included primary personal experiences from a Zen Buddhist mindful eating retreat at Great Vow Zen Temple, practicing Japanese oryoki, and interviews with local farmers & food producers. I also conducted extensive secondary research through various books, articles, and podcasts. Finally, I researched UI design, digital illustration styles, identity, branding, and the presentation of similar information.
Strategy
The primary goal of user-centered design is to determine the audience and to craft an experience that helps them seamlessly achieve their goals in the process of achieving the underlying goals of the project itself as well.
Audience
1. Progressive consumers
2. Socially-engaged citizens
3. Local farmers, food producers, & farmer’s markets
4. Educators
5. Artists & Designers
Competitive Analysis
Understanding the audience and how to appeal to them requires understanding the interactive and visual language that they are familiar with so that they recognize what is being communicated. From there, opportunities arise to customize the experience and set the product experience apart.
Positioning Archetype
The goals of community action and education for this project led me to the strategic position of the Sage Archetype. This archetypal identity centers on compassion and education while being calming and inviting connection.
Sitemap
With an emphasis on accessibility, the information hierarchy offers several user journeys: a linear scroll through the sections of the page, a hero section with buttons for each section below their corresponding icons, and a global sticky navigation hamburger menu to quickly change course with ease.
Wireframes
From hand sketches to Figma for digital low-fi and high-fi design comps.
Branding
From sketches to refined icons and illustrations; the logo mark, type, and color communicate trust and sophistication.
Icons
Bespoke icons for each site section: the self, the farmer, the community, and the land.
Spot Illustrations
Clean vector illustrations with a hint of texture to add organic character.
Sample Mobile Screens
Visit the live site here: https://www.makepeacewithfood.org/
Reflections
Building this website was an exercise in growth. Every stage benefited from careful consideration and mindfulness—from initial research all the way to high-fidelity design and coding. The core of this project was in prioritizing accessibility and intuitive interaction. I also put a lot of thought into the ability of the design system components to translate to other mediums outside of their digital habitats.
This is my senior design thesis and the culmination of my time studying design at Portland State University. I made this site with the intention of fostering dialog and community action and I sincerely hope it succeeds in moving us all toward a more mindful interconnected relationship with food, one another, and our ecosystems.
Epilogue: Posters
Let's Make Something:
Thank you!