Kreation Organic

Kreation Organic is a cafe and juicery based here in Los Angeles. I worked with them to design a native iOS app that would accompany their in-store experience.

They faced a unique business problem: how can we direct customers toward the "grab and go" containers while also educating them on the product?

Kreation wanted to explore putting their menu into an app to try and alleviate this problem.

ROLES

UI/UX, Branding

TOOLS

Sketch, Adobe, InVision, Zeplin, Paper & Pen

DELIVERABLES

Mobile Mockups

INTRODUCTION

Getting to know the project.

Project Brief

  • Design an MVP app that allows customers to search for their favorite juices and items in the store's "grab-and-go" containers.
  • While the initial app will be basic, it should have the ability to scale to include more robust features, such as mobile ordering.
  • Main Problems to Address

  • How can I incorporate a fresh and youthful style, while maintaining their brand voice?
  • While a customer decides which juice to purchase,what features are they looking for first?
  • Home Screen

    USER PERSONA

    Meet James, the core Kreation user.

    About

  • Primary User / 31 yrs / Venice, CA
  • Project manager at a Santa Monica startup.
  • In his free time, enjoys biking, surfing, and going to the gym at Equinox and SoulCycle.
  • Takes personal time to educate himself on fitness and nutrition.
  • Motivations

  • Read different ingredients and health effects for each juice before entering the store.
  • Have a quick, visual reference for the ingredients and health effects for each juice.
  • See allergy and dietary restriction information for each food item.
  • Frustrations

  • James doesn't want to waste time in the store reading all of the ingredients - since he's busty, he's always looking to save a few minutes.
  • Food delivery apps like Postmates oftent have a minimum order amount for free delivery, which means James is less likely to have a juice delivered.
  • Devices

  • James uses an iPhone X when he's on the go, but may use his tablet or laptop when he's at home.
  • USER STORIES

    Prioritizing key user tasks.

    As a new user I want to:

  • create an account using my email address.
  • see small prompts that show me how to use the app while I'm experiencing it for the first time.
  • see the store menu immediately without having to sign in or create an account.
  • As a returning/regular user I want to:

  • see my saved juices and food items.
  • sign into my account using email.
  • search for juices by name.
  • filter juices by health effects and allergies.
  • subscribe to the company newsletter.
  • SKETCHES

    Testing with Paper Prototypes

    Getting Ideas onto Paper

  • Paper prototypes are a great way to throw away design ideas early in the product design cycle.
  • I took these prototypes and sat down with 3 different users to get their feedback on the design thus far.
  • Based on these sessions, I learned what users are looking for when they go to a juice app - they really want to know ingredients and health effects.
  • Juice Detail 1

    Juice Detail 2

    WIREFRAMES

    Lo-fi Design to Validate Ideas

    Wireframe Overview

  • From paper prototypes I moved into wireframes, and did another quick round of testing once I was finished with these.
  • The goal for the wireframes was to figure out the grid structure I would be using and how many images would be contained in a row.
  • I took advantage of the slide functionality on the iPhone X with the slide-up detail card.
  • Home Screen

    Juice Detail 1

    Juice Detail 2

    BRANDING

    Bringing the Wireframes to Life

    Moodboard

  • A functional moodboard should show stakeholders how the app will feel before it is actually designed - this allows for feedback at an early stage.
  • This board includes color palettes and pieces of app inspiration from Dribbble - these layouts informed the final visual design.
  • A moodboard should also show a few key brand attributes - what is the voice and tone of this brand?
  • Moodboard

    VISUAL DESIGN

    An Initial Round of High-Fidelity Mockups

    Phase 1 Visual Design

  • This round of design was intended to fit with Kreation's current brand style.
  • I wanted to design to be playful and sophisticated at the same time, which I felt was a reflection of the brand. This is shown in the green pops of color and the icons on the sign up screen.
  • One design challenge I ran into was how to show every ingredient in a visual way - ultimately this would mean creating custom icons for each fruit, vegetable, spice, and herb.
  • Sign In

    Home Screen

    Juice Detail

    SELECTED SCREENS

    The Next Round of Visual Design

    Sign Up / Sign In

  • The color palette switched from greens to blues and pinks - a more modern and friendly approach.
  • Abstract illustrations bring visual interest to the sign up screen without screaming "Juice app!"
  • Users are able to sign in with existing credentials or create a new account.
  • Sign Up / Sign In

    Home Screen

  • Users can see store news and updates at the top, such as new drinks or grand openings.
  • Ultimately a "Find Nearest Kreation" functionality will be designed into the app.
  • This is a returning user example, so this user can see their most recent items.
  • Home Screen

    Home Screen Detail

  • Users can see other cold-pressed juices and food items by scrolling down the home page.
  • They have to option to sign up for the Kreation newsletter as well.
  • For this round of design, I increased the size of the juice cards in order to make this more clickable and visible.
  • Home Screen Detail

    CONCLUSION

    Reflecting on the Project

    What Did I Learn?

  • Paper prototypes may seem archaic, but it was a great way to validate my early design ideas.
  • It's helpful to communicate with your developer at an early stage to make sure that all of your design ideas are possible.
  • I looked at a few different food apps, such as Starbucks, to see how they handle spacing and visual design.
  • What are the Next Steps?

  • Bring new visual design to the existing screens in the app: drink detail, food detail.
  • Work alongside developer to bring the visual design to life.
  • Complete another round of user testing based on the latest designs.
  • Deisgn functionality for finding store locations and placing orders.
  • Return Home

    Point

    UI/UX