Biosense ToucHB Website
  • Client: Biosense
  • When: 2011
  • Team: 2 Designers and Developers
  • My Role: Designer and Developer
Overview

In the Fall of 2011, I had the opportunity to re-design and develop a new website for an Indian medical electronics startup. Along with a friend of mine, we conducted initial user and market research, designed the user experience and interface, created all graphic and visual design assets, and developed the website using HTML, CSS, and JQuery for a remote client half-way across the world in India. We both had full-time positions as Mechanical Engineers at the time and used our evenings and weekends to work on this project.


Finished Biosense ToucHB Website product page in browser UX mockup

Problem Statement

Every minute, two people in the world die from Anemia–a completely curable disease! One may think that perhaps the cure is not well distributed, but that is not the case. In fact, the weak link in the chain boils down to lack of accurate diagnosis. With a false positive diagnosis and treatment, dangerous complications occur. With a false negative diagnosis, no life-saving treatment is offered.

Biosense’s TouchHb product addresses this key moment in the chain by providing a reliable, portable, non-invasive diagnostic to healthcare workers. TouchHb targets mobile healthcare workers in rural India with its low cost and minimal profile.

Our client asked us to re-design the existing Biosense website so that it was easier to use and more engaging.

Existing Biosense ToucHB Website before we began redesigning

Design Research

After determining that the website’s target audience would be the health care workers in the field and potential investors as opposed to the rural patients, my partner and I began with researching how to best design a site that could convince our target audience that TouchHb was a valuable product in which to invest.

We studied the history of anemia, key statistics, and existing solutions. We learned that though information was plentiful, it was not common knowledge and scattered.

We interviewed potential website viewers. With investors, we found that our biggest obstacle with was demonstrating the importance and need of TouchHb for people of the emerging world. Investors often did not realize the extent of the problem and how a solution was right at their fingertips. As we interviewed healthcare workers, we learned that many were entrenched in the mindset that reliable anemia diagnostics were only available at larger hospitals and had to invasively draw blood. We needed to make it clear that that was not the only option available to them. A portable and non-invasive solution could now be purchased by individuals at a fraction of the cost.

We researched how to best share our knowledge and achieve these goals, and came to the conclusion that our website needed to tell a story. From there, we began designing and prototyping what an immersive storytelling experience might be.

Storytelling Information Architecture and User Experience

As we dove into the storytelling and user experience, we worked to simplify our story down to absolute essentials. A full-page, immersive slideshow analogy began to form as our chosen tool of expression. We strove to make our design friendly, engaging, informative, and a clear call to action. We wireframed various iterations out on the whiteboard as we cycled through this process.

Biosense ToucHB Website Story Architecture whiteboarding

Since my partner and I were both the designers and engineers on this website, we were careful to design a website that achieved all our goals independently from engineering challenges. After we were confident in the framework of our design, we determined what the best way to code our solution. Naturally, we faced some key engineering tradeoffs. For instance, we wanted to use a CMS, but realized that our schedule and resources would not allow us to complete the design we wanted with a CMS.

Biosense ToucHB Website Development plan whiteboarding

When we handed off the completed website design to our client, we provided them with all the final code, visual assets, and a
guide to the code.

Landing Page User Interface and Visual Design

On the visual design side, we followed a similar process of iterative design with colors, graphics, photography, and individual page layout. Throughout the process, we checked in with our client to make sure that they were satisfied with our progress and we tested our designs through interviews, usability tests, surveys, and A/B testing.

We settled on using a theme of warm colors that had earthly tones along with a red to subtly reference the blood associated with anemia.

Biosense ToucHB Website theme colors

Let’s dive into our process for the front landing page. Our process for all the other pages was extremely similar.

For the front page, we created initial wireframes of full-screen slideshows as well as framed sliders. We explored where we wanted information to be presented, and how we wanted to indicate how a user was to interact with and move through our story.

Biosense_FP-Wireframe1
Biosense_FP-Wireframe2

As we regularly checked in with our client, we created prototypes to share our progress. We started with simple static prototypes and gradually progressed into functional prototypes.

Biosense_FP-Prototype1
Biosense_FP-Prototype2

Once we were confident with the framework of our website, we began prototyping our visual assets. We had several photoshoots where we played with colors, framing, and composition. In our first photoshoot, we rented a nice lens and photographed ourselves in preparation for when we hired a model and on the off chance we did not need one. After looking through our shots, we needed a model.

Biosense_FP-Photoshoot1
Biosense_FP-Photoshoot2

In our second photoshoot, we hired a model and coached her through the session. We played around with various backgrounds, attire, facial expressions, positioning, subjects, lighting, and composition. At the end of our session, we had a massive library to chose from for our story.

Biosense_FP-Photoshoot5
Biosense_FP-Photoshoot7
Biosense_FP-Photoshoot8
Biosense_FP-Photoshoot3
Biosense_FP-Photoshoot6
Biosense_FP-Photoshoot4
Biosense_FP-Photoshoot9

After choosing our top images, we created rough static mockups of key pages side by side for feedback. We used side by side comparisons to determine our final combination of photographs.

Biosense_Mockup1
Biosense_Mockup2

Finished Biosense ToucHB Website front page in browser UX mockup

Learn More

If you would like to learn more about Biosense’s ToucHb, watch their TEDx talk: A 20 second blood test without bleeding from 2013.

Barnes & Noble Nook Media Tablets
  • Client: Barnes & Noble Nook Media
  • When: 2011-2014
  • Team: 3 Mechanical Product Design Engineers, Electrical Engineer, and external Contract Manufacturing team
  • My Role: Product Design Engineer
Overview

I joined Barnes and Noble’s Nook Media team in Fall 2011. Though the company headquarters are in New York, Nook headquarters were in Palo Alto. Nook functioned much like a startup within the larger company, where we had the advantages of agility and resources.

Products

During my two and a half years at BN, I worked on the design of about ten tablets and accessories. Some were products I joined during the later stages of the development process and most were early concepts that we took through various stages of the development cycle.

Nook HD+ (shipped)
Nook HD (shipped)

Barnes & Noble Nook Media Tablets: Nook HD+ and Nook HD

Product Design

As a Nook Product Designer, I was offered the opportunity to dive even deeper into Hardware Product Design through the mentorship of my team. Over the years, I worked on almost every subsystem in a tablet, including custom batteries, cosmetic housing and structural parts, displays and touch screens, audio systems, antennae, buttons, connectors, PCB and flexes, media and camera systems, and high-level system architecture.

In teams of three, we not only designed the overall system architecture and the detailed mechanical part design, but we also collaborated with internal Engineering, Marketing, and Operation teams and external ODMs, consultants, partners, vendors, and suppliers.

Design Strategy and Research

During my final months at BN, our team did a massive re-evaluation of our roadmap. We worked side by side with multiple design consultancies to brainstorm and strategize what direction we ought to take our products. Over the course of a few months, we used our user previous research data to settle on some unique experiences that would be enabled by innovative product form factors and materials. It was very exciting to push the bounds of what we think of as a typical reader and to not only make one unique experience but to also design a whole family of products that interplayed with each other.

Patents

While at BN, we invented a number of unique assembly techniques for consumer electronic device product design.

US 20140201997 A1: Method for split wire routing in a cavity for a device
US 20140204547 A1: Apparatus for split wire routing in a bracket for a device
US 20140201996 A1: Techniques for split wire routing for a bracket in a device

US 20140026411 A1: Techniques for efficient wire routing in a device
US 20140027166 A1: Techniques for efficient wire routing in electronic devices
US 20140029218 A1: Apparatus for efficient wire routing in a device

HP Palm Smartphones
  • Client: Hewlett Packard Palm
  • When: 2010-2011
  • Team: 4 Mechanical Product Design Engineers, Electrical Engineer, and external Contract Manufacturing team
  • My Role: Product Design Engineer
Overview

Hewlett Packard acquired Palm soon after I joined in the summer of 2010. During my time at HP Palm, I was a member of the team that shipped the Palm Pre 2 and Palm Pre 3 phones. I learned and experienced a lot in my first year out of Stanford!

Products

During my year and a half at Palm, I worked on the design of about ten smartphones. Some were products I jumped onto during the later stages of the development process and most were early concepts that we took through various stages of the development cycle.

Palm Pre 2 (shipped)
Palm Pre 3 (shipped)
Windsor Not (never released)

HP Palm Smartphones: Palm Pre 2 and Palm Pre 3

Product Design

As a HP Palm Product Designer, I put my Product Design and Mechatronics degrees to good use. With teams of three to four Product Designers, we designed and developed entire smartphones from concept to shipping. Along with designing the overall system architecture and the detailed mechanical part design, I coordinated with and negotiated between various internal Palm Engineering, Marketing, and Industrial Design teams and external ODMs, vendors, and suppliers. During the product development process, I regularly analyzed and developed solutions for reliability and manufacturing failures.

Design Strategy and Research

While working on product development, I explored and prototyped concepts for future devices and physical interactions and experiences. I used market research and competitive analysis to inform my initial design directions. For instance, I primarily focused on what a dual screen experience might be as well as what a biometric (fingerprint sensor) experience could look like.

During this research, I realized that there was a huge need in the market for a candy-bar smartphone with a streamlined OS and what better system than webOS. In our downtime, my colleague and I began designing the concept for a new keyboardless phone. We pitched it to our team lead, manager, and within weeks our grassroots design gained traction from all over the company. Soon, our design was not only a product on the roadmap, but also the flagship product that had drummed up support, excitement, and hope from throughout the organization. We proceeded to develop our design through nearly the final stages of development. Though our product was canceled, I am extremely proud to have been a part of that experience.

Remote Controlled Pirate Ship Robot
  • When: 2010
  • Team: 3 Mechatronics Engineers responsible for Mechanical Engineering, Electrical Engineering, Firmware Software Engineering, and Systems Integration
  • My Role: Mechatronics Engineer with additional focus on Firmware Software Engineering and Systems Integration
The Challenge

Design and build a full-functioning boat and controller that can cooperatively strive to harvest a crop of virtual crab during a series of crabbing “seasons” within three weeks for less than $150.

Pirates

Our team of three created our pirate ship in the Spring of 2010. Our pirate ship was a sleek fiberglass boat that was quickly maneuverable through dangerous waters.

For more details on our pirate ship, check out our project website.

Remote Controlled Pirate Ship Robot Controller Pirate Wheel and Pirate Hat

Remote Controlled Pirate Ship Robot sailing in the water

We integrated a variety of disciplines to create our pirate ship, including design, electronics, mechanical, and firmware skills.

Learn More

Stanford Smart Product Design Lab

IBEKA Easy Distillation for Indonesian Farmers
  • Client: IBEKA
  • When: 2010
  • Team: 2 Mechanical Design Engineers and 2 Business Analysts
  • My Role: Mechanical Design Engineer
Overview

From March 2010 to June 2010 as part of Stanford d.school‘s prestigious Entrepreneurial Design for Extreme Affordability class, I worked with a diverse team of four, including Engineers and MBAs, to help rural Indonesian farmers earn fast cash from the weeds in their farms and simultaneously minimize deforestation.

With The Easy Steam Machine, rural Indonesian farmers can increase their income. The Machine provides them an efficient way to produce steam for their home essential oil distillation units. By reducing the time to produce steam from hours to just a few minutes, The Machine enables farmers to process at least 25% more biomass per day! Time is saved by (1) increasing surface area, (2) heat insulation, and (3) including a continuous water flow through system. As a $230 plug-and-play replacement for the traditional batch drum, the Easy Steam Machine ensures durable, hassle-free steam distillation.

The Easy Steam Machine speeds up the weak link in an existing system by two orders of magnitude. Using our boiler technology, we were able to reduce distillation time from 3 hours to 3 minutes!

Indonesian Traditional Batch Drum Distiller

Traditional Batch Drum Distiller

The Easy Steam Machine Boiler System for Distillation Units

The Easy Steam Machine

The Opportunity

We worked with IBEKA, our NGO partner in Indonesia, to identify the core need of these farmers. For one week, two of my teammates visited, observed, and interviewed these farmers in their fields. We noticed that these farmers were battling with lemongrass as a weed in their farms, and as a result, expanding into fresh rainforests as they struggled to keep their farms going so they could support their families.

Interestingly, most farmers had systems in place to convert their lemongrass into crude lemongrass oil, which they could easily sell for fast cash. However, these distillation systems were left unused, because it took them three hours of valuable time to boil the water necessary to begin the distillation process.

Need Statement

Subsistence farmers in Indonesia need a way to process all of their lemongrass and patchouli into higher value essential oil. Currently, farmers leave up to twenty-five and seventy-five percent of their plant material unprocessed because their essential oil distillation device is too cumbersome and time-intensive. Given the short harvest period and the low throughput of their device, farmers must leave potential income in the field, unprocessed.

The Solution

In order to increase the quantity of oil output, we focused on increasing both the throughput and the yield, i.e. doing a faster job and doing a better job. The Easy Steam Machine is a replacement, plug-and-play device that fits directly into the traditional system — which makes it less expensive than purchasing an entirely new device. It also lowers the barriers to adoption because farmers will feel familiar with the design and user interface.

Diagram showing Inefficiencies with Traditional Distillation

Inefficiencies with Traditional Distillation

Diagram showing The Easy Steam Machine

The Easy Steam Machine

There are four problems with the existing system that lower throughput and yield: stifled fire, biomass heat loss, poor water-to-fire interface, and high water maintenance. We address each of these with our system by designing a more efficient fire, biomass insulation, higher surface area, and water flow-through.

The Easy Steam Machine speeds up the weak link in an existing system by two orders of magnitude. Using our boiler technology, we were able to reduce distillation time from 3 hours to 3 minutes!

Check out a prototype in action:

Implementation Proposal Plan

IBEKA Easy Distillation for Indonesian Farmers Implementation Proposal Plan UX Mockup

Status

We handed this project over to our partner IBEKA to execute and distribute this among their served communities.

Learn More

Read our implementation plan here.

Read our final presentation here.

Read more about the d.school class Entrepreneurial Design for Extreme Affordability here.

Mad Hatter Autonomous Robot
  • When: 2010
  • Team: 4 Mechatronics Engineers responsible for Mechanical Engineering, Electrical Engineering, Firmware Software Engineering, and Systems Integration
  • My Role: Mechatronics Engineer with additional focus on Firmware Software Engineering and Systems Integration
The Challenge

Design and build a fully-functioning robot that can knock off targets as specified by a radio-controlled Target Commander device within three weeks for less than $150.

Mad Hatters

Our team of four created Alice in the Winter of 2010. Alice is a fully autonomous, wall following, PID controlled robot that can knock off targets as specified by a radio-controlled Target Commander device.

For more details on Alice, check out our project website.

Mad Hatter Autonomous Robot Alice from the side

We integrated a variety of disciplines to create our Queen-defeating Alice, including design, electronics, mechanical, and firmware skills.

Learn More

Stanford Smart Product Design Lab

Italian Job Movie Robotic Arcade Game
  • When: 2009
  • Team: 3 Mechatronics Engineers responsible for Mechanical Engineering, Electrical Engineering, Firmware Software Engineering, and Systems Integration
  • My Role: Mechatronics Engineer with additional focus on Firmware Software Engineering and Systems Integration
The Challenge

In eighteen days and with an impossible budget of $150 USD, create a full-functioning, robust, interactive, electro-mechanical portrayal of a scene or image from pop-culture.

Project Mini

With a team of three in November 2009, I created a micro-controlled arcade game based off of the film The Italian Job, complete with driving around a red Mini Cooper and cracking a safe!

For more details on Project Mini, check out our project website.

Italian Job Movie Robotic Arcade Game up close

Using our design, electronics, CAD, mechanical, and firmware skills, we created a fully functioning, fun, and immersive game for children and adults.

Learn More

Stanford Smart Product Design Lab

BMW Head Up Display and Console
  • Client: BMW Research and Technology
  • When: 2008
  • Team: Research team of Psychologists, User Experience Designers and Researchers, Developers
  • My Role: User Experience Designer and Researcher
Overview

Summer 2009, I moved to Munich, Germany to work as a User Experience Design Researcher at BMW Forschung und Technik (BMW Research and Technology). Our ConnectedDrive team was comprised of a diverse group of Computer Scientists, Psychologists, and Designers.

During my time at BMW, I was responsible for Cross-Cultural Design Research and the Design and Research for the Head Up Display, Dashboard, and Center Console On-Board Computer.

BMW Head Up Display HUD Design

Cross-Cultural Design Research

Our goal was to understand how aging societies and growing city size might affect our automotive infotainment design both within Germany and abroad. I researched and analyzed demographic data on aging societies, megacities, and their implication on the automobile and drivers. I also researched the latest findings on augmented reality and how we could apply them to the driver experience.

As the sole Design Strategist, I led the team through Design Thinking workshops and facilitated brainstorming sessions.

Head Up Display, Dashboard, and Center Console

Using our cross-cultural design research as a foundation, we designed innovative interactions, UX, and UI for the Head Up Display, Dashboard, and Cluster Instrument Panel (entertainment and driver assistance functionalities). By conducting quantitative research and usability studies, our designs iteratively improved to achieve our priorities. Specifically, we conducted market research and competitive analysis, card sorting, walkthroughs, task analysis, and eye-tracking with 360 degree dynamic and static driving simulators.

Publications

Our user experience design research on Point of Interest selection was published and presented at the First International Conference on Automotive User Interfaces and Interactive Vehicular Applications (AutomotiveUI 2009) Sep 21-22 2009 in Essen, Germany.

BMW Toggle Strategies for Points of Interest

Toggle Strategies for Point of Interest selection via the iDrive controller

Abstract: The importance of spatial and geo-based information has increased over the last few years. The most prevalent example of this kind of information is points of interest (POI) like hotels, restaurants, gas stations, etc. As cars are made for individual transportation, interacting with geo-based information via the In-vehicle Information System (IVIS) should be possible. At present, state-of-the-art IVIS only permit a list based or center based selection on the map, which makes it difficult to handle a high closeness of geo-based data. In this paper, we present alternative approaches for selecting geo-based data with a multifunctional controller. In our work, visual cues help users predict the selection order. An explorative user study showed potential advantages of our concepts.