Every word counts.
nēdl, a native mobile app, allows users to search over 120,000 live radio stations by keyword, song or artist.
OVERVIEW
Case Study - Redesigning the nēdl App to be Usable While Driving
What is nēdl?
nēdl is an app that lets radio listeners search live broadcasts as easily as they search the web - by keyword. It is currently available on iOS and Alexa.
Why is nēdl different?
Unlike other music apps and services, nēdl, through its A.I. technology, has the ability to return search results based on what is being said or played in real time. For example: search for Jay-Z and nēdl will return a list of radio stations currently playing a Jay-Z song.
What's the challenge?
nēdl wants to grow it's user base
but is currently missing out on a
large segment of the radio
listening market - automobile drivers.
What are the obstacles?
nēdl is not safe to use while driving.
Solution
Design "Car Mode", an interface that gives engaged drivers access to nēdl in a safe and enjoyable way.
Original version of nēdl
OVERVIEW
Primary Role: UX Designer
Secondary Role: Art Director and Copywriter
My team shared duties throughout the UX process and took on additional roles as needed. I wore many hats and with my background in art direction and copywriting, I took on those roles and did most of the graphic design and asset production work. Software used: Sketch, Photoshop, InVision, and Google Suite.
We used design thinking and agile methodologies throughout the full UX process, which I've documented in the case study below.
SOFTWARE USED
OVERVIEW
The Process
The UX process is not linear. This case study is arranged in a linear fashion but that's not the full story. Design thinking and agile UX are iterative and flexible.
DISCOVERY
The Opportunity
In-car listening still makes up
a majority of the radio
listening market.
We surveyed and interviewed over 40 people revealing that when they listen to live radio, it’s primarily when they are driving, and that aligns with this Edison Research Report.
In order to grow their user base, the focus must be to make nēdl safe and enjoyable for engaged drivers to use.
DISCOVERY
The Challenge
In general, it's not safe to handle a phone while driving.
The focus of an engaged driver needs to be on driving. Through Heuristic evaluation and observational analysis we identified issues with the current design of nedl that make it unsafe to use while driving, including:
• Small text is hard to read quickly
• Only way to search is to type
• Typing into a text field is
dangerous when driving (and is
possibly illegal)
• May require two hands
• Content and navigation elements
are not quickly scannable
Original nēdl design
DISCOVERY
Problem Statement
nēdl has the core functionality to provide the content drivers want but the current interface is distracting and dangerous.
How might we create a safe, intuitive and delightful way for drivers to discover and play radio content with nēdl?
RESEARCH
Research Results
Key Takeaway:
Most people listen to live radio in the car, a significant amount of them listen in the car exclusively.
Survey was conducted over 3 days with 40 respondents.
Interviews were conducted over 7 days and were conducted in-person with 10 interview subjects. Answers were recorded on audio. Subjects were drivers based in Los Angeles, who listened to the radio and were aged 22-35.
RESEARCH
Features of Mobile Apps Designed for Engaged Automobile Drivers
We wanted to understand some of the best practices from other apps made for use while driving. We learned that simplified interfaces and quick, easy access to information and content are common among apps made to be used in a car.
Drive Mode:
An app that aggregates and simplifies all distracting technologies during driving such as calling, texting, music, maps, and social media and it simplifies the interface while incorporating voice command.
RESEARCH
Primary Persona
We conducted 10 in-person interviews and surveyed over 40 people to develop personas that represents the physical and emotional needs of our target as they listen to the radio while driving.
Linda
College Student
AGE: 22
-
Only listens to radio in the car
-
Always changes station during commercials
-
Chooses stations based on mood
-
Likes a wide variety of radio content
-
Get’s easily distracted while driving
-
Has a daily 1 hour commute to school
"I'M AN AVID RADIO STATION SURFER"
RESEARCH
Feature Prioritization
MoSCoW METHOD: We can now map features to the needs of our persona as illustrated in the journey map.
I chose to use the MoSCoW(Must, Should, Could, Won't) method because it allows me to quickly organize the features I want to include by order of importance.
MUST
-
Incorporate presets
-
Ability to add/edit presets
-
Clear, large buttons
SHOULD
-
Vertical & horizontal view
-
Curated presets
COULD
-
Voice control
-
Day/night mode
-
Swipe control
-
Social connectivity
-
Situational awareness
DESIGN
Initial Sketches
Based on our learnings that there is wide variation in the orientation that people use their phones in the car and nearly everyone uses preset buttons to navigate radio stations, the nēdl app should work in both vertical and horizontal screen configuration and preset buttons should be a key feature.
Vertical Layout: Full Featured Mode - Play and Edit Presets
Global Navigation:
Access all other parts of app.
Create New Preset:
Tap to create new
Current Station Info:
Station name and other relevant info such as current song, time code, and number of current listeners.
Navigate Station List:
Tap or swipe to navigate next/previous station.
Add to Favorites:
Tap to add to favorites list.
Preset Buttons:
Numbered to appear similar to physical preset buttons on a radio but also labeled. Press and hold to edit.
TESTING
Paper Prototype
Highlighted below, usability testing with paper prototypes helped identify problems and led to solutions. We conducted in-person testing and recorded the results on video so we could compare and focus on the most common issues first.
Pain Point:
The interface as we tested it was interpreted more as a static playlist not as a preset in car radio.
Solution:
Don’t call it a preset button, come up with a new, descriptive name - Smart Scan.
DESIGN
Mood Board - Expanding the Visual Language
Based on the needs of our persona to be able to quickly and easily scan and select content, it was necessary to expand the color palette. For way finding, it was also important to make content visually distinct from interface elements. Introducing an “active” color to highlight navigation elements would help our persona quickly and safely use the app while commuting.
Reference: Spotify uses colors to visually separate content from navigation
Reference: Example of active color to highlight navigation
Color Pallete
PROTOTYPE
The New nēdl
Featuring Smart Scans, which are really customized live searches that users can create and edit. All current app functionality is accessible in the global navigation. We also introduced highlight colors to improve visibility. Turning the phone horizontally activates "Car Mode", a play-only mode that has bigger buttons and a simplified interface.
Car Mode
PROTOTYPE
Video Walkthrough
MVP:
Two Modes of Operation
While we started out thinking Smart Scans would be for Car Mode only, it turned out to be a more practical and effective way to listen to the radio, not just in the car. Car mode is simply a focused and safe way to listen to the radio while driving.
Standard Mode
All features available:
-
Play Smart Scans
-
Edit Smart Scans
-
New Smart Scans
-
Scroll to see more Smart Scans
-
Full global nav access
Car Mode
Focused functionality:
-
Play Smart Scans
-
Play Favorites List
-
Voice Control Search
-
Larger Buttons
-
Swipe to see more smart scans
LEARNINGS:
Experience and Insights Gained from this Project
• Managing the demands and expectations of a client
• Acting as a team leader in a design sprint
• The understanding that it's ok to fail because failure provides valuable insights
• Insight: Don't get emotionally attached to a design, it can affect the whole UX process
