top of page

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.

W3
Process

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.

Bottom of Page
bottom of page