UI Designer, UX Designer, User Researcher
Figma, Miro, Photoshop, Illustrator
Wireframing, Prototyping, Sketching, Affinity Mapping, User Flows, User Personas
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.
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.
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.
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...
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.
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.
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.
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.
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.
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.
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.
While creating the style guide, I made sure to keep in mind the accessibility guidelines. Is it: Perceivable, Operable, Understandable and robust?
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.
After making the suggested changes, the second round of usability testing solidified the ease of use throughout the website.