Note: Section is still being written & truncated.
Introduction
Originally fundraised in a Kickstarter campaign in Q1 of 2017, the Delphin was designed from the ground up to be a waterproof, audio streaming, micro-tablet. It was innovative in its use of Android and a touch screen, letting it use modern streaming services like Spotify and Amazon Music. By March of 2017, the campaign had reached its Kickstarter goals, and the device was released to the public almost two years later, Q4 of 2018 to mixed reviews.
Brand: Underwater Audio
Project Goal: Improvement of Delphin’s User Experience
Summary: The story the Delphin device, the current state of its user experience, and steps taken to improve the users experience.
Team: I was the only UI/UX Designer working directly with two software engineers, the head of Marketing, and the CEO.
Responsibility: User Research, Testing, Persona Development, Interaction Design, Prototyping, Visual Design, UX Design, UI Design
Tools: Sketchbook & Pencil, Google Docs, Photoshop, Figma
Delphin Micro-Tablet UI/UX Improvement
The Challenges of Innovation
While the product worked as advertised, there were some major quality of life issues that were overlooked in its design. All of these problems arise from the device running an almost stock version of Android OS on a 1.56 inch square screen. The keyboard, while technically working, was designed for a much larger phone screen, making using it for data entry a war of attrition. The interfaces of the streaming applications were also not optimized to run on a small 1:1 aspect ratio screen, which makes the text and the buttons in these applications much too small.
A more innovative solution that the software engineers at Underwater Audio developed was screen mirroring via a smartphone. This solution fixed the issues of navigating the streaming applications like Spotify because it changed the aspect ratio to that of a normal phone. This can also be used to better type on the standard Android keyboard, however it is not a pleasant user experience to pull out your phone, connect to your Delphin device, and use your phone to change anything on your device. What else could be done to make this device more usable? This is where I came in.
These were just a handful of the issues that led to the lukewarm reception. Users love the device once they get it set up with their apps, but hate having to interact with the device if they need to change anything. To address the challenges of navigating the small screen, Underwater Audio started packing in a fine point tablet pencil, but this was only a temporary (and expensive) fix.
The TL;DR
The Problem
Third party applications not optimized for 1:1 aspect ratio small screens.
Stock Keyboard, not designed for small screen
First time setup takes much to long to complete
Users don't like using the device.
The Process
Analyzed existing market and develop personas
Analyzed user feedback/reviews to identify
Identify key features that would solve these problems
The Solutions
Addressed first time startup length
Designed a custom keyboard optimized for small screen
Built our companion app to optimize third party app experience.
My Work Begins
I was hired at Underwater Audio in 2021 specifically to address the Delphin’s user experience. Users love the device once they get it set up, but the process of setting up the device was a major hurdle for all users. My task as a user experience designer was to investigate the current state of the Delphin and determine the best way to address the issues given the current hardware limitations, and give it the best chance possible to thrive and to improve overall user satisfaction. The problem is that I was the first and only User Experience Designer to work with Underwater Audio, so I had my work cut out for me.
🏊
Identifying our Users
While it is certainly possible that younger people would find value in, and use Underwater Audio's products, an overwhelming majority fall into the low impact workout category. This means that our average user is more likely to be hard of sight, have issues with fine motor control, and suffer from arthritis; the design had to be inclusive.
With this data, I created a page of personas that touch each of these key points; ranging in age, sex, ethnicity, and socioeconomic background. I then worked with the CEO, marketing, and sales to hone in on two primary personas that represent our customer base. As a result of these conversations, we find…
The Market
In order to grasp who I was designing for, I first had to see who was buying and using our products. To achieve this, I worked with the CEO and marketing lead to aggregate the sales data. Using this sales data, I was able to infer a lot about our customer, such as age, education, income level, and marriage status. Additionally, we need to consider who would want to be listening to music or an audio book while they are swimming, which eliminates any kind of social swimming. This means people swimming laps in a pool are much more likely to be using our product.
While I can’t go into specifics about this data, I can say that the average customer was over the age of 34, with the largest number of customers being between the age of 45 and 64. This data is reinforced by the story behind Underwater Audio’s founding, Todd Walker. He is an older gentleman who injured his back and needed a low impact way to exercise, so he began swimming laps. Todd’s story is hardly unique, with most doctors and physical therapists recommending water activities to their patients as a means to exercise.
Margaret
A 61 year old woman suffering from osteoporosis and some back pain and wanted to stay fit without the risk of hurting herself. She is less tech savvy, but knows how to use her mobile phone.
Gautam
A 46 year old man who is overweight and suffering from joint pain who needed a low impact way to work out. He is fairly fluent in tech and is quick to adapt.
While we could have a much wider range of personas that represent our user base, I decided to keep the number of personas to those that needed to be represented most. The last thing I wanted to do was create confounding views. I can not go into too much more about Underwater Audios personas, they were vital in determining what we needed to make to accommodate their needs, and by extension, the needs of our users. Every decision now will have to be reviewed through their perspective; the “Margaret” test if you will.
Plan of Action
Now that we had our personas, we could begin identifying the most outstanding problems that they will encounter with the software’s user experience; triaging the most critically needed user experience updates to the highest priority. The three key problem areas that could be addressed are as followed…
👋
First Time Setup
The first time setup process forces to user to use the Delphin’s screen & keyboard in order to enter data. Additionally, there was a step where the user is asked to select what applications they would like to download to their device. If the user chooses to download everything, they are forced to wait at least 25 minutes while all of the applications are downloaded & installed. During this time, the screen must remain on, and device plugged in.
⌨️
Keyboard
A major issue was the stock keyboard that came packed in with every Delphin. This is the primary reason that each Delphin comes included with a stylus, and one of the biggest factors leading people to giving up on their device during first time setup. From the moment you set up your device, you are forced to use something the way it was not meant to be used. This feature would help the first time setup process and many other interactions.
📱
Mobile Companion App
A companion smartphone application can address the issues that arise from the Delphin’s screen size & aspect ratio when browsing 3rd party applications. We can use the users own mobile phone to fix this problem with screen mirroring. We can also use the mobile application for text entry on forms if users are more comfortable with a standard keyboard, or would like to paste text from their device.
👋 First Impressions are Everything
If we fail to amaze our users in our presentation and first time setup process, we have very little hope of retaining that user in the long run. As mentioned above, the first time setup process requires the use of a non-optimal keyboard and locks the device for at least 25 minutes. In addition to this, the original first time setup has relatively small text and small buttons which will need to be addressed in the redesign.
To help improve this experience, I wanted to give the user the option to set up their device on the phone as an alternative to relying on the device. The above user flow chart shows what this process would look like. This would address the issue with the font on the screen being too small for those with vision issues. I also wanted to improve the first time setup process on the device itself, increasing the size of the font, buttons, and improving the keyboard (details on that below). This would make the setup process much more accessible to more of our customers.
User Flow Diagram
The one challenge with this however is when we apply the “Margaret” persona test to the first time setup. Unlike Gautam, Margaret is not as tech savvy, meaning that we need to rely on familiar design structures and instructions/tool tips to tell/show Margaret more about how to use her device. Underwater Audio also has an excellent in house help line to assist with customer service.
I also wanted to break the user out of waiting for the software to download and drop them into the Delphin as soon as possible, setting the downloading and installation as a background process. The downside to this is that we have to communicate to the user that certain apps are not available yet, but at least it gets the users learning the devices interface much faster.
Additionally, I wanted to analyze the existing first time setup process and make sure each step was necessary, or if we could simplify some of the processes. For example, what if someone wanted to skip the first time setup process all together, what would that look like? Or are there any processes that we can do automatically in the background during the setup process? I worked directly with our software engineer team to answer these questions.
Wireframe Sketches
The mockup above shows the first time setup process if the user chooses to do so exclusively on the Delphin device. It reuses much of the existing first time setup process, such as the timezone selection and others. The primary variation comes in the option to setup via your mobile phone, and background download/installation of the applications. The other addition is the customization training session on the home screen and tips designed to teach users about their device. These tips can be accessed at any time in the interface.
The above image is the mockup of the mobile version of the first time setup. The only main variation is that the Delphin will display a QR code to download the companion application and a process of connecting the Delphin to the mobile phone. This process of connecting to the phone also eliminates the need to specify a timezone. This process is a little more difficult to start, however is much more familiar to more tech savvy users like Gautam.
⌨️ A Keyboard that Saves Thousands
Perhaps the largest usability issue that could be addressed with a software solution is the keyboard. The existing keyboard was the stock version that comes packed in with every version of Android OS. A redesigned keyboard would have to be designed and optimized for a small screen. In order to make the keyboard usable, we need to make the buttons at least 10 mm when it is displayed on screen if possible. Buttons on the edge of the screen have some extra wiggle room in this as the screens bevel extends beyond the edge of the touch screen, making a phantom touch area. Using this, I could create a tab structure that didn’t take one third of the screen.
The Sketches above show my work in figuring out what characters exist and need to include in the application. I was a big fan of Apples keyboard which features a tap-and-hold alternate text selector. This is an especially great way to minimize clutter while maintaining full functionality. The problem is telegraphing that to the user. So, the concept of the Alternate indicate came about, which is a small triangle at the top right corner. The last feature was to mono-type the characters in the keyboard so that they each have an equally large selection area (Something that is off in the mock-up below).
This design was tested in the office and users understood its function immediately. Perhaps the biggest benefit of an optimized keyboard is that it eliminates the need to pack in a stylus with each Delphin, saving Underwater Audio thousands of dollars. This is a new feature that benefits both Margaret and Gautam.
📱 Everyone Could Use a Companion
The final piece of the puzzle to address the aspect ratio and screen size issue with 3rd party applications. I also wanted to provide a more comfortable first time setup experience through the companion application, which will be made for both iOS and Android devices. The first task requires coming up with a visual design for the mobile version of the companion application. My goal was to incorporate Underwater Audio blue into both the light mode and dark mode versions of the interface.
A) Active Button
B) Inactive Button
C) Text Box and Edit Button
D) Drop List displaying current selection
E) Drop List showing dropped
F) Toggle Button example
G) Inactive item in a list
H) Active item in a list
The above visual design was used on another Underwater Product that I will include in my portfolio at a later date. I wanted to create a universal visual design across all Underwater Audio products, so it was important to get this nailed down.
The main body of the application only requires a few functions; an automatic screen mirroring connect upon open, a way to scan a QR code for legacy screen mirroring, and a virtual keyboard if you wish to use a standard keyboard for data entry. My primary goal then was to automate the connection process whenever possible, and provide easy access to key features by moving the device interactions to the bottom of the screen, in thumb territory.
The above sketch shows some basic sketches & wrapping my head around the user flow. I then took this created wire-frames, and applied the visual design to the application and created the mock-up below.
My primary goal with this applications design was to simplify the types of interactions that could take place; automating the connection to the Delphin device whenever it is on, leaving the text entry and screen mirroring function one click away. The two ways users can tether their Delphin to their phone is either via first time setup, or via QR code on the Delphin device it’s self. That will mean that once app is connected, every additional feature to address both Margaret and Gautam’s issues of navigating third party applications.
Conclusion
Adding these features created an all-in-one solution to enhance the experience users have with their Delphin, taking care of the final limitation experienced by our users. While it would be ideal to have the hardware designed in a way to never resort to these measures to make the product usable, I feel that this software and user experience solutions will at least make the Delphin a usable product for the foreseeable future.
Planning for the Future
These fixes really only scratch the surface of the issues with the Delphin as it exists. Ultimately, the screen is too small to reliably run third party streaming applications, and the aspect ratio is off. The product would need a complete revision with a standard phone screen in order to be a viable option in the future. Another issue that I neglected to address are the physical buttons on the device being both too small and require too much force to press. This is especially bad considering who our market is. Going forward, any physical buttons will need to be quality tested to make sure they are both easy to press, and easy to understand.
For now, the only way for the Delphin 1.0 user experience to improve is to conduct user tests, review reviews, and continue to iterate. As for me however, this is where my time at Underwater Audio came to an end