Inside the Design of the Boosted Boards iOS App
It’s an exciting week for us at TM with the release of a new iOS app we helped design for Boosted Boards.
If you’re unfamiliar with the company, Boosted makes electric skateboards with light and powerful motors. Designed primarily for personal transportation and the challenge of the last mile, the boards have the capability to effortlessly scale hills and reach speeds of over 20 miles per hour. What’s remarkable about Boosted is it’s not just a skateboard, it’s an electric vehicle with its very own operating system.
The Task
Boosted approached TM to help design an iOS app for their boards. Its number one priority was to give its riders the ability to update the board’s firmware directly from their smartphones as new features are released. Until now, users had to bring in their boards to Boosted workshops to receive them. Our task was to help transform Boosted Boards into an electric vehicle with a truly mobile operating system.
Design Process
A critical part of the design process for any project at TM is taking the time to understand the company, product and its community of users. We approach each project with humility and an open mind because even as design professionals, there is a tremendous amount we can learn from every one of our clients. And although we act as design consultants, we behave much like full-time members of the team. We believe in each project we decide to take on and work towards making it a lasting and ongoing relationship that continues well after the final deliverable.
For Boosted, that meant we interviewed ten team members (everyone from the founders to engineers and customer support) to truly understand where this product came from and their motivations.
It also meant Steph and I started from scratch and became Boosted Board riders without any previous skateboarding experience.
We attended Boosted community group rides and workshop sessions to meet other riders. We heard firsthand what they loved about their boards, how they used them, their pain points and what they’d like to see from the company in the future.
Spending that much time getting to know a product and its stakeholders really helped break any assumptions we made. We found that many Boosted riders didn’t have any previous skateboarding experience and were surprised to learn just how many users ride their boards for their daily commute, as opposed to leisure activities. We learned that virtually no one was reading the user’s manual and there was an opportunity to rethink how that information is communicated.
Taking a step outside the Boosted community, we sought to discover other analogous experiences on the market that connect personal transport with smartphone devices. Although there aren’t too many existing applications on the market, we decided that what Tesla and Anki Drive have done with their vehicles and connecting them to mobile devices might prove to be a valuable learning experience. While Anki is a children’s toy and Tesla is an automobile, they both have magical apps that augment their real world product experience.
Our time with Boosted product engineers gave us a deep appreciation for their world. They helped us understand the capabilities and limitations of what they had built, and those conversations, along with seeing the many raw iterations of their product in person, helped inspire our own design process and seeded many new ideas. It was also a sharp reminder that designing physical and digital products is ostensibly the same. It’s experimental and in either scenario, you are designing for human interaction.
We also learned about the Boosted team’s affinity for the Honda Super Cub, first designed in the 1950s. Equipped with the simple technology of a four stroke cylinder engine, it went on to become the most produced motor vehicle in history and is largely credited as being the vehicle that took motorcycles from a niche market to a mainstream audience. The Boosted team sees the same opportunity and potential for what they are doing with the electric skateboard as a personal transit vehicle.
This combination of research and experiences helped us shape and understand what the app needed to look like and how it needed to make its users feel. It also helped us narrow down what features are most valuable to riders for the first version of the application.
Brainstorming Sessions
After deciding on what features would make the cut for the first version of the app, we explored how we might accomplish our goals using How Might We (HMW) statements and classic IDEO brainstorming techniques.
Examples of HMW statements included:
How might we facilitate seamless firmware updates?
How might we make learning to ride a board simple and delightful?
The Power of the Sketch
We are huge believers in the value of analog sketches to quickly produce and communicate ideas and mockups before taking it to the pixels. We’ve found that this initial time defining and distilling what we need helps us to avoid wasting precious hours on something we won’t end up using.
The sketches are also a handy platform to receive initial feedback on, so we shared our sketches with the Boosted team to involve them in the design process early on.
After that we moved on to wireframes, detailed UX flows, edge cases tappable prototypes and speccing out each element of design for the software engineers.
Receiving this valuable feedback from the Boosted team helped us tighten up our focus. We decided that the app needed to communicate Boosted Boards as a premium product. It had to feature lightweight and friendly design that differentiated itself from the action sports aesthetic. The Boosted team sees itself as a transportation company, and the design needed to reflect that.
Next, we were ready to commence visual inspiration and exploration through color palettes, typeface, iconography and photography.
Visual Explorations
After more rounds of feedback we arrived at our final deliverables.
So, What Made The Final Cut?
Version 1 of the Boosted Boards app gives users the ability to:
- Update a board to the latest firmware to add features and fix bugs.
- Select a ride mode (Beginner, Eco, Expert or Pro)
- Track mileage and other stats and compare them with other riders.
- Learn how to use the board safely with in-app tutorials.
Here’s a look at some of the screenshots of the app in action.
The Future
Although the first version is live, we continue to work with Boosted so that we can support all the new features and developments they want to bring their riders.
We are only at the very beginning of seeing more physical products designed with internal mobile operating systems that allow the product to improve through the download of new features and learning from how thousands, or even millions of people are using products.
We feel incredibly lucky to be working with such an talented team with ambitious visions for the future of personal transport. This is just the first step in a long journey for Boosted Boards and we are excited to share more with you as soon as we can.
-Shaun Modi and Steph Bain, Co-Founders and Partners at TM, a design firm specializing in UX, UI and service design. Follow us on Twitter, @wearetmsf.
