app and ics.jpg

4moms self-installing infant car seat

Project Type: Integrated connected product experience

Product Details: https://www.4moms.com/carseat

Company: 4moms

One of the projects that I've worked on at 4moms is the self-installing car seat, which uses robotics to automatically level and tension the base, and sensors to provide real-time monitoring through the app. This was a large project that spanned many teams and years, and we are currently working on a spinoff startup company for the car seat business. Much of the newest work is still in progress, but below I’ve highlighted several aspects of the current product with which I've been directly involved.


1. App Feature: Ground Angle Measurement 

The 4moms app connects to the self-installing car seat via bluetooth to provide real-time installation instructions and helpful videos for the user, then issues installation commands to the robotics in the car seat base. 

One of the installation steps involves using the app to take ground angle measurements (using the accelerometers in the phone itself), and sending those measurements to the base so that it can compensate for them during the automatic leveling process. 

This was a task that users initially had a great deal of difficulty with, because it involved a series of compound instructions, involving proper placement and orientation of the phone within the vehicle during measurements. This was further complicated by the fact that users had to receive instructions via the app while also physically manipulating and rotating their phone in space.

We approached this problem by breaking down the compound instructions into individual steps, and storyboarding possible app graphics and animated transitions. Finally, we conducted guerrilla-style usability testing at a local park to ensure that the final instructions were intuitive and understandable. 

Screen Shot 2017-10-16 at 12.37.02 AM.png

Screen Shot 2017-10-16 at 12.40.51 AM.png

2. User Research & Large Scale Field Testing 

After the development of both the car seat and the app were complete, we conducted an extensive series of usability testing and field tests to ensure that the product would be usable once we released it into the wild. The scope of testing included both embedded and app software, as well as overall product unboxing and usability with real families and babies. I helped to organize and coordinate all final field testing, with over 80 different users, over the course of 4-5 months.

Field test designs:

  • Users completed the installation process, under direct observation, in their own vehicles. Users were evaluated for accuracy, and were interviewed about their perception of the experience.
  • Users were sent home with complete boxed car seats, beta versions of the app, and were instructed to install the car seat in their own vehicles to the best of their ability. Users returned 2 days later, and certified technicians inspected the installations for accuracy. We also interviewed users about their perception of how accurately they performed.
  • Users took the car seat home and used it as their primary car seat for their baby for one month. Users provided periodic feedback through remote surveys and a final in-person interview.

3. Firmware Update: Algorithm for Text Drawing

After the initial release of the car seat, we continued to make updates to the car seat firmware to add additional features and fix minor bugs.

However, in order to actually change the content on the screens, we had to come up with a way to draw text on the screen in code.

As an extended collaboration, I worked with one of our robotics / embedded software engineers, Suraj Joseph, to create a custom text-drawing algorithm which allowed us to add new screen content to the existing product through a firmware update. This enabled us to make drastic improvements to the user experience of the product.

 

1. Concept and background

Suraj initially figured out that he could draw custom text on the car seat base screens by using tiny individual bitmap images for each alphabet character, and position them on the screen based on x, y coordinates. 

This approach solved one of our main limitations, which was that we could only transfer extremely small files in a firmware update, since they had to be sent from the app to the car seat base over a bluetooth connection.

However, this text-drawing approach posed several challenges:

  • Font: It used just a generic system font, not our 4moms brand font. 
  • Rasterization: There was no greyscale rasterization around the edges of the letters, which made them look coarse and jagged.
  • Letter spacing: It used just a uniform letter spacing distance, whereas a properly designed font should have varied spacing between characters to account for the "side-bearing" of each glyph.

In order to solve for this, we developed our own miniature font library for our 4moms brand font.

Screen on the 4moms infant car seat base

Screen on the 4moms infant car seat base

TOP: generic system font, no rasterization, uniform letter spacing BOTTOM: 4moms brand font, rasterized, proper letter spacing

TOP: generic system font, no rasterization, uniform letter spacing

BOTTOM: 4moms brand font, rasterized, proper letter spacing

 
Glyphs aligned to baseline in vector format (top), then exported to rasterized bitmap format (bottom)

Glyphs aligned to baseline in vector format (top), then exported to rasterized bitmap format (bottom)

2. Rasterized glyphs

I started by creating a set of bitmap characters, in our branded font, with proper greyscale rasterization around the edges. We decided to limit ourselves to only upper case letters A-Z, numerals 0-9, and Spanish characters, in two fixed font sizes.

I started by creating outlines of the glyphs in vector format, then exported to rasterized format. This ensured that all characters maintained consistent alignment along the baseline grid.

 
Measured letter spacing between pairs of glyphs, using the flat edges of the capital letter "I" as a default reference.

Measured letter spacing between pairs of glyphs, using the flat edges of the capital letter "I" as a default reference.

3. Letter spacing

I tried unsuccessfully to find an existing letter spacing matrix for our 4moms brand font. Instead, I decided to attempt to create my own by deriving the algorithm that digital fonts use to calculate letter spacing distance based on the side-bearing of each glyph.

Since the upper case letter "I" of our Century Gothic font has flat edges on both sides, I used this glyph as a measuring tool to find out how much spacing Illustrator automatically added or subtracted when positioned to the left or right of each other glyph in the character set.

I eventually came up with a table of letter spacing distances for each pair of characters in our set. This measurement was in units of "ems," which enabled us to calculate a fixed pixel distance based on our screen resolution and font size.

 

 

 

4.Screen layout and design specifications

For each new screen we wanted to generate, we defined an existing image to use as the background. We then covered up any text or areas of the image we wanted to hide with black rectangles. Finally, we defined the x, y, position coordinates of each new string of text we wanted to add.

We were able to define all of these specifications in a CSV table, which made it easy to import into the software.

The final result enabled us to produce new screens, with custom text that was indistinguishable from the original Photoshop-designed content. 

We used a CSV format to import the custom screen design specifications into the software.

We used a CSV format to import the custom screen design specifications into the software.