App stroller view.jpg
 Moxi stroller, copyright 4moms

Moxi stroller, copyright 4moms

4moms Moxi Stroller App

Project Type: Connected App Design

Company: 4moms

The 4moms Moxi Stroller has generators in its wheels, and power on board, to illuminate headlights and charge your phone as your walk. It also has an LCD display which shows your speed, distance, and calories burned. I led the UX design for the Moxi Stroller companion app, including concept development, wireframes, experience prototyping with interactive prototypes, and usability testing.


1. Design Requirements

The Moxi Stroller app was intended to enhance the user's experience of the stroller, by providing a live dashboard while in use, and a trip history page with logs of past trips.

  • Live Dashboard
    • Trip Data: Speed, Calories, Distance
    • Control headlights: Off, low, high
    • Battery: Level (%) and charging status
  • Trip History
 LEFT: Inactive dashboard, CENTER: Active dashboard, RIGHT: Trip history  Images courtesy of 4moms; final app screens created by visual designer

LEFT: Inactive dashboard, CENTER: Active dashboard, RIGHT: Trip history

Images courtesy of 4moms; final app screens created by visual designer


2. Concept Development

We wanted the app to convey a tangible representation of the time spent with one's baby. Unlike a personal fitness tracker, a stroller may be shared among several caregivers, and the baby's experiences and growth are the common thread between all of them.

We were constrained in scope in that we couldn't save large amounts of user data within the app, such as photos. We also could not create separate user accounts in this iteration of the app. Instead, we came up with an abstract representation of trips using bubbles, and gave them tangible qualities by allowing them to move across the screen with gravity.

 Abstract representation of trips as bubbles, with tangible weight conveyed by gravity.

Abstract representation of trips as bubbles, with tangible weight conveyed by gravity.

 Transition animation: Dashboard to trip history screen

Transition animation: Dashboard to trip history screen

 Trip History Screen: Sizing specs for data visualization

Trip History Screen: Sizing specs for data visualization

Initially, another feature of the product was going to be the ability to adjust the rolling resistance of the generators, to either generate more power with more effort, or less power with less effort. The feature was ultimately eliminated from the final product before launch. In addition, we wanted to convey the relationship between walking speed and power generation to the user. Below a certain minimum threshold, the generators do not create any power at all. Above this threshold, higher speed corresponds to higher power output.

 Conveying the relationship between generator rolling resistance and power output

Conveying the relationship between generator rolling resistance and power output

 Representation of "threshold" speed required to start charging generators, and speed vs. power output

Representation of "threshold" speed required to start charging generators, and speed vs. power output


3. Wireframes

Several iterations of wireframes, ultimately culminating in the final screen designs, are shown below. I was responsible for all wireframes, and a visual designer was responsible for the final designed screens.

 Moxi app wireframes, earlier explorations

Moxi app wireframes, earlier explorations

 Moxi app wireframes, later iteration

Moxi app wireframes, later iteration

Final Designs

The final screen designs were created in collaboration with a visual designer. Screen specifications are annotated below in Sketch.

 Final annotated screen specifications, laid out in Sketch

Final annotated screen specifications, laid out in Sketch


4. User Testing

I conducted several rounds of user testing, first starting with an experience prototype, to understand how the experience of the app would feel in relation to the experience of using the product. Since we did not yet have a working prototype of the stroller LCD, I created an interactive mockup using Processing, ran it on an Android tablet, strapped it to the stroller handle, and controlled it remotely using a Bluetooth keyboard (to simulate the user's walking speed). I also created an interactive app prototype, which enabled the user to attempt to interact with both simultaneously.

We discovered early on that it is highly distracting, and also ergonomically difficult, to attempt to interact with the app while pushing a stroller. We also did not want to create emotional distance between the parent or caregiver and the baby. Therefore, in the final app design, we simplified the active trip dashboard, and focused instead on the post-trip and history dashboards.

moxi storyboard copy.png

Stroller with LCD, and app used simultaneously

 Interactive mockup of the stroller LCD screen, running on an Android tablet

Interactive mockup of the stroller LCD screen, running on an Android tablet

 Round 1 Usability Feedback

Round 1 Usability Feedback

 Round 2 Usability Feedback

Round 2 Usability Feedback