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

Affordances: Figma's collaborative features enable simultaneous, shared design work.
Signifiers: User avatars and real-time cursors indicate collaborators' presence and actions.
Feedback: Real-time updates and visual cues inform users about collaborators' activities.
Mapping: Figma's interface supports intuitive, real-time collaboration on design projects.

Landline Telephone

Affordances: Physical buttons indicate the action of pressing for dialing.
Signifiers: Numbers and symbols on buttons show their functions.
Feedback: Audible tones confirm button presses and ringing sounds indicate call status.
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.

User 1 and User 2 had different headings, resulting in six options, but only one could be chosen for the final screen.

Color-coding elements in green and blue represented the distinct selections for User 1 and User 2.

Coding

The next step was coding the prototype. I deconstructed elements from the Figma sketch, exporting over 70 components into Unity.

Each button had multiple functions. For example, User 1's Numpad 1 showed Heading 1 while hiding the other five headings when pressed. This process was time-consuming and laborious but resulted in a successful prototype meeting its goals.

Prototype 1: Greybox

The screen recording provided below showcases the functioning Greybox Prototype, offering a glimpse into the intricate workings of the concept.

Using the same example, User 1 and User 2 have different headings, resulting in six options, but only one can be chosen for the final screen.

If User 1 picks Graphic 8, it's displayed. However, if User 2 selects Graphic 7, it replaces User 1's Graphic 8, illustrating the dynamic collaboration in the design process.

User testing

The recording provided below showcases the user testing of the Greybox Prototype:

What worked 🏁

Buttons were immediately recognizable.
The code functioned as expected.
Users quickly grasped the rules and the overall intent of the interaction.

Insights 📝

Users tried to move the poster elements in the editor by tapping, which was not intended.
Users appeared to lose interest easily, possibly due to the absence of graphics.

Designing the posters

After interface testing, I proceeded to craft high-fidelity mockups, starting with the posters users would create.

To construct the posters, I developed six variations for each design element (graphics, typography, taglines, and textures), ensuring they adhered to the same theme for compatibility.

Once the design was finalized, I broke down and exported each element separately for integration into the Unity code.

Designing the user interface

In the second phase of high-fidelity design, I created the user interface, drawing inspiration from vintage desktop interfaces. The dialpad buttons were made circular and shiny, resembling a telephone keypad.

I added the rules, provided a title, and experimented with color schemes to enhance focus on the poster and dial pad. I conducted heatmap testing to refine the visual hierarchy and color choices.

After exporting the design elements, I replaced the initial elements from the grey box prototype, eliminating the need for manually adding algorithms to each design element once more.

Adding motion design

To address the issue of user disinterest in the initial prototype, I enhanced the design by incorporating animations into various elements.

These animations were implemented through scripting, such as continuous rotation or scaling of specific elements, aiming to engage users in exploring the design elements.

User Testing 2

After integrating the high-fidelity design after coding into the application, I conducted a new testing session to assess user response to this significantly different interface:

What worked 🏁

Buttons were instantly recognizable.
Users were impressed with the user interface.
The overall intent was clear.

Insights 📝

Users had difficulty understanding the rules due to the absence of labels on the numbers.
Users still tried to move the poster elements in the editor by tapping, which wasn't intended.

Final changes

Following the last round of user testing, I reestablished labels on the dial pad to eliminate confusion for users.

Additionally, to address the issue of users interacting with the elements in the editor, I implemented a shake effect and an error sound through scripting. This provided feedback to convey that the editor was not meant to be touched.