top of page

The flying fruit cafe

Graphic Design | Prototype | Wireframe
Video

What

did I do?

Redesigned the Order-Sheet for The Choice Program be used at The Flying Fruit Cafe, Baltimore.

 

& 

Developed Interactive App Prototype as an alternative to paper order-sheet for future implementation. 

 

 

Why

did I do?

Existing order-sheet was cluttered & confusing for baristas as well as customers. The client wanted it simple, intuitive and efficient for the customer to fill and baristas to understand it.

Specs

about project.

By

 

For

 

During

 

Using

 

Skills

​

 

 Individual

 

The Choice Program | UMBC

 

 Aug '16 - Oct '16

 

 Adobe Illustrator 

 

 Graphic Design, Prototype,   Wireframe.

W3
Process

HOW

Problem Description

This Graphic Design project was a part of course HCC - 710 : Graphic Design for Interactive Systems. This was a semester-long project for The Flying Fruit Café, University of Baltimore in partnership with The Choice Program. Main objective was to redesign the Order-Sheet for the café and come up with an Interactive Version for the Order-Sheet which would eventually be installed on Order-Kiosk at Café. This project basically puts in all the graphic design illustration done for the UMBC The Choice Program-Flying Fruit Kiosk. This project was mentored by Dr. Amy Hurst 

 

Map-Exploration Theme was used to present a printed portfolio for the project. Portfolio unfolds from a square piece to full-size map revealing whole design process sequentially. Graphic Design was done in Adobe Illustrator and the Prototype was created on MarvelApp.

 

Tasks:

 

  • Understand aspects of Typography & Graphic Design.

  • Gather Requirements.

  • Re-Design Order-Sheet, Napkin Holders & Coffee Air-pot Covers.

  • Present whole process in Printed Portfolio to the client.

Process

Bottom of Page

Outcomes

Learning Graphic Design Basics:

 

  • Understood aspects of Typography & Graphic Design.

  • Hands-on: Key forms, Grid, Spacing, Abstract Design and Typography.

 
Requirements Gathering:

 

  • On-site observation - First-hand client site observation.

  • Informal User Interview -  Problem faced, improvements needed, understanding the order process.

 
Wire Frames and Prototypes creation:
 

  • Created wireframes - Portrait mode & Landscape mode.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Iteration -  based on user feedback, revisited the design in 3 iterations.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 
 
Interactive Prototyping:
 

  • Using MarvelApp - created an interactive prototype for portrait-mode using finalized wire-frame design.

 

 

 

 

 
Finalizing Print Portfolio:
 

  • The portfolio unfolds from a square piece to full-size map unveiling whole design process, sequentially. The design was set on a huge poster, front and back. The folded version would start from a single cover page with title and the second one would be content-page, sequentially unveiling the whole portfolio in exploration-map fashion. Here I have unveiled the front and back design of the poster.

 

 

v 0.0 | Existing Order Sheet

v 0.0 | Existing Order Sheet

This Breakfast Ordering sheet was being used at cafe by customers.

v 1.0 | First Design

v 1.0 | First Design

First Design with graphics and basic idea. Landscape Layout.

v 2.0 | Landscape

v 2.0 | Landscape

Improvements after first iteration based on feedback. Using Column Grid.

v 2.0 | Portrait

v 2.0 | Portrait

Improved design wire-framed in portrait mode for better flow of selection.

v.3.0 | Final Landscape

v.3.0 | Final Landscape

This was finalized design in Landscape layout.

v 3.0 | Final Portrait

v 3.0 | Final Portrait

This is finalized design of Order Sheet in Portrait Layout.

v.1 Feedback 2

v.1 Feedback 2

v.1 Feedback 1

v.1 Feedback 1

v 3.0 Feedback - Existing Design

v 3.0 Feedback - Existing Design

v 3.0 Feedback - Column Grid

v 3.0 Feedback - Column Grid

v 3.0 Feedback - Manuscript Grid

v 3.0 Feedback - Manuscript Grid

Learnings
​

  • Learned Visual Communication Principles- Sketching, Typography, Color, Grids, Layouts, Image Manipulation, Visual Language 

  • Learned Adobe Suite tools- Photoshop, Illustrator.

  • Learned iterative design process, Design Critiquing methods (The Hamburger Method)

 

Challenges
​

  • Requirements gathering and accordingly defining the Visual Language for the Order Sheet, Napkin Holders & Air-pots. 

  • Detailed creation of the Style Guide - Layout, Typography, Color Scheme, Image-Text ratio 

  • Idea Generation- From sketching to Mock-up to Final Designs.

bottom of page