Care Transformation Powered by Digital Services

TIMELINE
May ~ November 2016 (7 month)
DELIVERABLES
Vision & strategic service recommendations
BRIEF
How will cancer research, healthcare, technology and society change in 10 years, and what is the impact of the changes at Memorial Sloan Kettering Cancer Center? Aging society, technology disruptions, consumer-driven markets and breakthroughs in cancer research suggests Memorial Sloan Kettering, an over 100-year old brick and mortal institution, to be more accessible and nimble. Breakthroughs in cancer research allow early detection of disease, and shift cancer as more chronic illness, meaning more and more people will be more engaged with preventive care and/or managing cancer as a condition to live with. As an institution whose focus has been treatment of cancer, how might we leverage digital technology to deliver cancer care outside of our physical boundary, and expand our reach to those who are beyond diagnosis & treatment in their care continuum? How might we develop a flexible and robust foundation of technology that can support evolving organizational needs & dynamics of cancer care? I led the effort to deliver answers to this question with team of designers and technologists at Memorial Sloan Kettering.
TEAM
> Senior UX Designer (Project lead)
    UX Designer
    Project manager
    Visual Designer
    Design Researcher

in collaboration with teams institution wide

Care Transformation Vision

“Be bold.” was the guideline that was give to me when I met José Baselga, chief medical officer at Sloan Kettering with the proposal of digital strategy project. To stay truth to this ask, we focused on the future – where society, medicine and technology are heading to rather than what are current efforts that are happening within the institution. Prevailing consumer technology and artificial intelligence, rising power of consumers, healthcare reform, advancement in cancer research are all pushing cancer care center to think of new ways to deliver cancer care in digital ara, and cancer care will be different experience in 10 years.

2016 MSKCC vision posters

^  As part of the final deliverables,  the team have suggested three digital service concepts that can strategically move MSK from where we are now to where we want to head to in 10 years. Service concepts ware described as future scenario (a story of a patient and her journey) so that the human experience design can lead the development of our future.

 

 

Trend based collective intelligence

We started our discussion with 5 possible future stories that have components of upcoming trends in technology, society and medicine. Through a workshop with colleagues from across the institution, we discussed possibilities, pitfalls and excitement to refine future scenarios.

2016 MSKCC approach

^ Building scenarios based on trends: To foresee more probable and relevant future experience, the team has gathered trends in healthcare, technology and society that are relevant to cancer care and pictured future scenarios; Combine “high demand of oncologists” (healthcare) + “aging population” (society) + “drone” (technology) = what future scenario can you draw?

 

^ Supporting organizational goals: Design team made sure that the scenarios we brought to the workshop maps well with the growth strategy of the institution.

 

 

Additional Research

We have looked at other cancer institutions and their digital tools (patient portals) against the lens of functionalities. In parallel, we have looked at other digital services outside of healthcare to benchmark user experience.

  • How are other hospitals utilizing digital touch points in their care?
  • What are other examples outside of healthcare that engage their customers a way that we aspire?
  • What do we learn from examples in and out of healthcare?

 

2016-MSKCC-Digital-Patient-Care

2016-MSKCC-Digital-Patient-Care

^ Competitive Analysis: Analyzed 6 patient portals (3 top hospital enterprise solutions, 2 cancer care focused solutions and 1 homegrown portal) as well as digital service experience outside of healthcare that materialized and delivered the experience that we desire through our digital patient care.

Additionally, technology team analyzed current technology infrastructure and the gap between current  capability and our desired future.

 

Final Concepts & Recommendations

 

2016-MSKCC-Digital-Patient-Care

^ Strategic services: Analyzing trends, related internal initiatives, our team suggested 3 strategic digital services that can transform patient care at MSK across all patient journey from prevention and wellness period to during cancer treatment to survivorship.

2016-MSKCC-Digital-Patient-Care

2016-MSKCC-Digital-Patient-Care

^ Future scenarios: (Sample) Digital service can connect disconnected parties through digital and provide values for every connected party. The scenarios were put together to juxtaposed experience and benefits of patients and the institution, along with evidence (trends, related projects), capabilities to build, return on experience and challenges.

PROCESS
  • Workshop (vision, ideation) – competitive analysis – SME interviews – Analysis & concepts – Final deliverable

ROLE

  • led the project from planning to delivering final report

CHALLENGE

  • learning complex hospital system in a short period of time

RESULT

  • The final suggestions were well received by senior management at Memorial Sloan Kettering Cancer Center
  • Two of the three suggested services are being developed into new capabilities and offerings at the institution.

AIG Ireland Site & Global Design Framework 

TIMELINE
March ~ May, 2014 (3 months)
DELIVERABLES
Wireframes
Visual mockups & specs
BRIEF
AIG.ie redesign as an initial example of a global framework for AIG sites across the world. AIG sites were designed and managed by each market. It allows each market to respond to their specific market needs, however, it creates inconsistency in customer experience and inefficiency in adopting best practices among their digital products. Fjord San Francisco team researched and developed 3 concepts and the client selected a concept to move forward. Then New York team designed the product.
TEAM
    Design Director
    Service Design Lead
> Interaction Designer
    Interaction Designer
    Visual Designer
    Project Manager

New York, San Francisco

Responsive Design

2014-AIG-responsive

^ Final design for landing page

Design Process

We have designed the Ireland site as an example for a new site for all AIG sites globally. Along with simplicity and clarity as top design priorities, we considered flexibility as one of the major design principles so that the design can be adapted for each market their own specific needs.

2014 AIG sketch

^ Example of initial sketches for main navigation
(2 interaction designers exchanged ideas through sketches. When we finalize our ideas, we digitized and shared with the larger team and the client)

2014-AIG-wfr

^ Sample pages from the wireframe document

2014 AIG usability testing

^ Usability testing summary

I co-authored the testing script and supported the team to create a prototype to be used for the testing (Axure). Team members conducted the usability testing in Ireland while I supported real-time synthesizing with video recordings in New York.

PROCESS
  • (Workshop – research – concept) – detail design – usability testing

ROLE & CONTRIBUTION

  • joined the project as a main interaction designer from detail design phase
  • interpreted complex flows into simple interface
  • created systemic framework that can be reused globally
  • supported prototyping and set up the usability testing (scripts / synthesis)

CHALLENGE

  • persuading client to the suggested design directions
  • considering scalability for every design decision

RESULT

  • AIG Ireland site has launched in 2014, and the design has been adopted for other markets globally since then.
  • AIG Korea has adopted the new design, and re-launched in February 2016. AIG earned an Excellence Prize at Web Award Korea, hosted by the Korea Internet Professional Association (KIFPA). Web Award Korea, established in 2003, is one of the country’s most prestigious awards for digital content, web design, and user experience.

Citibank. Tablet App for Corporate Banking

TIMELINE
November 2013 ~ January 2014 (3 month)
DELIVERABLES
Rumble (Workshop) and synthesis
Wireframe
Visual design
Prototype
BRIEF
Enhancement of Citi Direct BE tablet app (banking app for corporate and public sector customers.). Fjord has designed the first version of Citi Direct BE app (iOS only), and Citibank came back to design the next version of the application which would expand to Android and Windows platforms.
Corporate banking involves multiple bank accounts in multiple currencies and multiple banks in many geographical locations. The users of this app can be senior treasurers or CFOs who would need a birds eye view of their organization’s finance and make decisions.
TEAM
    Business Design Director
    Service Design Lead
> Interaction Designer
    Visual Designer

New York, Dublin

Final Design

2014-CTS-mockup-2

2014-CTS-mockup-1

^ Final design for map view and chart view

Design Process

2014-CTS-rumble-deck

2014-CTS-rumble

^ 2 days workshop with clients to set the vision and deep dive in corporate banking

2014-CTS-whiteboard

^ Architecture sketches for multiple platforms

2014 CTS wfr 2

^ Sample page of platform exploration document

2014 CTS wfr 1

^ Detailed speculation for filtersets

Out in the Market

2014-CTS-appstore google

2014-CTS-appstore windows

2014-CTS-appstore-apple

^ In the fall 2014, the app is out to Apple Appstore, Android marketplace and Microsoft Windows store.

PROCESS
  • Stakeholder interviews – workshop – design research – detail design – prototype

ROLE

  • support facilitating the 2 days workshop
  • translated a complex banking data into a comprehensive story by providing clear rules and developing patterns of the UI
  • recommended design framework for multi-platform development (Windows Surface, Android and iOS)
  • created click-through prototype (InVision) for demo

CHALLENGE

  • understanding complex subject matter
  • creating robust, and yet easy-to-use tool

RESULT

  • developed by Citibank Innovation Lab in Dublin and out in the market in the fall 2014

  • won the award for Best Mobile Service or App for the Enterprise at the Mobile World Congress in Barcelona, 2015. Citi was the first bank to receive this award, the honor have been given to tech or telecommunications sector in the past.

Aetna. Designing New Business for Workforce Availability 

TIMELINE
April ~ November, 2013 (8 month)
DELIVERABLE
Service blueprint
Stakeholder map
Workshop
Concepts
Wireframes
Visual design
Prototype
BRIEF
New business development around workforce management within Aetna from concept to product. At Aetna, internal new business development team has embarked on a journey to develop a new business in regards to managing absence in organizations. Fjord was selected to define the details of the new business, develop core concepts and design the MVP which involves multiple types of users. (employee, supervisor, and Aetna service representatives)
TEAM
    Service Design Lead
    Business Design Lead
> Interaction Designer
    Visual Design Lead
    Project Manager
    Prototyper
    Developers

New York, Hartford

Discovery

2013 AWA stakeholder map

2013 AWA process map

^ After talking to multiple stakeholders, day-in-life research and a 3 day workshop with Aetna and the potential clients for the new business, the team have learned the complexity of how currently workforce availability has been managed in large corporations.

Framework & Strategy

2013 AWA service principles

2013 Aetna framework

^ Design framework and principles

Concepts

2013-AWA-concept

^ From the framework, we’ve envisioned 3 concepts

Detail Design

2013-Aetna-vd3

^ Final visual design samples for 3 types of users; employee, supervisor and the service admin

2013-Aetna-wfr

^ The Fjord team identified 3 major user types of the service and designed an online service with 3 faces; for employees, for front-end supervisors and for service representatives. The images are the sample pages from the wireframe documents. Wireframes were used to communicate with visual designers, clients, and developers who were building the MVP for initial release.

 

 

PROCESS
  • Research (stakeholder interviews – field interviews – stakeholder map – service blueprint) – concepting – detail design – development

ROLE

  • as a core team member of the design team, support all aspects of service design in this complex multi-actor play from the beginning to end
  • support facilitating 3 days workshops (lead breakout sessions) to define actors, their relationships and the workforce management processes
  • played an integral role in stakeholder interviews, field interviews, concept and direction development.
  • designed detailed interaction for multiple users of the system

CHALLENGE

  • complex system – hard to comprehend by anyone. compiling many voices of constituents and stakeholders, tight timeline for detailed design for multi users

RESULT

  • ceased while MVP under development

Qualcomm + U.S Preventive Medicine. Personal Health Management

TIMELINE
April 2011 ~ December 2012 (1 year 9 month)

DELIVERABLES
Product development

BRIEF
Personal health management for mobile users. U.S. Preventive Medicine (USPM) had been running a health care program to help participants live long good years. They had an online site to support the program, and partnered with Qualcomm to translate the online experience onto mobile platform. For almost 2 years, USPM (content), Qualcomm (technology), and Fjord (design) collaborated to create Macaw app (for iOS and Android) that helped tens of thousands of users manage their health on mobile.
From ground 0, we launched a personal healthcare app that connects to multiple tracking devices and provides health information by medical experts. After the first launch we expanded the app into disease management platform.

TEAM
[DESIGN] Service Design Lead
> Interaction Designer
Senior Visual Designer

[ENGINEER] iOS developer
Android developer
Qualcomm (Server technology)

[CONTENT] U.S. Preventive Medicine (Medical experts)

New York, San Diego, Jacksonville, Toronto, and Austin

Final Design

2012 Macaw 1

^ Macaw app, screen for trackers. This project was my biggest effort of all at Fjord.

Process

PHASE 0: Experience Design

2011 Macaw game

^ This is a sample page that explains the gaming mechanics to create sticky experience. The team had many ideas around how to bake the habit of coming back to the app. The mechanics we considered include accomplishing bite sized actions, leveling up, getting rewards, learning, competing and being part of a team.

PHASE 1: Launch

2012 Macaw 2

^ We launched Macaw app for iOS in November 2011 (5 month after the project started). Through personalized action cards, users participate in healthy activities as well as learn about why the activities help maintain good health. Users could plug in third party health trackers such as Bodymedia or Withings devices to log progress automatically.

PHASE 2: Rethink health – mind, body and social

2012-Macaw-revise

^ After our first launch, we had the opportunity to look at the app with fresh eyes. We’ve consulted with many medical experts and approached health in a larger context; health is a state of mind, body and social. Fjord team proposed a new way to visualize health state and the progress with the images above.

PHASE 3: Design for disease management

2012-Macaw-diabetes

^ While we plan to revise the app with more holistic approach, the larger team envisioned that disease management would be the next big step for the application. As a first example, we designed a section for diabetes.

2012 Macaw wfr 4

^ A sample page explaining on-boarding flow of disease management

2012 Macaw wfr 2

^ Detailed speculation document for tracker screen

2012 Macaw tracker wfr

^ Design for preventive health management to disease management was quite a big step. It involved learning much about the disease and life with diabetes as well as trackers for specific measures of the body. For diabetes, we’ve designed trackers for weight, nutrition, exercise, blood glucose, blood pressure, hemoglobin (a1c) and medication. (Nutrition tracker alone felt like a designing a whole new app!) We also worked hard to find a holistic and personal view of all measures. The image above is a sample wireframe document that explains how the tracker overview screen works.

Design iteration

^ This image shows the evolution of trackers from summer 2011 to winter 2012.

PROCESS
  • Workshop (initial concept definition) – detail design – release – design revision – release – design revision

ROLE

  • main ixd throughout the project from the initial concept development to detailed design
  • designed the experience, app architecture and detail screens

CHALLENGE

  • designing for behavior change
  • understanding the complex subject matter, especially for disease management

RESULT & RECOGNITION

  • First version launched after 6 month in
  • CES Mobile Apps Showdown Winner 2012
  • CTIA Emerging Technology Award 2012
  • NDEP Frankie Award 2012
  • Finalist for 2011 CTIA Hot for the Holidays Awards 2011

Citibank. Money2 for Health

PROCESS

May, 2012 ~ October, 2012 (6 month)

DELIVERABLE

Competitive audit
Wireframe
Visual mockups & style guide
Working prototype

 

BRIEF

Citibank has embarked on a new business development to provide consumers a new way to manage their medical bills. Partnered with insurance companies, Citibank developed a payment system where medical service receivers can view medical claims and pay directly from the service. Medical bill management can be confusing and stressful because of the complexity of medical services. To make the bill management experience delightful Citibank selected Fjord to design the service experience.

TEAM

Business Designer
> Interaction Designer
Senior Visual Designer
Project Manager

 

New York

Final Design for Multi-platform Service

2012-Citi-m2health-mockup^ Sample images from the final design

Sample pages from the final design

2012-Citi-m2health-visuals

Wireframes

2012-Citi-m2health-wfr

 

PROCESS
  • Stakeholder interview – competitive analysis – detail design – prototype – usability testing (2 rounds)

ROLE & CONTRIBUTION

  • solo interaction designer of the project
  • conducted competitive analysis to inspire the team
  • created interaction model and detailed interface for mobile and desktop experience
  • supported prototyping and the 2 rounds of usability testing

CHALLENGE

  • understanding complex landscape of medical services
  • creating simple solution for complex tasks

RESULT

  • the service has been open to market since 2013

Intuit. GoPayment Multiplatform Payment System

TIMELINE

August 2011 ~ January 2012 (6 month)

DELIVERABLES

Complete set of wireframes for 3 platforms
Complete set of visual designs for 3 platforms
Animated screen for key flows

BRIEF

Redesign GoPayment, a multi-platform (mobile, tablet, web) payment system for merchants that uses small add-on swiper for smartphones. Intuit selected Fjord to reimagine their payment system as a useful and delightful tool for their users.

TEAM
Service Design Lead
> Interaction Designer (iPhone, iPad)
Interaction Designer (web)
Visual Designer (iPhone, iPad)
Visual Designer (web)
Project Manager

New York, San Francisco

Final Screens

2012-gopayment-ipad-iphone

^ Store front for GoPayment iPad app and iPhone app

Interaction Design

2012-gopayment-nav

^ Sample page for main navigation system for 3 platforms

2012 Gopayment flow

^ On-boarding experience on GoPayment service was long and tedious. I looked at other competitors and the business objectives and reconfigured the process into 5 step process.

2012-Gopayment-wfr

^ Sample pages of wireframe for iPad app

PROCESS

  • Workshop – Desktop research – Concept development – UX design for multiple platform (iPhone, iPad, web)

ROLE

  • main interaction designer for iPhone and iPad apps (mobile experience has been translated to web later in the phase by another interaction designer)
  • generated design concepts that carried throughout the product
  • set up user flows and overall architecture of the service

CHALLENGE

  • considering multiple platforms and translating design into one another in harmony
  • pushing simplicity over system legacy

RESULT

  • iPhone and iPad apps launched at App Store in December 2012(GoPayment is now communicated as a sub-product of Quickbooks)
  • Intuit came back to Fjord to design the consumer experience of GoPayment