How a global smartwatch development team rapidly upgraded their UX

The customer:

Winning consumer markets means getting there first with flare. One of our wearables manufacturing clients (anonymous by request) wanted to enter the competitive smartwatch market with a bang, delivering features on a low-power microcontroller (MCU) platform wrapped in a user experience (UX) that could compete with the top vendors.

As this was their first smartwatch project, they needed a graphical user interface (GUI) development framework that supported sophisticated UX elements for small screens, while reducing overall development time. Due to the Covid-19 pandemic, they also required support for remote development teams as most of their employees were working from home and did not have easy access to hardware platforms.

The challenge:

The goals of the smartwatch project were twofold:

Meet or exceed the UX of competitive, high-end products on lower-power hardware; and integrate several different features (clock, fitness tracker, media player, etc.) onto one device with a consistent look and feel.

This meant developing a simple, uncluttered GUI that was easy to navigate and had small moments of wonder to delight the user on every screen — often referred to as “flare”.

“We wanted to provide a wealth of information through a simple and sophisticated user interface,” explained the team’s product manager. “Rather than dump everything to the user at once, our design decisions were made with simplicity and refinement in mind, from swipe and menu behaviors to including micro-animations on every screen.”

The team also had the challenge of finding a GUI development solution that supported UX designers and smartwatch developers working from home. The Covid-19 pandemic shifted the way the team worked, with most employees working remotely and access to platform hardware restricted.

The solution:

The Storyboard wearable GUI development framework is a cross-platform environment for designers and developers to work together to deliver rich, vivid UX on low-power MCUs and microprocessors (MPU), used by global smartwatch manufacturers like Zepp Health/Amazfit.

The selection of Storyboard resulted in:

• Significantly reduced effort for the creation of complex UX elements and behavior
• More efficient collaboration between designers and developers across the lifecycle
• Accelerated release of their smartwatch product

Creating an effective smartwatch UX design

The highly competitive wearables market required an extra level of diligence when it came to researching and creating the smartwatch design. With systems like Apple and Android setting the bar for UX expectations, the design team wanted to balance their own brand’s uniqueness against market expectations for screen elements. Giving the watch a “personality” was a key requirement for the design team, so that it looked good in promotions and encouraged users to interact with it as much as possible.

“There’s a lot of individuality that goes into smartwatch design but being different just to be different can ruin you in the marketplace,” said the team’s lead UX designer. “We researched the top luxury brands to see what they were doing in terms of watch faces, screen elements, animations, and more, and used that as the foundation for us to build upon. As we were running on a more cost-effective platform, our UX had to brilliant while also casting a wider net to a broader audience than say, Skagen, Swatch, or Hermes.”

The team also wanted to make the watch as easy to use as possible, eliminating any barriers to understanding display elements and operating key functions. “Nobody went to school to learn how to use an iPhone or iPad and we didn’t want users opening a manual either,” said the lead UX designer. “We chose to use simple icons and animations to provide feedback and designed some watch faces with skeuomorphic principles so users could connect on-screen elements to their real-world counterparts.”

Fitting the smartwatch application onto MCU hardware

The product’s business case hinged on providing sophisticated UX on a cost-effective and power-efficient microprocessor-based platform. Unlike the Apple S1, Snapdragon Wear 4100, or similar high-end hardware, MCU platforms present the challenge of trying to fit rich experiences into ARM Cortex cores or similar, with 2D graphics capabilities and memory budgets ranging between 640 KB to 5 MB RAM.

As is typical with these systems, compromises must be made between design elements and hardware performance. With Storyboard, the team found that such tradeoffs were either not necessary (due to highly optimized Storyboard runtimes) or were identified much earlier in the development lifecycle due to the framework’s preview and testing capabilities.

“One of our first steps was to determine whether the UX design would actually fit onto the platform, in terms of flash memory storage,” said one of the embedded developers on the project. “After using Storyboard’s Photoshop import feature, we could quickly verify that all the screen sizes and layouts would fit into the device’s form factor. Using Storyboard’s Application Footprint Preview, we knew right away that all the layers and fonts in the initial UX design would overwhelm the amount of flash we had. We decided to collapse screen layers and use Storyboard’s glyph export editor to strip out unused font characters to save space without impacting the designer’s intent. We could do all these memory optimizations inside Storyboard without having to get the application onto the actual target hardware.”

An architecture that streamlines development efforts

The team was also surprised at the number of Storyboard features that reduced or eliminated the effort needed for traditional GUI development tasks. “Storyboard’s Rapid Design Import and Iteration Technology allowed our developers to work with the latest design files as soon as they came in without impacting prior development work,” said the team’s product manager. “Once development had the files, they could use the animation tool to rapidly preview and adjust motion graphics, like the wave on the heartrate screen, and validate how it looks with fast deployment on the hardware. On the target, you realize what works and doesn’t work very quickly, and Storyboard helped us mitigate future pain points by getting onto the hardware earlier in the development process.”

Rendering smartwatch graphics more efficiently

Another aspect was in getting high-performance graphics working, as one of the embedded developers explains. “With some of the busier watch faces, we wanted to offload as much rendering as possible to free up the CPU for other tasks. We chose to use Storyboard’s built-in support for VGLite and found that it just worked right away, retrieving images from flash memory and using hardware-accelerated graphics to get the performance we needed. We also made use of Storyboard’s asset export features to automatically store images in raw format with pre-computed alphas, helping reduce render time.”

Remote application development continued with ease

The need for designers and developers to work collaboratively inside the framework was a significant factor in choosing Storyboard. Due to the Covid-19 pandemic, most of the team was working from home with limited to no access to hardware resources.

For designers, the remote working environment made little difference, as they still had access to Photoshop and could upload, review, and refine assets with developers regularly. For development, Storyboard offered the ideal environment as they could import design changes, adjust elements, add backend code, and simulate the GUI application within one workspace.

“Designing and developing within a Covid environment was a challenge in terms of communication between teams but not necessarily with using Storyboard,” explained the team’s product manager. “We had multiple collaborators across time zones and with short timelines — Storyboard’s import process made our designers lives easier and the Git integration helped our developers manage multiple components and versions.”

Successful smartwatch delivery

The smartwatch team was able to deliver a functioning and integrated product in record time, and plan to use it as the platform to create new devices going forward. Based on their experience with Crank Software, the team’s product manager has advice for other smartwatch and wearables developers.

“Find the tools that decouple risk from development tasks, like design changes, adding flare that doesn’t bog down the system, and hardware validation. With something like Storyboard, we accelerated our smartwatch development process by taking advantage of rapid design iterations based on stakeholder feedback and faster testing through the desktop simulator. Supported by the Crank team, we’re opening up new revenue markets and will continue to evolve the personality of our product to meet consumers’ needs.”