How Crank helped Stages Cycling gain ground in the cycling market

The customer:

Stages Cycling, manufacturer of indoor bikes, cycling computers, cycling power meters, and other cycling products.

The challenge:

Regain market share by modernizing their Dash cycling computer, significantly enhancing its functionality and user experience - all without inhouse fitness embedded GUI development expertise.

The solution:

Crank’s embedded GUI development framework, Storyboard, and professional services team, helped accelerate the design and development of the hugely successful new Stages Dash GPS cycling computer.

Background

In 2017, Stages Cycling found themselves at a crossroads.

Their first generation LCD cycling computer, the Dash, was rapidly becoming outdated as the mobile device category exploded with smart technologies, with powerful features and rich, colorful graphics. Smartphones and fitness trackers were changing the way people lived, and most certainly defining their expectations of portable devices.

Stages felt its capabilities were strong, yet renewed interest in the category from larger companies, with dramatic new features, was growing. Furthermore, increasing demand for high resolution, full-color graphics, mapping and navigation, and external connectivity meant a technology update — both from the hardware and software side — was inevitable.

“Everything about the competitive space suggested we needed to review the hardware capabilities, and up our game on the graphical user interface,” said Jim Stemper, Stages Cycling’s Director of Program Management. “Our customers wanted a compelling, yet smart way to view and interact with their training data, and we were more than capable of delivering this.”

To achieve this vision, they knew a significant investment in the GUI was required.

More GUI power yet smaller footprint was necessary:

Recognizing that a new processor was required to support this experience, Stages decided to move to the NXP i.MX 6SoloLite, pairing it with a Linux-based operating system. The 6SoloLite appealed to Stages because of its low power requirements, integrated power management, and powerful graphics acceleration — ideal for a cycling computer where the correct weight and power balance are essential.

With no in-house developer resources available for this project, they turned to NXP who referred them to Gold partner, Crank Software, their embedded GUI development framework Storyboard, and 10+ years of expertise in developing embedded GUIs on NXP processors.

“We weren’t completely sure how much battery the new features were going to use, so we looked to save power at every turn,” Stemper said. “The certainties Crank showed about Storyboard-built GUI apps — their small RAM footprint and low power consumption — were important factors in its selection.”

Selecting Crank Software as their fitness embedded GUI partner was a decision made early on in the project so that the GUI could be underway at the same time as backend development.

“The availability of contract embedded development and design assistance through Crank was also very attractive,” said Stemper. “Having Crank commit their experts meant we didn’t have to worry about the graphics. Instead, we could just focus on the backend and hardware.”

Stemper also cited Storyboard's free trial, competitive pricing, and integration with design software like Adobe Photoshop and Sketch, as important factors in its selection.

Improving the UX with vivid, cycling-specific maps

With Crank’s GUI experts on board, screen designs covering the full functionality of the new Dash were built in a short amount of time in the Storyboard platform and fully optimized for the NXP i.MX 6SoloLite target. Meanwhile, Stages’ own project team was able to focus on building the backend functionality.

One of the biggest challenges Stages encountered was rendering their existing GPS map technology into a seamless presentation within the new GUI. Each map was written to its own frame buffer that was separate from that of the GUI.

“Integrating our maps so that they appeared seamlessly in the new GUI was a critical success factor for the Dash’s success,” said Stemper. “But Crank’s development team worked closely with our developer who wrote the map application and it worked out very well. Now, the maps look like they're integral to the system, which was a big win for us.”

Faster iteration on design change, and rapid testing on desktop

Abid Esmail, a Senior Embedded Software Engineer at Stages Cycling, was hired a year into the Dash project. He says being able to make changes to the GUI app, and then being able to test it on the desktop before deploying it onto the target, were big advantages.

“I can write test frameworks and test on my Mac before I deploy, using the virtual machine I have for Linux,” he said. “When I then test them on the target, they virtually look the same — giving me the ability to truly visualize the performance and interact with the interface much faster than otherwise.”

Esmail cited Storyboard's rapid design import and iteration technology as being extremely valuable. Developers can re-import GUI design files and swap out older assets for revised ones quickly, without leaving the workspace. Existing assets are automatically located and presented alongside the new assets allowing developers to quickly assess, accept, or reject the proposed design changes in a time-saving manner.

“Storyboard makes it really easy for us to make ongoing changes to the look of the interface,” Esmail said. ”We can re-import updated Photoshop files into the app, and Storyboard magically reconnects everything. It’s a huge time saver, affording us the time to invest in our end-users experience."

Repurposing one GUI into two different-sized versions

To accommodate different consumer preferences, Stages wished to release two different screen sizes: a 2.75” display and a smaller 2.25” display. While there were some underlying technical differences, it was integral that they shared the same GUI look and feel. Repurposing the original fitness embedded GUI application to work on a second screen was much easier with Storyboard as their tool of choice.

“Two different display sizes posed technical challenges, but we were fortunate as Storyboard made it easy to reuse and implement the same GUI experience across both,” said Stemper. “We got there much faster with Storyboard than we would have if we had tried it alone.”

A great baseline for future model upgrades

One of the biggest benefits of Storyboard and the development assistance Stages received from Crank Software, according to Stemper, is the reusability of the app they’ve built.

“Now, we have a great GUI app to build upon for future Dash updates, or create new products entirely, which will mean we can save on much of that work in the future,” he said. “With Storyboard, we can continue to test design ideas and refine our graphics without worrying too much about the development work that used to be involved.”

Mission accomplished; UX expectations exceeded

Stages went to market with their new Dash cycling computer in June 2019. Not only have sales far exceeded those of their first computer, the new Dash caught on with professional cycling teams. A Stages Dash M50 rode with Slovenian cyclist Tadej Pogačar and other members of UAE Team Emirates when Pogačar won the 2020 Tour de France.

With the hardware changes and GUI improvements, Stemper believes they successfully upgraded from the original Dash and met their business goals. Today, they’re extremely pleased with the look and responsiveness of the new Dash models, while customers applaud them for its ease of use.

“People won’t have patience if your GUI isn’t as fancy or responsive as their smartphone,” says Stemper. “That's a huge challenge for a small company that doesn't have an army of designers and developers. The Storyboard framework and support of Crank’s engineers helped us bring a brighter, simpler, and smarter Dash to market, at a much faster pace than we could have alone. Ultimately, it helped us attain our position as a leader in the category.”

Plans for future projects

Determined to build on their success with the Dash, Stages Cycling is now looking at applying their Storyboard-built GUI application on a variety of other computer projects of the future, also exploring Crank’s downloadable GUI demo library for inspiration.

"We're building an e-bike page based on a demo. Our designer has done some really neat work using Crank's example,” said Esmail.