Camp Mate Case Study
This is an example case study for the final week’s project of SuperHi’s Visual Design + Branding course.
Team: Milan Moffatt, André Candido, Kristen Altomare-Ciallella
Year: 2019
My role: Creative Direction, Research, UX/UI Design, Branding
About the Project
Camp Mate is a guide for camping recipes that allows you to save recipes and generate a grocery checklist that you can use offline on your phone. It’s goal is to provide stress-free meal planning for your next adventure in the great outdoors.
This is a self-initiated project completed as the capstone for SuperHi’s Visual Design + Branding course. The prompt of this project was to take a printed publication of any kind and turn it into a digital experience. The idea was to take something that already had a solution, and then adapt it to a new medium. We had around one week to complete the project, so this was a fast-paced challenge!
The Publication
We were instructed to find a print publication, preferably a vintage one pre-90’s, to avoid copyright issues. Modern publications were more likely to already have a web presence, not to mention stricter copyrights.
We found a vintage camping cookbook from the 1940’s with beautiful typography, illustration and design overall. We loved everything about it — it inspired us to bring the joy of camping and sharing meals into an app that made meal planning easier.
Research
Whenever friends and I go camping, meal planning is always one of the more challenging tasks. How much food do we need, and what kind? Who is going to buy all the groceries? I’m not one to cook from memory, so I usually write down the recipes on the Notes app on my phone.
After talking to some friends and office mates, they shared that they felt the same way when it came to meal planning for camping trips. We asked what would make their lives easier, and the main takeaways were:
- Taking the hassle of gathering up recipes from different places on the internet out of the equation
- A easy-to-access, single source of truth when it comes to a grocery shopping checklist
- An easy way to access recipes while off-the-grid, rather than writing them down in a note-taking app or physical notebook
Thinking through user flows
The initial questions we had before designing were: Should this be a responsive website for both desktop/mobile, or a native app? A key need was for multiple people to access the recipes and shopping list, and for these things to be accessible offline.
We decided on a website that would allow users to log in to the same shared account, because the benefits of designing a website vs. app made sense. No downloads needed, no deciding between iOS/Android, and the URL was easily shareable.
We began by thinking through the flow of landing on the homepage, and what users would want to do next. The primary call-to-action would be to View All Recipes, and they wouldn’t need to create an account until they wanted to start saving recipes.
Users should be able to browse by meal type: Breakfast, Lunch, Dinner and Snacks. From there, they can browse all recipes within those categories, view individual recipe pages, and add recipes to their saved list from that page. So we outlined the pages needed:
- Homepage
- Choose meal type
- Category page with all recipes listed
- Individual recipe page
After adding recipes to their saved list, Camp Mate will generate a grocery shopping list with every ingredient needed from all recipes saved into two formats: printed for the old-school folks, and digital. For the sake of time, we only designed the mobile view of the digital shopping list, because we figured not many would have their laptops out by the campfire.
Visual Design
Our color palette was inspired by camp gear, nature, and the joy and excitement of spending a weekend with people you love outdoors.
For typography, we stuck with open source options. Dauphine, “inspired by characters found on cartography from XIX until middle XX,” reminded us of vintage maps and wayfinding. Jost* is a typeface inspired by Paul Renner’s Futura, designed to be as functional as possible in the digital era. We chose it because it is friendly, light-hearted and highly legible.
We included many of the original illustrations throughout, especially for the food, because food can be difficult to photograph and we wanted to maintain the original spirit of the simple joys of cooking outdoors. We created our own icon set for the recipe categories to simplify and differentiate these from the recipes themselves.
Challenges & Future Versions
The primary challenge was completing this project within a short amount of time, because each project of the course was allotted one week. There are many features we’d want think through and involve in future iterations of this design, such as:
- How the onboarding flow would look when a user creates an account, and adds people to the shared account
- The option to create “Trips” that would have their own unique shared recipes and shopping lists, so you could use the app for more than one camping trip
- Letting users add their own favorite recipes
- The ability to take a picture of receipts that would automatically detect dollar amounts. You’d be able to add number of people to split costs with, and send a Venmo/Apple Pay request or something similar (rather than use another app like Splitwise)
- After the feature to add your own recipes was built, sharing Trips, recipes and shopping lists could be between any user, not just the groups you created on your shared account! The idea would be to encourage a community around camp meal planning and recipe sharing
View our Figma prototype for the desktop version or mobile version here!
