Qualcomm + U.S Preventive Medicine. Personal Health Management

December 23, 2012 / No Comments

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. Strategy for Dynamic Offers Engine

October 23, 2012 / Comments Off on Citibank. Strategy for Dynamic Offers Engine
TIMELINE
May ~ July, 2012 (2 month)
DELIVERABLES
Messaging framework
Concepts
Visual design
Prototype
BRIEF
User experience strategy and concept development for Citibank Dynamic Offer Engine (DOE).
Citibank has an enormous amount of deals and the technology (DOE) that can offer the deals to a large number of customers in a personalized manner. The engine has a capability to intelligently match customer’s profiles with the right deals. Fjord was selected to vision the experience and develop concepts of how deals can be delivered to customers in digital channels.
TEAM
    Service Design Lead
> Interaction Designer
    Visual Designer
    Prototyper
    Project Manager

New York

Final Screens

2011 Citi offers mobile 1

^ Offers promotion example

2011 Citi offers mobile 2

^ Screen to browse offers

2011 Citi offers mobile 3

^ Rewards page example

Framework

2012-CIti-offers

^ Fjord team created the messaging framework for Citibank.

Concepts

Within the framework, we came up with a few cases that show the best matches for content and the channels. Based on the concept sketches, I made 3 videos (with Keynote) to quickly illustrate what the end-user experience might be

2012 Citi_Mobileoffers_ActionableInbox

^ Concept: Actionable Inbox

2012 Citi_Mobileoffers_QuickPay

^ Concept: Quick Pay

2012 Citi_Mobileoffers_OffersInContext

^ Concept: Offers in Context

2011 Citi offers tablet 2

^ Later in the project, the concepts were fleshed out as prototype

PROCESS
  • Research – concept development – UX prototype – visual design – prototype on iOS

ROLE

  • heavily involved in the first phase of the project
  • generated and sketched initial concepts into moving wireframes to illustrate high level concepts

CHALLENGE

  • understanding complex system

RESULT

  • Client developed the concepts into offerings.
  • “The work you have done is fantastic. We especially appreciate how closely you worked with the Global redesign teams to ensure we were developing concepts that will fit into the framework of the new apps. This has been a major help. Over the past week or so I have been going around to different business partners to show them the concepts, solicit input and generate enthusiasm/support for a Mobile Commerce project in 2013. The prototype your team built has made these meetings incredibly easy – people are wowed by your work and are very excited to get going in the mobile space.”- from the client

Design Clinic. Weekly Gathering on Design

October 23, 2012 / Comments Off on Design Clinic. Weekly Gathering on Design

TIMELINE
September, 2012 ~ Now (over 2 years)

ACTIVITIES
Internal presentation
Guest presentation
Field trips
Design workshops
Debate
Video watching

BRIEF

Weekly design discussion in Fjord New York studio. I initiated and organized this series of meetings with 2 other colleagues, Nour Diab and Petra Farinha, over 2 years to support education, inspiration and bonding. Every Friday 4 PM I go around and ring beer bell in the studio, and we all gather to talk about design. I am very happy that we, as a team, spent time together to cultivate our own curiosity.

TEAM
> Organizer
Everyone

New York

2014 Design Clinic drawing3

^  Design Clinic on Drawing by Visual Design Lead, Brian McLaughlin. April, 2014

2014 Design Clinic fieldtrip-cooperunion2

^  Field trip to <Image of the Studio, a portrait of New York City graphic design> at Cooper Union. October, 2013

2014 Design Clinic littlebits

^  LittleBits Workshop with LittleBits. August, 2014

2014 Design Clinic IxDA

^  Extended Design Clinic as IxDA meetup on Wearables. August, 2014

ROLE

  • initiator, curator, organizer, occasional presenter and all time beer ringer
  • recruited internal and external speakers
  • organized field trips to various types of exhibitions
  • facilitated design exercises

HIGHLIGHTS

  • internal presentation/workshop: what’s happening in Congo, 3D printing, design + business
  • guest speakers: Critter and Guitari, LittleBits, BeerBot
  • fieldtrip: Pencil to Pixel at Monogram, Applied Design at Moma, Brooklyn Design at Dumbo
  • design workshop: improv, play with playmobile (I led 2 sessions), book binding
  • debate: debate over ‘How to lie with Design Thinking’ with Dan Saffer
  • video: The Invention of Dr.Nakamats, Objectified

CHALLENGE

  • Fjord New York studio has been growing very fast in size and the organization became challenge over time

RESULT

  • grew into 3 people team with Nour Diab and Petra Farinha
  • Mentioned as heros at Fjord USA gathering
  • in employee surveys, team members mentioned Design Clinic sessions as highly valuable time at Fjord.
  • in September 2014, we opened a session with larger design community by hosting IxDA meetup (on wearable). We sold out 80 seats in a day, and participants were very engaged.

 

Citibank. Money2 for Health

October 4, 2012 / Comments Off on 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

December 29, 2011 / Comments Off on 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