Surgical patient family waiting room status board

TIMELINE
November 2017 ~ June 2018
DELIVERABLES
Design research
Product design (Zaplin sepc to Dev)
BRIEF
With the advancement of medical technology, more surgeries are done in outpatient settings. Memorial Sloan Kettering, has opened an outpatient surgical center in early 2016. In many cases, patients come with family members who would wait in the waiting lounge until the surgery is done, see patients while they are recovering and take them home. The lounge is thoughtfully set up with things to do while waiting for their loved one, with a status board that shows all surgical patients status throughout the day. The status board was on a big TV screen, and needed some beautification. Re-skin the status board.
TEAM
Solo designer in collaboration with Health Informatics and Engineering team

Always, research

It was relatively simple ask, and I was starting from a safe place. The original look of the status board could be much enhanced with simple changes in spacing and swap of assests. I could have been changing the look of it, but I wanted to see it being used in the context, and talk to people who might have insights that I could not catch just by looking at the screen.

I visited the surgical center and observed family members who are waiting for their loved one’s operation to be finished. How often are they looking at the screen? How far away can they be from the screen? Additionally, I requested to talk to a floor receptionist and a nurse who is frequently interacting with the family members at the lounge. It was a day trip to the surgical center, and I have learned so much that I wouldn’t have learned just from the screen.

 

^  The view of the family waiting area (left) and a close up photo of the original status board (right).

 

Learning from research

  • The board gives a sense of visibility into patient’s status as a quick reference, but patients rely on staff for deeper insights (esp. nurses)
  • There are some misconception about the process when family members come as a visitor, and nurses minimize the gap (require changes in the label)
  • Other people’s progress or timeline does not provide meaningful information (the board looks like it’s a race! This view might be useful for operations manager.)
  • ‘Complete’ has an important distinction
  • ‘Ready for visitor’ triggers action, but other steps are informational
  • It’s hard to read from far away
  • Timestamps might provide higher clarity

 

Guiding Principles & Features

Based on what I have learned, I set some basic design principles that can guide me throughout the design iteration, and ideate features based on them.

Glanceable

Viewers need to be able to quickly identify who they are looking for, and they see the screen from across the room

  • Legible from a distance
  • Quick index to find who I am looking for (alphabetized)

Guiding

Viewers need to understand where in the entire process the patient is and what each step means  

  • Individual focus (My patient’s status takes priority than how everyone is moving through)
  • Patient/family friendly language
  • Process indicator
  • Flashing for action queue
  • Timestamp

Flexibility

The design needs to fit for both portrait and landscape (for future implementation at other facilities), and accommodate 15 ~ 50 items in the list (average number of patients a day)

  • Flexible vertical spacing based on patient volume of the day

 

Design Iteration

I used a large conference room monitor to design. It was handy to check legibility from a distance, and see how it can feel when the design is live in the space.

^ Designing for large screen.

Final Design

^ Sample images of the screen. When there are 15 patients ~ 50 patients.

Design for staff facing tool

The original proposal was to change the look of the screen. However, to make the data more accurate, it needed to have a staff facing tool that a staff member can manually update the status of individual patients.

^ Sample screens of staff side tools.

 

See it in action!

^ The new design has been implemented and up and running.

 

 

PROCESS
  • Research – Design – Implementation

ROLE

  • solo designer

CHALLENGE

  • scoping differently than what is originally asked

RESULT

  • the design has been implemented
  • used modern tools (Sketch, Invision and Zaplin) to collaborate with development team, and the process was showcased as a best practice of collaboration

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.

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

Klyio (Startup). Online Service to Tell Stories

TIMELINE
November 2010 ~ May 2011 (7 Month)
BRIEF
Development of a digital service to generate narratives using social media contents.
Online users  manage multiple web services and constantly generate contents. Ironically, this makes it difficult to track their memories and to create meaningful stories from the contents. Kliyo aggregates online feeds and visualizes data into visual narratives.

As a main user experience designer, I set the goal in the design to make every step easy and pleasant. Many interface possibilities have been explored in sketchbooks, paper prototypes, and digital wireframes.

TEAM
    Design Director
    Senior Interaction Designer
> Interaction Designer
    Visual Designer
    Copywriter
    Front End Developer
    Flash Developer
    Back End Developer
    Project Manager

New York

Final Screen

2011 Kliyo 1

^ Personal media repository page in month view

 

Defining Privacy Dynamics

2011 Kliyo social dynamic 2

^ Privacy dynamics document to define social groups and dynamics within the service

2011 Kyio social dynamic

^ Privacy dynamics document to illustrate viewing permission rules

Interaction Design

2011-Kliyo-sketch

^ Initial sketches for the UI

2011 Klyio wfr

^ Detailed wireframe sample page

2011 Klyio mobile wfr

^ Mobile wireframe screens

ROLE
  • main interaction designer from the detail design phase
  • analyzed competitive landscape
  • developed UX concepts
  • created set of wireframes for web and mobile
  • defined and illustrated rules of complex social boundaries

CHALLENGE

  • creating something new from a scratch and defining invisible into tangible

RESULT

  • developed, but funding ceased