Chanpory Rith

ZumeLife

Health Management Service

Zume Life helps people with chronic illnesses manage their medications, symptoms, and health metrics. The service integrates hardware, software, and human services to improve the relationship between individuals and health professionals.

I created interaction and visual design prototypes for key parts of the service including both web-based and mobile apps. I also designed the identity and corporate website.

ZumeLife corporate site

Wireframes

**ZumeLife home page:** The initial concept of the service targeted health management organizations and large medical practices. I proposed a direct-to-consumer approach where customers can subscribe to the service directly without a middleman.

review_list — **A health coach’s Review List:** With 500 or more patients, health coaches need easy ways to keep track of patients who need care. This page serves as a daily “to-do” list and helps a coach focus on patients who require the most attention. An icon system quickly identifies priority levels and actions taken.

patient_overview — **A health coach’s view of a patient:** Patient health metrics are represented visually.

interaction_flow — **Interaction flow for a health coach**

iphone — **ZumeLife iPhone App:** Customers can record personal metrics and keep track of medications on-the-go.

zuri — **Zuri mobile device:** Customers who don’t have iPhones can use a Zuri to record personal metrics and keep track of medications on-the-go.

zuri_flow — **Application map for the Zuri device**

interaction_flow_1 — **Interaction flows**

interaction_flow_2 — **Interaction flows**

interaction_flow_3 — After viewing her blood glucose history, Rosa manually adjusts the dosage and takes her insulin. The inhaler then asks if she wants to order a refill. Rosa confirms and returns to her date. Later in the story, I show how Rosa uses her Fitbit and Wi-Fi scale with the system. I also show how health professionals and clinics interact with Rosa using the service. Illustrations by Yong Kim.

Booty

Social Treasure Map

A client wanted to build a location-based service around retail coupons and frequent buyer cards. I thought it’d be interesting to expand the idea to create a “social treasure map”.

This service would enable users to find relevant items for sale from nearby friends, businesses, and other users of the app.

Identity and branding: I called the service Booty because it evokes treasure—forgotten but rediscovered items. But I like that it’s also a bit provocative.

product_precursors_3 — **Product precursors:** Booty combines ideas from previous services such as Twitter for micro-blogging, Loopt for geosocial networking, and Craigslist for online classifieds.

Dubberly Design Office

Website

Dubberly Design Office needed a new website to reflect its growing practice and full depth of knowledge. I turned a one-page brochure into a content-rich site with articles, projects, and concept maps. Readers are also invited to comment and contribute additional content.

Old home page

colors — **Color variations:** The site changes color with each new visit.

fullset — **Initial set of icons:** I combined simple lines with a yellow dimensional grounding circle to create a bold, graphic, and distinct icon style that resonates with modern operating systems and the Symantec brand.

**Early explorations:** Ancient Celtic and Japanese symbols of protection, as well as modern forms, inspired many of my early explorations. Their simple, abstract lines had great flexibility, but the challenge was to update their archaic forms to be in harmony with Symantec’s modern brand.

styleguide — **Some pages from the design guidelines:** The icon system’s simplicity kept the guidelines from becoming an unwieldy tome of rules. At a minimal 11 pages, the design guidelines showed how to create the icons in multiple sizes, color bit-depths, and platforms.

gradebook — **Gradebook page:** The large amount of data on the site created many information design challenges. The new visual language was robust enough to present information in a clear way.

report_creator — **Report Creator page**

laptops — **Laptops page with the Find a Review tool opened:** The new design reclaimed red as a dominant brand color and established clear hierarchies through consistent typography and color. Gradient, highlights, and drop shadows also added depth, helping to define information clearly.

**The site’s grid system:** A modular grid system enabled editors to recompose pages quickly while keeping an orderly appearance. The grid also incorporated standard internet ad sizes.

top_5 — **Product rankings page:** I designed different page types and module configurations using the grid system. I also showed how the visual language could extend to tables, rating badges, and icons.

tangrams — **Initial suite of product imagery**

**Adobe “tangram” and possible configurations:** Since all Adobe enterprise products are based on an underlying PDF technology, I used tangrams as a visual metaphor: a set of elements that can be combined to create almost infinite outcomes. Using the angle of their logo, I made a new Adobe tangram.

**Elements of the Adobe tangram on a poster:** Along with packaging, elements of the Adobe tangram could be used on marketing materials such as brochures, websites, and posters.

Hello, I’m Chanpory.
I design software and write code.

My Work