Design context-driven flow for cross-device subscribers
Personalized Listening Experience to boost Freemium Reach
M-BYTE is an electric SUV concept car from Byton. The main highlight of the model is the Digital Lounge feature which delivers a seamless media experience to the user. For example, users can stream music in their car's center display as they do on their mobile phones.
Our team was tasked to boost the freemium reach and build a unified boarding flow that would enable cross-device subscribers to engage instantly when they first try on the car. In addition, our strategy was to ensure consistency in the context of onboarding, account management, and the music playlists.
I wireframed the initial music player and account onboarding flow to focus on core interactions dramatically. I also produced interaction mock-ups for user testing. Additionally, I conceptualized the live-music feed for the passenger-facing screens.
Client
BYTON EV (link)
Role
Digital Product Designer (Infotainment / EV)
Team
Product Manager, Software Architecture Engineer, Frontend Development Engineer, Digital Product Designer,s and External Partners.
Timeline
2019.02~2019.05 , 2 MONTHS
Due to NDA, some details are obfuscated, and the information does not reflect the actual features shipped but only to showcase the decision-making style for the designs.
Explore
Problem Space
In-vehicle infotainment (IVI) is a collection of software modules that provides entertainment functionality to the car. At BYTON, we keep the momentum going for our users, from the moment they turn on the key and throughout the entire journey.
Our music streaming apps are customized SDKs. Each streaming music app comes with different launch requirements and sign-up steps. So we need to integrate them with our system.
"How do we engage our users during onboarding?"
"How do we boost the freemium reach?"
My team worked on re-thinking the onboarding steps in three directions: Focus, Declutter, and Immersive Listening.
Focus
Need a way to spotlight on the feature
When the music app starts from scratch, users see a landing page with four media apps (Radio, Spotify, QQ, Himalaya), which are four equal-sized round buttons.
What we want
Guide the user to try on the streaming apps instead of just opting for traditional radio channels
Declutter
Dramatically simplify the onboarding flow
Too many existing products ask the user to complete log-in or set-up before they can actually start listening.
What we want
Use this first point of contact to engage our user. During the app's cold start, the freemium mode will be active. Existing user can scan QR code to log-in with no typing.
Immerse
Remove any disruptions and align with the entire vehicle control system
"Immersive Listening Experience"- where the screen renders itself into a full-panel music visualizer and with one click on the play button mounted on the steering wheel the music starts playing.
What we want
To maintain user engagement through the app’s onboarding flow we remove any disruptions that might cause the user's to stop and abandon the process.
Solution
Let the users own their landing page playlist.
Working together with the marketing team, we brainstormed on what a unique experience would be like. We wanted the user to feel that they are entering their personal digital lounge, so they should always see a curated playlist. not some random song generation.
With that in mind, we defined the core guidelines:
1/ Connecting the brand experience - By default, if the user has not logged in, a curated playlist from Byton's marketing campaign would be shown.
2/ Remember the user's last selected media source- The user's last used music app would be reopened automatically when they launch the music app or restart the car.
3/ Pro-active Display of the Personalized Feed - Once the user logged in, the album cover collage area would display a personalized music feed pulling from the user's own account.
We iterated on several versions of the user story and renders some in the wireframes.
(below is a work-in-progress sample)
Define
User Story,
Use Cases
User Interface Design
Interaction
Designing for multi-modalities and split screens
Byton's car comes with a voice, gesture, and touch screen. Each channel carries an individual function path, which ties back to a particular user story. Because they are unique, there is no way they can be compared side-by-side, so we box them together as series of happy routes.
The hardest part is to design for a product not yet fitting into any category in the existing market. You have to WOZ your way through most of the time.
Execution
Designing for contextual interfaces
Help the user make choices swiftly
Emphasize glanceability, avoid too many even-sized buttons to help the users make the choice faster. Signale the user to focus on the picker with pre-selected item groups.
Let the user find what they want right on top of the list with smart sorting
Playing the first song insight is better than always finding that one song in a long list on a large screen again and again.
Auto-play saves users from that awkward silent moments... but let the user opt-out if they want.
When users dictate "Show me my daily feed," they expect the action to go straight to the playing screens and have the top-items picked, and automatically start playing. In addition, users can opt-out of this function completely.
Micro-moments in a driver cockpit
We have engineers built out the prototypes so we can dissect every action into more than 20 micro-moments:
Pre-engine starts, post-engines starts, the vehicle begins to slow down, the vehicle begins to speed up, vehicle put to a brief halt, vehicle in full stop...
Outcome
Project Takeaways
Read More
During my project, I learned much about the nature of in-car UX. I carried out small-scaled user research with a selective base to make sure the logic flows were sufficient for the demonstration to the public.
Takeaways from the project :
User Expectation is changing as the numbers of smart car owners rises up
A connected car or smart car opens up doors to reimagine a user's life in the third-space era, as users are used to accessing services from a much larger ecosystem.
Customization is key to the user's first impression of the "smart car".
Users expect the app to have full access to their personal account, listening history, and playback preferences.
Users prefer a plain simple playback function in an app but want control over their list sequences.
The visibility of playback functions is a make-or-break deal, users do not spend time browsing for advanced features during on-roads.