top of page

04 Ping pong

p5.js | CSS | HTML


An Interactive Ping Pong game design using p5 JavaScript .

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


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.














The Choice Program | UMBC


 Aug '16 - Oct '16


 Brackets, p5.js 


 Graphic Design, Prototype,   Wireframe.



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.


  • 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.


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.


  • 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)


  • 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
bottom of page