Radiospoon
Radiospoon project is a website designed to centralize the radio's resources for its listeners. It focuses on providing easy access to the live stream, news, blog posts, the stream schedule, and merchandise, with particular attention to making the radio player accessible and user-friendly.
İstanbul, Turkey
Dec 2022 - Mar 2023
Radiocast
Challenge
Designing the user interface for the Internet Radio project presented a series of creative and technical challenges. One of the key hurdles was maintaining consistency across various elements while working with a limited color palette. Finding a third primary color that harmonized with the dominant white and black tones was particularly difficult. Additionally, we needed to apply filters to images to ensure they blended seamlessly within this minimalist color scheme.
Accessibility was a core focus throughout the design process, especially ensuring that the player—the heart of the experience—remained visible and easy to access at all times. On the Radio’s Schedule page, the constraint of limited horizontal space became a significant challenge, pushing us to create a tailored layout for narrower screens without sacrificing functionality.
To ensure a user-friendly experience, we conducted an in-depth analysis of competitors’ websites, extracting common design principles that align with established user habits. Balancing this with the brand’s guidelines, which demanded a postmodern and innovative aesthetic, required careful planning and execution to deliver a unique yet familiar interface.
Process
Competitor Analysis
The first step in the process was conducting a thorough competitor analysis. This involved studying various existing internet radio platforms to identify common design patterns and user expectations. By breaking down the user interfaces of competitors, we were able to pinpoint strengths and weaknesses in their approaches. This research was crucial for ensuring that the design not only met industry standards but also introduced innovative elements that would set the project apart. Key insights from this analysis guided the early stages of design and helped shape the overall user experience.
Branding
With a solid understanding of the competitive landscape, the next focus was on branding. The brand guidelines called for a postmodern and innovative look, which required careful consideration of typography, color schemes, and visual elements. Balancing the need for a fresh, forward-thinking aesthetic with the established brand identity was a challenge. The branding phase involved selecting a color palette that complemented the minimalistic black-and-white theme while introducing subtle accents that added depth without overwhelming the user. Consistency was key, ensuring that every element aligned with the brand’s vision.
Wireframing & Prototyping
Once the branding direction was established, we moved on to wireframing and prototyping using Figma. I focused on creating both the wireframes and interactive prototypes, including animations. This stage was all about translating ideas into tangible layouts and dynamic experiences. The primary goal was to ensure the player remained accessible at all times and that the overall navigation was intuitive. As the wireframes evolved into polished prototypes, we fine-tuned the visual details and interactions, leading to a well-rounded design.
Coding with React
After finalizing the design, the focus shifted to implementation using React. This phase involved turning the visual concepts into a fully functional user interface. React’s component-based architecture was particularly beneficial in maintaining consistency across the design. To give the administration full control over content, we integrated a CMS that allowed for easy management and hosting of resources. Ensuring that the interface was responsive and adaptable to different screen sizes, particularly for the Radio’s Schedule page with its limited horizontal space, was a key priority during this stage.
User-Acceptance Test
The final step in the process was the user-acceptance test (UAT). This phase involved gathering feedback from real users to identify any remaining issues or areas for improvement. UAT was instrumental in validating the design choices and ensuring that the interface was user-friendly and intuitive. The feedback collected during this stage led to minor adjustments that enhanced the overall user experience, confirming that the project met the expectations of its intended audience.
