make fun stuff / make stuff fun.
THUMB.png

The Bunny Mellon Healing Garden

An interactive experience allows kids and guests to design their own garden and explore the histories of the First Ladies

The Bunny Mellon Healing Garden

Children’s National Medical Center will be opening a new The Bunny Mellon Healing Garden space on the roof of the hospital. As part of this initiative, they would like to develop an interactive station just inside from the garden and a website (same functionality). The interactive station is required to present information on the first ladies, the hospital, and the new garden.

THUMB.png

Studio
Unified Field
Client
Children's National Medical Center

Role
Interaction Design
Visual Design
Animation

Development Cycle
2 Months
Development Tool/Platform
HTML5

 

Initial information hierarchy & Understanding the flow

skeleton.png
wireframeCN.png
 
Direction.png
 

Visual Direction and Mood Board

Audiences of this experience are mostly kids and invited visitors, the visual direction needs to be kids friendly as well as elegant. I picked fonts and colors from children's national medicare center's branding package and modified them to better fit digital platforms. I also made a mood board as a way to communicate with the client to understand the interface visual direction.

 
 

Children's National and Timeline

- Scrollable and color-coded timeline to show all events/categories
- Expandable panel for each event
- Maintainable menu and content
- Followed ADA compliance (Interactive under 1/3 screen, contrast test)

cn-1.png
 
cn-2.png
 

Meet First Ladies

- Clean and elegant layout
- Each first lady has own galleries and a brief bio
- Maintainable menu and content
- Followed ADA compliance (Interactive under 1/3 screen, contrast test)

 

Designing "Design your Garden"

- Include an illustrative garden feature section to introduce features of The Bunny Mellon Healing Garden
- Include a built-in garden design game to allow users to design their own garden
- 3 maps, 5 categories, and 20 animated garden elements for designing a garden
- Users' garden can be saved and shared with other people
- Followed ADA compliance (Interactive under 1/3 screen, enough visual contrast )

garden1.jpg
cn-4.png
cn9.png