Jan Ostrówka · Mellow Boards

Overview

In this case study, I will take a look at the user experience improvements I made to Mellow Boards' mobile app and wearable UI during my 2016 internship with the company. The project, which lasted for one and a half months, aimed to enhance the overall user experience by introducing wearable integration for Apple Watch and Android Wear, as well as implementing budget-friendly improvements to the existing mobile app. Through this case study, I will explore the decision-making process and the final solutions that I implemented.

Expertise

UX Research, Design

Platforms

iOS, Android, Watch OS, Android Wear

Year

2016 (refreshed in 2022)

Duration

1.5 months

Software used

Adobe XD, Figma, After Effects

See it live

Mellow App

↗

Redesigned app in action

TL;DR

The Mellow Boards app was a good first iteration, but lacked a glanceable UI to quickly access critical information. I redesigned the app to provide an easy-to-use and visually-guided interface, including battery level, range, top speed, ride distance, and current speed. User testing revealed the importance of simplicity and visual cues, with requests for home screen widgets and real time notifications. I finalised the design, including the pairing flow process for connecting the watch app to the phone app on both iOS and Android versions.

Apple Watch interface

Android Wear switching riding modes preview

iOS live activities

Client

The Endless Ride is more than just a tagline for Mellow Boards GmbH, it's a promise to deliver reliable, high-quality electric skateboards that provide a truly endless riding experience. Mellow Boards prides itself on using the latest technology and materials to create electric skateboards that are not only durable, but also offer a smooth and enjoyable ride. I am still riding my very own Mellow Board to this day, which is a testament to the brand's commitment to quality.

The endless ride

The current Mellow Boards app for managing the Mellow Drive electric skateboard is a good starting point with easy-to-use navigation and riding mode switch features. However, the app lacks glanceability and doesn't offer alert notifications for low battery or board disconnection. Not showing the current speed also hinders riders' safety.

Time-consuming to access information

required a lot of effort to find / look at the right information

lacking information regarding the current speed

Process

In order to design an effective solution, it was important to understand the needs and pain points of electric skateboard riders. To gather this information, I conducted user interviews, tests and competitor analysis. The results of this research provided valuable insights into riders’ expectations.

methodology visualisation

comparing
available features

finding common

interface patterns

finding common

interface patterns

finding common

interface patterns

finding common

interface patterns

learning from mistakes

and successes

learning from mistakes

and successes

learning from mistakes

and successes

learning from mistakes

and successes

1/7

Benchmarking

In order to understand current industry standards and practices, I benchmarked 7 apps that were either direct or indirect competitors of Mellow Boards. The purpose of this benchmarking was to identify common patterns and approaches in displaying vital information, such as distance and speed, in a glanceable manner. This helped me to make informed decisions and provide a solid foundation for the design of the solution.

1/7

Ride - track your eSK8 rides

The first app analyzed in the benchmarking section is "Ride - track your eSK8 rides". It provides an efficient and straightforward way to track essential information about electric skateboard rides, including distance, speed, and battery life.

familiar representation
of range and speed

hardly readable battery level

good contrast for outdoors

frequent refresh
of primary data

high contrast
for outdoor visibility

too much space
wasted on brand logo

lack of range information
only percentage

intuitive range
visualization

overflow of information

familiar representation
of range and speed

accessible mode selection

toooo many sections
absolute overflow

overflow of information

contextual notifications

accessibly sized
action buttons

gamified notifications

simple, readable

hierarchy of information

simple, readable

hierarchy of information

simple, readable

hierarchy of information

simple, readable

hierarchy of information

familiar representation

of core information

familiar representation

of core information

familiar representation

of core information

familiar representation

of core information

good visual communication

readable information hierarchy

informative notifications

good contrast for outdoors

informative notifications

gamified interactions

familiar representation

of numbers

familiar representation

of numbers

familiar representation

of numbers

familiar representation

of numbers

12:41

always display current time

22 kmh

display realtime speed

8 km

show remaining range

allow switching modes

Key insights

The benchmarking process revealed several key insights that could inform the design of the new Mellow Boards app. First, users expect the watch app to always display the current time, given its primary purpose as a wearable device. Secondly, displaying the remaining range of the electric skateboard in a more meaningful unit (i.e. kilometers) was deemed important. Thirdly, it was found crucial to include the ability to view the current speed, allowing riders to maintain a safe and appropriate riding speed. Finally, users appreciated the ability to switch between different riding modes, giving them greater control over the skateboard's performance.

Wireframing

From wireframes, prototypes... to testing

To evaluate the usability and effectiveness of the initial prototypes, I conducted user testing with a small group of electric skateboard riders. The goal of this testing phase was to identify any issues or challenges with the prototype and gather feedback on potential improvements. The testing process involved tasks and scenarios that aimed to simulate real-world use cases for the app.

Key insights

Simplicity and easy access to information is vital

Users prefer to be guided by visual cues, such as colors

many requested watch face widget

"I really appreciated the simplicity of the app. It made it easy to quickly check my board's stats without getting bogged down in unnecessary features."

Beginner skateboarder

~128 km

"The color-coded visual cues were a big help for me, especially when I was trying to check my speed and range while riding. It was much easier to glance at the app and know what I needed to know."

Intermediate rider

645km

"I think it would be really useful to have a home screen widget that could show me my board's stats at a glance. That way I wouldn't have to open the app every time I wanted to check something."

Expert

+1000km

Finalisation

After multiple iterations and testing, I have combined all the components into a final design that is easy to use and glanceable for users of the Mellow Boards app. The final design presents critical information about the electric skateboard such as battery level, range, top speed, and ride distance in a clear and simple manner.