Spork in the Road

Case Study

Website preview

Role

UI Designer, UX Designer, User Researcher

Tools

Figma, Miro, Photoshop, Illustrator

Methods

Wireframing, Prototyping, Sketching, Affinity Mapping, User Flows, User Personas

Overview

Spork in the Road is a website dedicated to backpackers and campers to help them plan meals for their adventures. I chose this as a topic since I found myself spending so much time planning for backpacking and worried if I was prepared enough. So I set out to discover if other people are having similar issues as well and how I can create a better planning experience.

View Prototype

Problem Statement

Meal planning can be overwhelming, resources scattered in too many different places, information difficult to distill and it is tough to find the appropriate recipes and gear for each individual's needs. Every trip is different so this isn’t a one time experience.

Desktop and Mobile Image

Goal

To create a product that helps backpackers confidently plan meals and find all the information they need that involves camp cooking all in ONE PLACE.

starting the hike

I conducted primary and secondary research to gain insights into what specific things backpackers need and want. I began with a competitive analysis study to learn what features are common in similar products. I noted what features I felt were strongest and where Spork in the Road could be different. Next I identified and interviewed 5 potential users and had a conversation about their backpack planning experiences and this is what I discovered...

Affinity Map

so What's most Important to backpackers?

  • Sense of Accomplishment
  • Community Influence
  • Learning from others
  • Type of planning methods
  • Taste is important
  • Good meal = better experience

time to Think like the user

Backpackers can be divided into two categories: lightweight and heavyweight and the website needs to consider both of their needs. These personas were built around the two types and would help determine design decision.

Laying it all out

I began developing the website by creating the decision flow for a user of the website. Below I create the Red Routes for the MVP Routes that were formed during the User Stories session.

sketching and testing

Next is to start designing the website. This began with sketching out the features and pages of the website. These sketches were built into a prototype and virtually guerilla test with 5 users. This was helpful in my early design process since I could gain insights as to what is working and what is not and I can quickly and easily revise and redesign. The most complicated and important feature of the website is the Meal Planning Tool and the wireframes helped figure out what information is needed on the page and how it would be used. 

MVP: create a backpacking meal plan

Findings

Based on feedback I received during guerilla testing, people felt overwhelmed by the amount of text on screen and didn’t like the tutorial. They said that it was clear how to use the tool without a tutorial. They felt that seeing a tutorial meant that it would be a huge and difficult process when in reality it isn’t. The high-fidelity wireframe also now takes into account edge casing, for example if someone wants a longer trip, how do I show that? Also included specifics in how the website offers can help users if they are confused in the process, they can browse user submitted meal plans and see a tutorial through a link if they choose. 

How did I address these concerns?

I can limit the amount of words on screen by having the day’s be only shown once a user selects “build.” They are then guided through the process and don’t need the help of a tutorial model. To account for someone wanting to plan for a long trip, I now am automatically sorting the days by week and each week can be selected by a drop down bar. 

Putting it all together

It was important to layout all the screens to make sure the website was all connected. I wanted users to be able to access different areas of the website easily to help them easily plan their trips.

The viewpoint

I selected the color palettes and design style to feel modern and fun. I drew custom illustrations to make the website feel relatable and look like drawings out of a campers sketchbook.

Accessibility check

While creating the style guide, I made sure to keep in mind the accessibility guidelines. Is it: Perceivable, Operable, Understandable and robust?

Usability Testing

I tested the working prototype with 5 users who ranged from a few years experience in backpacking and others had decades of experience. Based on the feedback I was given, I redesigned and tested with a new group of participants. Through this testing I was hoping to make sure that the website was easy to use and made the user feel confident about planning their trip. I was testing to find out how participants navigated the website to make sure that the process felt simple and easy. I wanted to make sure my main function, the meal plan grid, was easy to use and clear.

MVP Route: Search for new and delicious recipes
Positives
  • Look is fun and fresh
  • Easy to navigate
  • Impressed by tool and felt like it was built well for its use
  • Enjoyed suggested recipes a lot
  • Appreciated the Personal Notes Section
  • Liked the Servings Yield option
Negatives
  • Some information was not clear, specifically headings
  • Recipe page felt crowded
  • Users wanted more recipe information
Recommendations
  • Re-word the headers
  • Include nutritional value and weight in recipe
  • Add more space
MVP Route: Build a custom Meal Plan
Positives
  • Easy to navigate
  • Liked how customizable the tool is
  • Enjoyed being able to select from Saved Recipes
Negatives
  • Titles for the "Build your Trip" are not clear
  • Unclear why the header is called "Build your Trip" when the user is in the "Meal Plan" tab
  • Couldn't easily see Save button
  • Meal Plan tool doesn't customize certain features
Recommendations
  • Change "How Many Days" to "How Many Nights"
  • Change "How Many Meals" to "Select Meals"
  • Add buttons for users to download lists and add nutritional and weight facts
  • Move and enhance Save button
  • Add space
Second Round of Usability Testing

After making the suggested changes, the second round of usability testing solidified the ease of use throughout the website.

First Prototype
Revised Prototype
What I changed
  • Changed the wording which simplified the Build Plan feature.
  • Included the new features requested by the users to make sure the tool has everything a user needs to feel confident in their meal plan.
First Prototype
Revised Prototype
What I changed
  • Changed the wording to make sure the sections were clear.
  • Spaced out the information so the user would feel less overwhelmed.
  • Included nutritional facts
  • Selected new icons to increase usability
  • Add user photos and account to make prototype look more real
Clickable Prototype
at The fork in the road
Having so many participants who want more collaboration, I would go back and add a rating system as well as a “Share and Edit with others” so people can plan together. Backpacking has a strong community and revolves around sharing meals and plans so the website should take that into consideration. 

If I were to continue forward I would develop a mobile companion app.

Conclusion
What I learned throughout the process is how to simply create a way to plan meals that is not overwhelming for a user. It was interesting to learn the different methods of planning for a trip and the difficulty in accommodating all the needs for a variety of people. It was surprising to find out how important specific terms are in the backpacking community. Recipes for meal planning have different needs than the average online recipe and the design must reflect the importance of these niche recipes. The success of the website is from the ease of use. Where to go from here would be in the backend development of the site. How would the tool actually work, how does the website compile and sort the Shopping List. Many users also expressed a community meal plan and more interaction with their friends. This is a feature to explore to create a more communal feel to the website. 

More projects