Responsive Website Update for Streaming Platform
Project Summary
I led the effort to design and document a fully responsive website for our streaming platform, addressing the lack of accessibility on mobile devices. The goal was to create a seamless, device-agnostic user experience that allowed users to access our content directly from their web browsers without relying solely on the mobile app.
The Problem
Previously, users who visited our website on mobile or tablet devices were unable to view the site or access content. Instead, they were directed to download the mobile app. This created a barrier to content accessibility, reducing user engagement. The objective was to create a fully responsive website, allowing users to access the platform from any device, without the need for the app. During the planning phase, I identified the need for a mobile-specific navigation system, as the existing large-screen navigation wasn’t suitable for mobile use.
The Research
Internal Research
Using data from web analytics, we identified that a significant portion of traffic came from mobile devices, yet those users weren’t able to engage with our content. This reinforced the need for a fully responsive design that could accommodate all screen sizes. I also reviewed the mobile app’s design and identified key components that could be adapted for the web, ensuring design consistency across platforms.
Design Approach
Responsive Design Process
The design process was informed by the component library I had previously developed (see Design System Case Study) which allowed me to design simultaneously for all screen sizes. I used the mobile app components and adapted them for browser use, ensuring that the layout and interactions worked across devices. A mobile-first approach was crucial, as it allowed us to create a tailored experience for smaller screens, while still scaling up to desktop.
Mobile Navigation
The biggest design challenge was creating a new mobile navigation system, distinct from the app’s navigation. I designed a more browser-friendly navigation that fit within the limitations of web usage, considering the lack of gestures like swiping that are common in native mobile apps.
Component Prioritization
On the landing page, we feature a large rotating content carousel to showcase the latest offerings on our platform. This component needed to scale effectively across screen sizes, from mobile to desktop. Ensuring that the carousel maintained readability and functionality on smaller screens was a priority, as this is a primary interaction point for users
Collaboration and Feedback
The new mobile navigation system was the primary focus when gathering feedback from the team. I collaborated closely with the web developer to ensure the design was feasible within our platform’s technical limitations. Once I had their input, I presented the navigation and responsive design components to the internal design team for further feedback, ensuring that the final product met both user and business requirements.
Challenges and Solutions
Challenges
Given the robust design of our existing mobile app, there were few significant challenges during the update. However, we discovered that some design elements initially created for the responsive website could also improve our mobile app’s interface. This presented new opportunities for future enhancements in the app’s user experience.
Solutions
By adapting components from the mobile app and optimizing them for the web, we were able to create a cohesive and functional design for the responsive website. The navigation redesign was a major win, ensuring that users on any device could access content quickly and intuitively.
Final Outcome
Impact and Results
While the responsive website update has not yet been fully implemented, all template documentation, prototypes, and design specifications were completed and handed off to the development team. The anticipated results include increased user engagement, especially from mobile traffic, and a seamless experience across all devices. Additionally, the updated navigation system is expected to improve the user journey, making content discovery easier and more efficient.
Learnings
This project emphasized the importance of designing for multiple screen sizes from the start. By using a mobile-first approach and leveraging Figma’s auto-layout features, I was able to create a responsive website that met both user and business needs. The close collaboration with developers and the internal design team ensured that the design was feasible, efficient, and ready for implementation.