TEMPTRAQ™ MOBILE APP DESIGN

Blue Spark Technologies came to SmartShape Design in spring 2014, asked the design team to design a complete product, for their new technology -- the thin flexible battery, including the patch, package, logo, and mobile app. We had a 4-month pleasant cooperation with Blue Spark on this project, and the final product won the award of USA TODAY CES Editor's Choice.

"TempTraq™ is the only wearable, wireless, continuously monitoring intelligent thermometer, powered by Blue Spark Technologies' innovative thin, flexible battery technology, built to last for 24 hours of continuous temperature monitoring and reporting."  

                                                                         ---- SmartShape Design Co.

MY ROLE

In this project, I was working on the early product research and the mobile app design, from information structuring, workflow design, wireframing, to the visual style exploration. In the early phases, I was mostly working individually on the proposals and had the manager and other designers critiqued on them. I participated in almost every meeting with the client to talk about the design and ask them for the feedback. This was the first time for me to work with client and engineers, which was the biggest challenge I was facing. Although we had a brief talk about cans and cannots before we started at the very beginning, there were still many unpredictable factors during the process that forced the design to be changed.

BUSINESS STRATEGY

When Blue Spark came to SmartShape, they only brought the flexible battery technology and a vision of what the product would be. In order to understand their target market better, so that we could apply an appropriate design language to the whole product package, we did a research about the competitor's products, based on which a matrix was created as well for the client to adequately position themselves. 

I created a couple scenarios, based on some interviews with our target users, to verify that the workflow worked in every of them. Some wireframe drafts was created to illustrate the possible actions users could take in the app. In order to avoid unnecessary redoing work, I was creating the workflow and wireframe, even some minor interaction at the same time. As they moved forward together, it was more straightforward to talk with the client about the designs and get their prompt feedback for the future modification.

SCENARIOS AND WORKFLOW

1/3
Visual Proposal1
Visual Proposal2

When the workflow and wireframe are confirmed, we started to explore the appropriate visual style that could be used in the mobile app, and they can also help the client to envision the future look of the app.

VISUAL STYLE EXPLORATION

Two system

PATCH STATUS PREVIEW

All the patches are listed in the same page, and color coded based on baby's temperature. The list presents the name, body temperature, alert temperature, and monitoring time together. The completed patches are listed on the bottom.

TWO MODES FOR TWO SYSTEMS

Finally we designed the day-mode and night-mode for both the Android and IOS system. The night-mode is using a dark background to enhance the readability during night.

On the dashboard of each patch, user can see the current temperature comparing to the alert temperature, patch's running time, and the history. New mom can also add a note to a specific time in order to record the effects of medicine, food, or bath.

DASHBOARD

When users turn the view to landscape, the temperature history chart will be zoomed in. Users could check the notes one by one.

LANDSCAPE VIEW

The patch is monitoring and reporting to the app every 2 minutes. This list can be exported by excel.

TEMPERATURE HISTORY

Color and Iconography-01

Color Palette

Iconography

USABILITY TEST

To verify if the workflow works well, we did usability tests several times with the prototype. And after the engineers built the interactive demo, we kept using it to test and refine our design.