Company:
Smith.ai
Duration:
2 months
Role:
Business Analysis, Research, IA, Content Design, UX, UI
Team:
Michael Claus (Engineer)
Challenges
Redesign landing page for a more intuitive and natural experience
Implement content that allows listeners to discover new music
Fashion a simple and readable weekly timeline
Relocate chat room and live stream component
Overview
During this 2 month sprint, I was tasked with improving SutroFM’s landing page and article content layout in order to improve listener experience. SutroFM’s main goal as an online radio station is to broadcast knowledge, history and talent of the Bay Area to the world.
Problem
SutroFM is looking to restructure and simplify its landing page, IA and content in order to create an experience that is natural and learnable to the current and future listener base. Listeners are feeling overwhelmed and confused when interacting with SutroFM’s landing page, due to a busy and information heavy layout design.
Solution
We believe that by designing a learnable and organized landing and music recommendations page with a natural flow, we will increase listener engagement on SutroFM. A usable website and restructured article content will enable SFM’s listeners to get comfortable and invested with Sutro, thus paving a path to increased website activity.
Research
Research revealed that listeners are looking for a narrative behind the music. Listeners understand that finding new music is a journey, with a process that tells a story about the person searching. Currently, Sutro FM only presents music to listeners without the option to explore the website and find new music on their own. We chose to shift the focus towards discoverability by devising content and layout with the research in mind. Listeners would now be able to find out more about music while feeling represented and connected to what they choose to listen to.
Trend identification
4 main trends were prevalent throughout our researching journey.
History
Listeners want to know more about the history of rave culture
Inclusion
Interviews suggested that there is not enough QTBIPOC representation within SutroFM
Identity
Listeners feel comfortable when listening to stations they identify or are already familiar with
Discovery
People who listen to online radio stations enjoy finding out about new music
“Values being exemplified in music is really important to me.”
Anonymous listener
Information architecture
Before transforming our insights into designs, I created a sitemap and restructured the primary navigation. I chose to rename pages and organize content so that listeners could naturally discover and interact with new musical content.
Updated primary navigation
Key:
Design choice navigation
Old navigation
Updated navigation
Schedule
Archive
Feed
Donate
About
Home
“Shows” is changed to Archive as the word is more literal for listeners
Schedule is kept as is since it is a familiar term to listeners
Recommendations is given a page so listeners can find previous posts easily
Feed is included in the home page
Donate directs visitors to the updated “About” page
Schedule
Shows
Recommendations
About
Content design
In order for SutroFM to increase its listener activity I designed a music recommendations recurring post that showcases the music that is shared, posted and discussed by friends and staff members of Sutro FM.
Recommendations preview link design
Recommendations post layout design
Style guide
Our design system was meant to be usable and readable, while distinguishing itself from other online radio stations. I chose variants of black, grey and white with a shade of purple to highlight important actions and information. In order to add to Sutro’s sense of identity, I decided to change the color highlight every other month. SutroFM’s audience has shown that they enjoy websites imbued with identity. Changing colors is one minimal way an online radio station can achieve that. Arial is kept as the main typeface as it is a system font for bootstrap, which is the framework the developer is using for SutroFM.
H1 Heading
H2 Heading
P1 Paragraph
P2 Paragraph
Paragraph text - Pellentesque condimentum imperdiet massa eget. Semper id egestas sapien, iaculis. Ullamcorper fermentum sed mattis lobortis lobortis. Morbi at eu, consequat lacus eget interdum mollis et mauris.
Link Text
Navigation
Typography
Recommendations preview content
Lorem - Ipsum
Submitted by Author X.
Button
Landing page analysis
When ideating solutions, I analyzed the landing page thoroughly. A quick usability and learnability analysis was enough to uncover SutroFM’s weak points. Research dictated that listeners were unsure of where to go. Most people who listen to SutroFM know where to go because they tried hard enough to find the live stream and chat room component. I quickly realized that our solution needed to be easy to understand for newcomers to SutroFM.
Hero redesign
To keep listeners informed I designed a header containing a condensed version of the daily schedule. Additionally, we decided to include gifs made by local visual artists that would play within the header. This would allow for a greater connection between SutroFM and the community.
Video of the the updated landing page
Takeaways
My time with SutroFM informed me that people listen to music because they connect with it on a deep personal level. I was reminded that a great product can have so much more value if a deep level of empathy and understanding is given to projects ranging from simple to complex. Doing so allows a Great product to connect with its users at an emotional and intentional level while still providing high value.
Upcoming case study
AI pronunciation tool with Smith.ai
AI
B2B
B2C
Product Design