top of page

Garden Poster Pro

A new secret garden has opened up at D12 (Home of Design & Technology at Parsons). Collaborate with your partner to design a poster to welcome, explore or donate. 🌼 

Tools Used: Figma, Adobe Illustrator, Unity, C#   ·   Platform: Mobile & Tablet

Garden Poster Pro is an immersive tablet experience for two users, featuring a numerical dial pad and a graphical editor. Users input numbers on the dial-pad to collaboratively manipulate elements in the editor, creating a shared, creative poster.

Don Norman's Principles of Interaction Design

The design challenge was to pick collaborative technologies while noting their design qualities in line with Don Norman's Interaction Design principles.

 

Here are my selections:

Figma's Collaboration Features

  1. Affordances: Figma's collaborative features enable simultaneous, shared design work.

  2. Signifiers: User avatars and real-time cursors indicate collaborators' presence and actions.

  3. Feedback: Real-time updates and visual cues inform users about collaborators' activities.

  4. Mapping: Figma's interface supports intuitive, real-time collaboration on design projects.

Landline Telephone

  1. Affordances: Physical buttons indicate the action of pressing for dialing.

  2. Signifiers: Numbers and symbols on buttons show their functions.

  3. Feedback: Audible tones confirm button presses and ringing sounds indicate call status.

  4. Mapping: Buttons follow a numerical order for easy association with their functions.

Interaction Modal

In brainstorming, I aimed to create a playful experience that teaches collaboration.

This experience would serve as a metaphor to teach users about collaboration and communicate the message that designers often have differing viewpoints when creating something together.

Story Board

Inspired by Figma and Telephone design elements, I developed a concept, which I'm illustrating in the storyboard below:

In the initial concept, as shown in the storyboard above, I designed two screens with a numerical dial pad and a shared editor. Users can interact with buttons and graphics on the editor and then finalize the design.

Making the first prototype

To create the prototype, I sketched a basic layout in Figma. I added four labels near the dial pad for "Heading," "Illustration," "Graphic," and "Body," giving both users three options for each category.