04 Ping pong

p5.js | CSS | HTML

What

An Interactive Ping Pong game design using p5 JavaScript .



Developed Interactive App Prototype as an alternative of paper oder-sheet for future implementation. 

Why

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

Specs

By

 

For

 

During

 

Using

 

Skills

 

 Individual

 

The Choice Program | UMBC

 

 Aug '16 - Oct '16

 

 Brackets, p5.js 

 

 Graphic Design, Prototype,   Wireframe.

 
 

HOW

Problem Description

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

 

Final out come of whole design process was supposed to be presented in a printed portfolio for which I chose Map-Exploration Theme. Portfolio unfolds from a square piece to full size map revealing whole design process sequentially. Graphic Design was done on Adobe Illustrator and Prototype was created on MarvelApp.

Tasks:

  • Understanding aspects of Typography & Graphic Design.

  • Requirements Gathering.

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

  • Presenting whole process in Printed Portfolio to client.

Process

Learning Graphic Design Basics:

  • Understanding 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:
  • Created wire frames - Portrait mode & Landscape mode

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

Interactive Prototypes:
  • using MarvelApp - created prototype on landscape mode using finalized wire-frame.

Outcomes

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.