Roll With It

Branding and UX/UI

Roll With It is a fit, funky, fruit roll & smoothie joint located along the Schuylkill River Trail in Manayunk, Philadelphia. We value clean, locally sourced ingredients at manageable costs for all members of the community to enjoy. We work alongside Riverwards Produce to keep our shelves stocked with high quality ingredients.

THE PROBLEM

I find myself searching for quick in-and-out food services where I can stop by, grab some food and get on with my day without feeling sick or regretful. My intolerance to a foods has opened my eyes to the lack of alternatives to heavy, non-vegan food options. On the occasion I find a quick, healthy food service, prices are steep. For example, you can get a Wendy’s 4 for $4 (sandwich, nuggets, fries, and drink), or a smoothie bowl for 3 times that amount.

RESEARCH

Fast food is cheap, quick, convenient, and readily available. More than 1/3 of Americans eat fast food on any given day despite its impacts on health and obesity. Researchers found healthier diet patterns (fruits, nuts, vegetables and fish) cost significantly more than unhealthy diets (processed foods, meats and refined grains).

“On average, a day’s worth of the healthiest diet patterns cost about $1.50 more per day than the least healthy ones.”

“Over the course of a year, $1.50/day more for eating healthy alternatives increases food cost for ONE person by about $550 per year.”

I shifted my attention to grocery stores and fresh produce costs. In typical grocery stores, unhealthy food is cheap and produce is expensive. Being a consumer at Riverwards Produce, I knew there were exceptions to that statement. They have a unique way of crafting their business where they source local products at affordable costs. More produce is purchased by consumers and less waste is created.

Purchasing from a vendor who sells farm-to-table produce at accessible prices means better rates for not only businesses, but customers as well.

User Persona

I drafted two general consumers that would visit the shop to help me better understand my audience. This sent me in the right direction for branding and refining my mission statement.

• Jennifer Jones is a nutritionist with dietary restrictions. She is in search of healthy, cost efficient food alternatives to grab quickly on her lunch breaks.
• Sam Utley is a middle aged mother of three. When she isn’t working, she likes to spend time with her kids experiencing new activities or visiting unique restaurants around Philadelphia.

BRANDING

Thumbnails & Logo Development

My first series of sketches were for the name Alter Ego. Since traditional spring rolls consist of savory ingredients, the alter ego to savory would be sweet. The name process continued through preliminary sketches and led me to my final restaurant name: Roll With It.

My thought process:

1. Specialty food: Fruit rolls
2. People bike on the Sckyulkill River Trail
3. Bike wheels roll
4. Spokes on a bike resemble a citrus fruit
5. Back to bullet 1: Our specialty food is fruit rolls (including citrus)

Final Logo

I experimented with various directions for my logo. I began with a tighter icon and loose type. I considered using other round fruits as the wheels on the bike. From there I moved onto a loose, hand-drawn brush style for the bike icon itself. After trying different fruits as the wheels on the bike, I decided the citrus was the most clever and visually appealing.

Style and Mood

I wanted to create a brand that was vibrant and out of the ordinary. Fruit is colorful, juicy, and sweet; the perfect attributes for this brand. I wanted my customers to know what they are about to encounter before eating. I mapped out a board of brands, styles, and illustrations that summed up my vision.

Color/Brand/Illustration Inspiration

Style Tile

Creating a style tile helped me map out prevailing themes in my brand. Inspired by fruit, I connected taste to visuals which explains the saturated, expressive color palette. I illustrated fruits in my sketchbook using a brush pen and scanned them in the computer to create vector icons. I wanted the illustrations to feel loose and hand drawn. I was searching for a font with a thick weight and personality when I discovered Piepie. I liked how it was strong enough to evoke an emotional response from my audience. I paired it with Avenir because it has nice legibility on web and mobile interfaces without competing with my more aggressive headers.

Final Deliverables

Store Sign

Back Entrance Mural

Employee Uniforms

Tote Bags & Reusable Cups

Stickers

UX/UI: MOBILE APP

Function

The Roll With It mobile app is for ordering food and saving your preferences as a customer. Whether you want takeout or delivery, you can plan to have your food ready by the time you get there. Location markers make it easy to add your location on the Schyulkill River Trail for a better estimated pickup time.

User Flow

I often spend more time on food ordering apps than necessary, especially when building an order, and I wanted to simplify the ordering process. Creating wireframes helped me understand what was working in terms of flow and what was not.

In apps like Doordash and Uber eats, there are what feel to be infinite lists of words to choose from when ordering create your own meals. This makes it difficult to easily find food/ingredients I have already selected. I wanted to be able to easily see what was being added to my meal without spending an excess amount of time.

For the CYO section, I had ideas of displaying a fixed illustration of a roll at the top (or bottom) of the page. As the user adds what they want to the roll, the illustration fills with selected ingredients. A fixed illustration provides an immediate knowledge of what is chosen while the user fills their rolls and smoothies.

Wireframes

My first series of drafts consisted of a flow where I let the user choose one thing or another on each screen. Offering two options per screen like smoothies vs rolls was a fun way to incorporate illustration and show the user they had to make a decision. I realized this made it difficult to access specific screens at any given time, making the flow choppy. Another problem I ran into with this idea was buttons did not feel clickable with bleeding illustrations.

Wireframe Thumbnails

Final Wireframes

Final App Design

Bringing my vibrant colors into the mobile app with a more simple interface was my final solution. With the fixed carousel scroll at the top of the page, it makes usability clear and prominent to the user on how to navigate to the destination they are searching for. As the user scrolls, categories in the navigation bold as sections change. Fruit rolls are pre-determined but when the user decides on a roll, they can modify the ingredients.

Mobile Application

CONCLUSIONS

A wise woman said, “Design is never finished, it’s just due…”

I am in the process of continuing development of my mobile app and drafting website designs. I ultimately want my app to feel and function like a download from the App Store. I see this concept being a legitimate restaurant in a city where people are active and searching for new experiences. I personally love trying new things and I believe good design stems from memorable experience.

CREDITS

Design: Lexi Birzes
Art Direction: Bryan Satalino
Categories: Brand Identity, UX/UI,
Time: Fall 2021
School: Graphic & Interactive Design, Tyler School of Art & Architecture Temple University