Ellentube.com Responsive Web
To design the core experience of the new ellentube.com responsive website across different breakpoints while applying a refreshed brand and visual style
Duration: Summer 2017 (~10 weeks)
Client: Warner Bros., Ellen Digital Ventures
OVERVIEW OF CHALLENGES
Translating the core user experience of the iOS app into a native web experience that stays true to the product principles.
The goal of the ellentube.com redesign was to build on the same product principles and content sections as its native app counterpart, while creating a brand new made-for-web experience designed its particular use cases.
Apply the new Ellentube visual style across desktop, tablet and mobile web components.
In addition to feature parity, the brand new Ellentube visual style was to be applied to the website, including new styles and components created for the web experience.
Understanding Ellen's challenges and opportunities
Traditional delivery models of network TV are dying. Cannibalized content across digital and social platforms is challenging business models reliant on a captive audience. The rise of social media has made the expectations of viewers, and their behaviors change. Audience propositions and business models are all in flux, and all of this needs to be tackled whilst continuing to produce valuable content that will keep their audiences engaged.
The main challenge for Ellen, and their duplicate content destinations, is choosing a focus: Do they utilize social media platforms that follow audiences but relinquish control and financial ownership, or do they create self-owned apps and services where they can own audience relationships, distribution and revenue streams?
Ellen’s unique opportunities to create a wholly owned product lie on their brand, loyal audience and unique content. More specifically:
Evolving beyond broadcast TV by becoming a unified digital hub for their content.
Making content that’s “always fresh” and continues to engage audiences off-season.
Giving audiences easy access to the content they want most.
Previous destinations for content in addition to social media outlets: Ellentv.com and Ellentube.com
Developing User Principles
The web portion of the project started after the iOS app was well under development. The web team’s primary task was to design a web experience that followed overarching user principles developed on the early stages of the project by the iOS team, while catering to web use cases.
In order to de-risk and validate the new proposition of a unified Ellen experience, the team went through multiple rounds of prototyping and concept validation that resulted in findings that were then translated to the following user principles:
Final Designs and Release
The web team (which I was part of) was tasked with developing the core experience of the site, which consisted in sections dealing with engagement, across desktop, tablet and mobile breakpoints. More specifically:
Creating a web experience that puts the Discover section (in which relevant content its surfaced to the user) and Explore section (in which the user can browse through content as they please) at its focus.
A clear navigation model across the different breakpoints, including menus
A global search section
Updated content tiles for web
In addition, my team was tasked with reviewing previous site design versions, as well as ad and error placement.
The new ellentube.com is now live. Here are some final shots of the User Interface.
Some of my individual challenges included:
Explore multiple variations on how the main content sections (Discover+Explore) could be presented (i.e., separate pages, one single page)
Defining a grid system across breakpoints
Explore different visual and function variations for Global Search
Follow brand guidelines established for iOS and apply+update them for web components
WHAT I LEARNED
Surrounding yourself with a team that is obsessed with quality is the fastest way to strengthen this trait.
My team consisted of very dedicated designers with great attention to detail. This made ourselves push each other and ensure delivery of quality down to the pixel. Being part of teams like these reinforces the mantra quality is what truly sets your work apart.
Being responsible for final deliverables, although perceived as tedious, is a proven way to elevate the quality of your craft.
In addition to UX and exploratory UI work, I was tasked to develop, maintain and deliver final production files. This meant ensuring quality across many individual production tasks, such as precision across different component sizes based on ratios, keeping Sketch symbols updated, font styles consistency, amongst other responsibilities.
THE TEAM + MY RESPONSIBILITIES
The team consisted of:
1 Lead Product Designer
2 Product Designers
My responsibilities included:
Reviewing and understanding early strategic and validation work
Gather business, product and tech requirements
Defining UX flows
Maintaining and applying brand style across breakpoints
Present and apply feedback on a weekly basis
Deliver final files for each breakpoint