logo

My process

OVERVIEW

City of Hope is a not-for-profit clinical research center and hospital known for its achievements in treating cancer patients. COH came to us to help define and develop the experience for their on-campus visitor center and complimentary online experience that will enable access for all.

OUR GOALS

Our high-level goals were to:

  1. Provide a quiet place where patients, families, and professionals can meet, reflect and meditate.
  2. Create a sense of a worldwide community and foster hope.

MY ROLE

I worked on the information architecture, experience design, navigation system and set the visual design direction for all experience components (see components below). I collaborated with two other designers and worked closely with an agile development team throughout the preliminary testing, implementation, and launch.

My process included:

  • Experience Strategy
  • Content strategy
  • Setting up the metaphor
  • Concept design
  • User Journeys
  • Sketching solutions and wireframing
  • Interaction Design
  • Production

THE CHALLENGE

  1. Creating a holistic user-journey across all platform and touchpoints.
  2. Reflect the City of Hope DNA in the experience.

EXPERIENCE COMPONENTS

Exploration touch walls (x3) that cover the exterior of a hollow sculptural, organic structure.

Diffused LED mesh that stitches the three touch walls together. Visual elements float from one touch wall screen to another through the mesh, providing a sense of direction in the space.

Digital Wishing Tree is projected on the inside of the structure and lives online. Inspired by a Japanese tradition (Tanabata), each user-generated wish becomes an origami leaf.

Mobile text integration enables posting a wish when onsite. Users then get to see their wish projected in front of the tree and then added to its foliage.

A micro-website enables posting wishes from all over the world. Users can log in to their social accounts, choose the color of the leaf, and expand existing wishes generated by others.

DEVELOPING THE

Experience strategy

I planned and led a client-facing workshop where we confirmed our goals, experience value proposition, and key takeaways. We identified target audiences, developed personas and workshopped a complete user journey across various touchpoints.

KICK OFF

Content workshop

The full team (contend devs, UX, tech, PM) participated in a card-sorting exercise. I worked on synthesizing our takeaways and designed content models diagrams, story flows, and sitemaps.

The main takeaways from the workshop were:

  1. We identified the experience content pillars–Legacy, Community, and Healing & Innovation.
  2. We crafted the primary content block–the story node–from a two-page sample we got from a client. A story node could be a story of a patient, caregiver, researcher, facility, as well as a medical condition, treatment type or historical fact.
  3. We realized that the story nodes are all intertwined and that no story can be told separately from other.

To summarize, we saw that the collaborative innovative and caring nature of COH immersed from this exercise.

Impact on the information architecture and navigation system:

  1. Each pillar became the entry point to content exploration on each of the three touch walls.
  2. Individual story nodes could then be grouped to form content clusters, based on themes.
  3. A set of thematic filters established the relationship between every two story-nodes in the CMS. Each story node selection pulls up related story nodes grouped in a molecule-shaped menu. With the branching out of recommended content, the browsing experience turned out flowy and organic.
  4. We started to work through the logic behind Search capabilities.
SETTING UP

The Metaphor

I helped shape the metaphor for each component of the project ecosystem. These metaphors were a guiding principle all throughout the process and shaped the navigation system, information architecture, behavior (motion) and interface design and the general look & feel. 

  • Touch walls interfaces: Blood plasma.
  • The different content components: Blood cells.
  • Diffused LED mesh: Connective tissue.
  • Digital Wishing Tree: Represents a real tree just outside of the building.
MAPPING OUT

User Journeys

I mapped the experience for the onsite and online visitors, converging the physical and online worlds into one holistic experience across various touchpoints.

WARMING UP

Early sketches and wireframes

I worked on sketching different layout solutions, followed by initial wireframes for entire app flows from entry to exit.

OUT OF THE BOX

Initial layout studies

I translated the sitemaps and connection types into circular diagrams that inspired some interesting directions for layouts.

STEP 7

High-fidelity layout studies

PRODUCTION

Support in implementation

Prototypes: I helped build paper and clickable prototypes, and worked closely with developers on software iterations, defining the behavior (motion) of all components as we go.

User testing: I have conducted user testing (using various methods), tracked issues and created the client-facing summary reports.

Feature sets: I worked on detailed feature sets and helped translate them into technical documents.

Sprint planning in JIRA: I was part of sprint planning sessions and assisted with writing user stories in JIRA.

LAUNCH

Final design

Gallagher & Associates Exhibit Design and Media Belzberg Architects Developer Stimulant Photography Weldon Brewster
Gallagher & Associates Exhibit Design and Media Belzberg Architects Developer Stimulant Photography Weldon Brewster

CREDITS

Architect:
Belzberg Architects
Exhibit Design and Media:
Gallagher & Associates
Software Development:
Stimulant
Photography:
Weldon Brewster

ROLE

UX/UI Designer, Art Director

STUDIO

Gallagher & Associates

CATEGORY

DELIVERABLES

– User Journey
– Content Analysis and Strategy
– Information Architecture
– Wireframes & Annotations
– User stories & Feature sets
– Rapid Prototyping
– Software prototyping
– User testing, Q/A
– Launch support