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 high-level goals were to:
- Provide a quiet place where patients, families, and professionals can meet, reflect and meditate.
- Create a sense of a worldwide community and foster hope.
As a hands-on creative lead, I worked on the experience strategy and design, information architecture, navigation system, CMS, and set the visual design direction for all experience components (see components below). I regularly interfaced with the COH client and had them fully immersed in the design process, to show how each experience component works in conjunction with their overall goals.
I collaborated with a team of PMs, designers, AV integrators and engineers throughout the preliminary testing, implementation, and launch.
I worked closely with engineers in translating of the designs into technical docs, was part of sprint planning sessions, QA process, and post-launch support.
My process included:
- Experience Strategy
- Content strategy
- Setting up the metaphor
- Concept design
- User Journeys
- Sketching solutions and wireframing
- Interaction Design
- Creating a holistic user-journey across all platform and touchpoints.
- Reflecting the City of Hope DNA in the experience.
Exploration touch walls (x3) that cover the exterior of a hollow sculptural, organic structure.
A 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.
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:
- We identified the experience content pillars–Legacy, Community, and Healing & Innovation.
- 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.
- We realized that the story nodes are all intertwined and that no story can be told separately from others.
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:
- Each pillar became the entry point to content exploration on each of the three touch walls.
- Individual story nodes could then be grouped to form content clusters, based on themes.
- 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.
- 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.
Early sketches and wires
I worked on sketching different layout solutions, followed by initial wireframes for entire app flows from entry to exit.
Initial layout studies
I translated the sitemaps and connection types into circular diagrams that inspired some interesting directions for layouts.
High-fidelity layout studies
Design validation, prototypes & design iterations
Prototypes: I helped build low-fidelity (paper, clickable InVision prototypes), and worked closely with developers on software iterations, defining the behavior (physics, 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.
Iterations: I processed issues, prioritized, negotiated, and implemented findings from each round of user testing into a new design iteration.
Production and support in implementation
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.
QA: I’ve supported the testing efforts across multiple devices and browsers.
Final design and launch
Architect: Belzberg Architects
Exhibit Design and Media: Gallagher & Associates
Software Development: Stimulant
Photography: Weldon Brewster
Gallagher & Associates
– User Journey
– Content Analysis and Strategy
– Information Architecture
– Wireframes & Annotations
– User stories & Feature sets
– Rapid Prototyping
– Software prototyping
– User testing, Q/A
– Launch support