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
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.


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.
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.



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
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.






















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




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.

live activities iOS - iteration 8
Android notifications

mode switching V3

Android Wear - home

Android Pairing sheet

watch face tiles
Android notifications

mode switching V4
mode switching V5

Apple Watch notification



mode switching V4
Main screen
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.
Apple Watch OS home screen with tiles
Apple Watch main screens
Android Wear home screen with tiles
watch face tile iterations - Android Wear
Apple Watch riding modes
Android notifications
iOS live activity
Notifications
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.
Apple Watch notifications
iOS notifications
Pairing
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.
Apple Watch pairing
Android Wear pairing
Apple Watch OS switching riding modes
Riding modes
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.
Android Wear switching riding modes