3

SEDR

Overview
SEDR is an underground-online radio based in Chicago, Illinois. Broadcasting an experimental and ecclectic programming agenda consisting of creative and diverse artists. Defying the algorithm.
https://www.sedr.space
Goal
Design and develop the SEDR brand and website. The site features a modular and robust system which allows user logins, interchangeable components, and various modes.
Role
Co-Founder
Design & Development Lead
Team
Nick Ursem
Alex Road
Esli Israel
Eric Lichtenberg
Steven Harris
Mark Claudio
Tools
After Effects
Blender
CSS
Figma
HTML
JS
Jquery
Photoshop
Illustrator
Webflow
0.1
Current SEDR homepage
IMAGE
“Quality, relevant content can't be spotted by an algorithm. You can't subscribe to it. You need people - actual human beings - to create or curate it.”
Kristina Halvorson, Content Strategy for the Web
0.4
Mobile Footer
IMAGE
0.5
Mobile Programs
IMAGE
0.6
Mobile Program Page
IMAGE
0.2
Custom Resident Page
IMAGE
0.3
Resident:Conversations
IMAGE
CONTEXT
SEDR (see-der) is an internet radio station and community-driven platform dedicated to promoting sound, art, and culture. The mission for SEDR is to share non-commercial and forward-thinking sound through intentional and curated programming. The platform is built specifically for artists, allowing them the freedom to play and schedule what works for them, rather than a 24/7 streaming service. The art direction for the site was to create our own operating system, allowing for more custom personalization and a GUI reminiscent of old programming/command line interfaces. Music exploration and discovery were paramount, but ease of access for navigation/playing were primary targets. (Figure 0.3,0.4,0.5)
0.7
Modular Logo Grid (6x6)
IMAGE
0.8
Modular Logo Variables
IMAGE
1.0
SEDR(DOT)SPACE001
IMAGE
1.1
SPACE_AVAILABLE
IMAGE
1.2
SEDR(DOT)SPACE002
IMAGE
1.3
System Focus
DIAGRAM
“We build our computer systems the way we build our cities: over time, without a plan, on top of ruins.”
Ellen Ullman
DISCOVER & DEFINE
In order to cultivate exploration and artist discovery, we had to pinpoint our main priorities for user experience. We wanted SEDR to be designed as an operating system and to be organic with growth and updates. The platform had to be designed with the artist in mind but without loss of function as a radio station.We wanted to avoid creating a radio station for the sake of creating a radio station. We wanted to provide a different outlet to the algorithmic induced streaming services of the modern age, nor did we want to control what and when mixes were being played.
CRITICAL COMPONENTS
RESPONSIVE DESIGN
Operating system
All Devices
Familiar UI
PROACTIVE
User Updates
User Feedback
Bugs
COMMUNITY-CENTRIC
Chat Enabled
IRL Community Events
Conversations
Inclusive
PERSONALIZATION
Custom Profile
Resident Login
Dropbox
OPEN FORMAT
Live Stream Enabled
Audio and Video
Playback Archive
2.0
Critical Components
DIAGRAM
2.1
RESPONSIVE TYPE SCALE
DIAGRAM
2.2
Color Modes
DIAGRAM
EXISTING RADIO AUDIT & RESEARCH
Before we could begin designing the user experience, we took a look into various internet radios across the world, gathering both visual and experience data. We gathered the pros and cons of each of the site features and reflected upon the ones we felt were vital for a modern user experience.

We categorized our focus into two modules: primary needs and secondary cosmetic wants. The primary needs focused on the essential functions we needed to become a radio station while the secondary were mostly cosmetic and there to support our operating system narrative.
2.3
Research Audit
DIAGRAM
GOAL
NO.1
PROVIDE A SPACE FOR SOUND, ART, AND CONVERSATION
Ultimately, we wanted to provide an experimental online radio  station that allowed the artist the freedom to play what they want, when they want, and how they want. We wanted to help provide an experience for residents to play at their pace and focus on more intentional programming, especially at a time when content is being delivered at an alarming rate.
Real-time archive, updated every 24 hours
Avoid creating 24/7 programming
GOAL
NO.2
PUSH COMMUNITY DRIVEN SOUND
We found that most radio stations used real-time chat for users to interact with live dj’s and felt it was vital to include in the experience. The chat shows real-time users online and allows you to login and interact with the community.
Custom chat with login abilities
Accessible on every page/at any moment
GOAL
NO.3
LIVE STREAM CAPABILITIES
The ability to both live stream and play pre-recorded sets felt like a vital component to a modern day online radio. We didn’t want to limit the creativity the artists could bring to either medium.
Create 2 channels for live stream and playback/featured programs
Navigation encourages exploration and easy playback
GOAL
NO.4
STAYING TRUE TO RADIO AND ARTISTS
Despite not having much direct user/audience data, we grouped the pathways to our experience in two categories: the casual listener and the regular returner. We didn’t want to be too experimental with our structure/user experience and wanted to preserve the general radio/player experience.
Familiar experience to play and stream programs
Navigation encourages exploration and easy playback
2.4
High level goals/analysis
DIAGRAM
USER EXPERIENCE
With our focus set on delivering the primary needs of our user rather than being tied down with KPI’s and performance analytics, we wanted to deliver a familiar radio experience that was built around organic exploration/discovery.

We wanted a genuine experience that made the user feel like they were really logging onto a different part of the internet, or even using a different operating system. In order to produce that, both visual aesthetic and user experience had to be optimized and purposeful.
USER EXPERIENCE FLOW A
WATCH/LISTEN/VIEW PROGRAM
USER EXPERIENCE FLOW B
GENRE/RESIDENT EXPLORATION
3.1
DESKTOP LAYOUT - 10COL - 36px MARGIN - 24px GUTTER [AUTO]
IMAGE
3.2
FIGMA-HI-FI MOCKUPS (PROGRAMS)
DIAGRAM
HIGHLIGHTS
With the user experience and primary goals outlined, we knew we had an opportunity to deliver a personalized and modern online radio station. We outlined a few feature highlights such as: control panel navigation, live stream focus, chat, resident profile, resident login, conversations, and genre exploration with full search capabilities.
4.0
Current Homepage
VIDEO
4.1
Control Panel Navigation
VIDEO
OFFLINE:ONLINE
The live stream in both audio and video format is vital to our user experience; both for listeners and artists. On the developer side, I wanted to make sure that first: the experience was viable and second that it was modular and adaptive.

I found that while Mixcloud offered the best for audio and keeping an archive, live streaming/embed was not an option. After enough research, we concluded Twitch was the best option, but the default offline screen for Twitch took away from the experience and we wanted to make sure we could have our own.

I wanted two different screen states for offline vs online and wanted to make sure those changed automatically pending the scheduling of each program. I set conditions for each div section, letting them change pending the scheduling for each program/date.
4.4
CH1 Screens - Offline vs Online
IMAGE
4.5
SEDR MINIPLAYER - Live stream assets for residents
IMAGE
4.6
Custom real-time chat
VIDEO
4.6
Resident Profile Page
VIDEO
4.6
Resident Login Page
IMAGE
4.7
Menu -> Login
IMAGE
4.8
Login Mobile
IMAGE
REFLECTION
SEDR currently operates at www.sedr.space, broadcasting programs regularly, featuring 15 residents across the US and open to the public for viewing/listening. We're currently operating on version 4.5 and our next updates include adding an editorial section for interviews and playlists.

In terms of design and development, the one main concern is not being built on a react or next backend - especially in terms of growth as we continue to host on Mixcloud. We'd like to upgrade using react and being able to host a more functional and seamless playing experience.