Frontier Smart Technologies is a pioneer in connected audio technologies and the market leader in DAB/DAB+ and smart radios. They power over 50 million devices worldwide and offer a wide range of chips and modules to leading consumer electronics brands.
Frontier’s app OKTIV allows users to control their smart radio or connected speakers from a mobile device. Key functions such as turning on/off, selecting the audio source, selecting the audio content, playing/pausing, setting the volume and accessing presets can all be manipulated remotely. The app is also white-labelled and in use by leading radio brands.
The challenge
Frontier approached our team to overhaul and improve OKTIV’s user experience (UX). As a customer-facing product, it was essential that users enjoyed a delightful experience as they interacted with the app. The project required several considerations that our team had to work with. First, the app was bound by the connected device’s capabilities and needed to be able to support radios with different modes and configuration options. Second, the radio controls have to work seamlessly, with the added ability to play music from sources such as Spotify, Deezer, Amazon, DAB, FM and Internet radio.
Our approach
OKTIV required a rigorous UX redesign to create a dynamic journey that was enjoyable to use across Android, iPhone and tablet devices. In order to establish an understanding of the current user experience and set the foundations for the design phase, we conducted a UX audit. This included the following activities:
- Workshops with key stakeholders to dive deep into the product, its context and goals
- User observations to understand user satisfaction across key functions such as; navigation, typography, buttons and interactive areas, use of colour, ease of use, efficiency, learnability, error proneness and satisfaction
- Usability evaluation conducted by our experienced UX team to review the designs against a set of best practice principles
- Competitor analysis of the current UX, styling and functionality of similar apps within the market
- A ‘power user’ survey was conducted with frequent users of the app to gather additional feedback on the user experience
The above then informed the creation of user personas to represent a typical user (or set of users) and user stories (which are short, simple descriptions of a feature from the perspective of the relevant user. These are presented as short statements – ‘As a [user type], I want to…, so I can…’.)
This evidence-led approach enabled us to provide accurate, actionable recommendations based on real user insights. Our strategy and design team then worked together to propose improvements to the user experience that would meet technical and user needs.
Once a foundation had been set, our team set to work on creating a robust solution to remedy the problems identified. We defined the app’s information architecture (IA), which is representative of the app’s navigation structure and where features can be located within menus and sub-menus. This is an important step as it fundamentally supports the findability and discoverability of information for users. We tested the proposed IA by conducting a card sorting activity with Frontier stakeholders and users.
Next, user flows were developed to correspond with the information architecture and user stories. Mapping these flows visually allowed our team to identify the wireframe pages required. The proposed flows included: Connecting to a smart radio, showing first use tutorial, browsing for content, playing content and changing settings.
The functionality of the app was then mocked as wireframes. These wireframes covered all parts of the app and served as the foundation for further graphical design development. The wireframes were made into an interactive prototype so that pre-build user testing could be conducted. The goal of such testing was to guarantee the user interface was as well designed as feasibly possible before investing in real code development. Issues with user interfaces discovered during testing were corrected and re-tested in the prototype.
The final phase, the UI implementation, is where the product comes to life. The design team generated two concepts for the main pages, with Frontier selecting an immersive, futuristic, creative direction with a captivating blue colour palette. Adding colour and style to the application. The output of this stage was a style guide created in the cloud application Figma.