This project was to rethink the CBS web video player page to provide an improved user experience for browsing and discovering video content. Envisioned a new approach where users could have quick access to the full library of CBS shows and video clips without needing to dig through long carousels or deep link in and out of show pages.
Role: UX, UI and Prototyping
Make it easier for users to navigate and discover videos.
Streamline organization of shows, episodes and video clips.
Increase viewer immersion and retention within the video player experience.
Current Site Structure
User flow path of current CBS live site from Shows Catalog to Show Page to Video Page. User research presented multiple opportunities to simplify path to and from shows and video content for a smoother, more immersive experience. Objective was to rethink the Video Page so that users could view show content while simultaneously browsing other videos as well as navigate to other shows without leaving the player itself.
Merges site navigation for CBS Shows, Episodes and Video alongside quick access to All Shows and the global site. This approach creates a digital video room where the user can watch any video they choose while staying within the player experience.
All Shows Navigation
Users can browse full library of CBS shows while viewing videos. Alphabetical auto-scroll tool makes this process quick and easy. Clicking back button returns user to current show page.
Exploration of a side-panel menu to combine video browsing and expand navigation to all CBS shows within the video player experience. Initial concepts utilized a single button dropdown list which would open up the video categories for each selected show.
Video list icon in upper right corner opens side panel scroll presenting episodes of current show.
Show Content Menu
Each show presents its own menu list of video content. Here users can quickly jump to different sections.
Users select 'All Shows' from menu then click on the first letter of the show name to auto-scroll to their selected show.
Mobile Video Browsing
Users choose video category from show menu. Selected video plays above sub-navigation bar so users can watch while browsing.
Mobile Show Browsing
Having the alphabetical show navigation on mobile devices significantly minimizes scrolling work for users.
“I feel like it's easier to navigate with video episodes and clips displayed on the side rather than having to scroll the full page and lose the player view. I prefer being able to watch a video while browsing other videos.”
Show Video Menu
User testing uncovered room to further streamline navigation by surfacing high-use categories to top level and simplifying dropdown menu. Arrived at a 4-button menu architecture for CBS Show navigation and content filtering. When users select Full Episodes, dropdown menu presents the Seasons list. With the Video tab selected, dropdown presents the Clip Category list. The All Shows tab pulls in CBS Shows catalog with an alphabetical navigation used to autoscroll names by letter.
Video Menu Flow
Users can read episode detail by clicking info on show cards. Sub navigation adapts to the selected Show's menu items. In this instance, the Full Episodes tab presents 8 Seasons of NCIS Los Angeles and the Video tab presents sub-categories of Clips, Previews and Behind the Scenes.
Video browse panel layout and functionality carries into the mobile platform. Users can play video in portrait view while still browsing.
After multiple rounds of user testing, the show menu bar was modified to lead with Full Episodes, Video Clips and Season selector. All Shows button placed as a global link at top right corner. Show pages open with key art photo and description.
Episode detail is displayed under each playing video while in the browse view format. Users can also click the info button on episode cards for a description dropdown.
Based on consistently positive user testing results of this Show Navigation feature, it has been engineered and deployed on the production CBS site starting with the mobile platforms.
Built in Proto.io, this prototype focused on the desktop and tablet experience. As we went through user testing rounds, the design evolved each time to streamline the user flows and information design.
Video Clip of Prototype
CBS Artist of Tomorrow
CBS Artist of Tomorrow is a special web series that shines a light on upcoming music superstars as part of the GRAMMY Awards. This project aimed to present the Nominees alongside their sponsoring GRAMMY musicians through video, editorial and a new interactive voting module to engage their fans.
Role: UX, Prototyping
UI: Amanda Fong
Make voting competition process fun, easy and quick to use.
Elevate engagement through storytelling videos of artist interviews and musical performances.
Optimize experience for mobile devices as site traffic will be primarily driven through social media.
Exploring ideas for how to present the Artist of Tomorrow event, nominees and their sponsoring GRAMMY artists. The challenge was to find a balance of how much information to provide while keeping things clear and simple. Beginning thinking on ways to create an easy and fast voting tool.
Artist of Tomorrow site is structured into three primary sections, Nominees, Vote and Video. This provides a simplified experience for visitors as well as streamlined flow that facilitates navigation.
User Flow - Nominees Page
This flow serves to introduce visitors to the musical artists and the grammy artist who nominated them through video and editorial. Next is to promote the voting competition and get users participating.
User Flow - Artist Page
Once on the Artist Page, visitors can view video performances, vote, learn more about the new artist and their grammy sponsor as well as link to the other nominees.
Mobile Layout Ideation
Exploration of mobile experience and how it would introduce visitors to the Artist of Tomorrow series, the Grammy artist nominated musicians and voting competition.
User Flow - Voting Slider
Once Product Management decided to offer multiple votes for users to apply across all three artist, a new solution was required to make this as straight-forward and easy for users as possible.
Vote slider enables quick method for user to apply votes for their favorite nominee in a single swipe. Users can choose to split their 20 daily votes total between multiple artists.
Final design for mobile site focused on four page types, Nominees Introduction, Voting, Artist Bios and Video.
Voting page received 95% of the event site traffic.
Page views grew by 295% Year on Year.
Visits increased 142% Year on Year.
Chose Framer to accurately simulate a functional vote counter and remaining votes indicator. User testing feedback helped refine design down to a single floating action button to submit votes as well as a bottom navigation menu to link through the site sections.
Video Clip of Prototype
CBS GRAMMY Awards
The GRAMMY Awards is an annual special televised on CBS. This project explores ways to draw online viewers into the event’s Live TV streaming experience through CBS All Access. New thinking on the website looks at enhancing content discovery and user engagement.
Concept Exploration: UX, UI
Build upon GRAMMY Awards Live TV streaming to introduce new customers to CBS All Access.
Rethink navigation structure to provide fast direct paths to visitors' favorite musical artists and award categories.
Create a multimedia hub where users can watch the live stream event, view highlight clips and photo galleries.
Looking at options for structuring the CBS GRAMMYS home page, musical categories, and individual artist pages that would serve as media content hubs for top nominees.
Nominees Page Ideation
Exploring solutions to provide users with an efficient options to quickly browse as well as search for specific GRAMMY nominees. Users would be presented with live updated award status, music videos, photos and editorial associated with a particular artist.
Categories and Photos
Continued refinement of ideation on category page structure. Concepts featuring nominees for each category with on-hover artist detail. Photo gallery ideation for both desktop and mobile formats to provide easy browsing with scrollable grid and photo zoom views.
Favorites and Video
Taking a look at creating a customizable page where CBS subscribers can tag their favorite artists and track their progress throughout the GRAMMYAwards Show. The video page features a side panel that serves both for multitask browsing as well as a streamlined sign-up flow for CBS All Access.
Covers seven sections including CBS Grammys Home, Nominees, Categories, Video, Photos, News and VIP personalized hub. The CBS All Access streaming experience presents a dynamic media room focused on promoting subscriptions through a time limited access to the live event's videos and photos.
GRAMMY Live Stream
Home page leads with GRAMMY Awards Live TV promo followed by top content sections such as Nominees, Red Carpet and Latest News. Video page presents a new approach to the subscription sign-up process with a side-panel overlay during the free timed Live TV trial.
User Flow - Nominees and Categories
To make it easier for visitors to find their favorite artists and groups, an alphanumeric navigation tool is presented. Once on an Artist's Page, users can browse their Grammy nominations, music videos, photos and news.
For category browsing, a tiled page displays all of the genres with associated award listings on-hover. Clicking on these cards takes visitors to that specific music genre page where they can see all artists nominated in each category and link to their videos.
Nominees and Artist Pages
Nominees page organized in alphabetized sections with navigation bar for quick browsing by name. Artist page serves as their hub with videos, photos, news and nominated awards. Awards status updated live during GRAMMY event.
Wireframes showing how the category page is arranged and displays specific award category listings on-hover. The music genre page presents nominated artists for each award as well as links to their associated music video and a button to follow this artist throughout the night for award notifications.
Visualization of visitor watching live stream with sign-up panel active. Step One is simplified to name, email and create password with social account sign-in option.
Users continue through the subscription 3-step sign-up process ending with order confirmation. During the timed Live TV trial, users have full access to all content.
User Flow - Video and Photos
To provide a more immersive live stream experience within the video player, users can jump between the live feed broadcast, backstage cameras, view highlight clips and join in the social media conversation. Additionally, visitors can browse photos from the red carpet and live stage photos once the awards begin. Users who sign up for MyCBS can tag and build their own list of videos and photos.
Videos and Photos
Users can browse the events videos and photos as they are posted. Subscribers have additional ability to build their own gallery of favorite videos and photos.
Live Camera Views
Users can view 3 Live Camera options, Main Stage, Red Carpet and Backstage as well as latest highlight clips.
Users can browse through galleries capturing the GRAMMY Awards from the Red Carpet, on-stage performances, award moments and backstage pictures.
Project to introduce licensed Movies to the CBS App for streaming devices. UX work focused on how to present Movies within the existing app structure and how the search tool could be improved for browsing and discovery.
Role: UX, UI, Prototyping
Stimulate user interest and engagement with introduction of Movies.
Design movies page to provide glanceable information while browsing.
Shorten the path to searched content and improve instant results.
Home Page promotes CBS movies with a full-width video marquee.
Page leads with slideshow of featured movies. Navigating down page brings up movie category sections. Content detail displays on hover.
Displays official movie poster with detail and description overlaying a key art scene. Scrolling down brings up trailers and clips carousel.
Video Clip of Prototype
Developed interactive prototype in Framer to simulate the CBS App on the XBOX One platform. Learning this particular tool is certainly challenging but very rewarding when it all comes together!
Movies Page Alternate
User testing revealed an opportunity to improve immersion with movie browsing. This led to a proposal for a single row 6-column layout with a movie genre navigation up top. As users hover over movie posters, the backplate image displays key movie scene with summary overlay.
Search results sorted into groups of tv shows and movies to assist users with content discovery.
Search Page Alternate
Adds Actors to the result filters alongside Movies and Shows. Initial results present with a single letter input and refine after each letter. If user selects an actor, the movies and shows filter to content featuring that specific actor.
Toyota Prius Interior - Advanced Concept
After gaining deeper insights from both existing and potential customers of the Toyota Prius, in 2011 an exploration to rethink the vehicle interior design began. A primary goal for this advanced concept study was to transform perceptions of hybrid car design as sterile and pragmatic into a more warm and resonating experience. Inspiration from abstract art sculpture, fashion and organic textiles led to new interpretations of the interior.
Role: Lead Interior Designer
Studio: Calty Design Research, Toyota North America
How can the vehicle interior better express the Prius driving experience and enhance the brand's personality?
How might the interior environment invite engagement through its form architecture and digital interaction design?
What new design language and digital interface could be created that reflected customers stated desires for less complication and more emotional connection with the car interior?
Seeking to explore the juxtaposition of sculpture and nature as a thematic direction, these sketches focus on rethinking the instrument panel form and configuration of the digital display.
Inspiration of Fine Art
This sculpture by the artist, Anish Kapoor was a catalyst of inspiration with it's intriguing study of a geometric shape under tension. I saw this as a way to reveal the internal safety structure of the cross-car beam housed within a graceful form.
Began with abstracting a photograph of the sculpture to reinterpret it as a structural form protruding from inside the wall. These sketches expanded on a theme of artful structure as the foundation to build the vehicle interior upon.
2. Information screen formed in a U-shape with front touch area flowing back into a large remote display.
3. Lower knee bolster cradles the beam and display with a protruding surface for the shift knob and open storage tray.
3D Model Development
The final design was created entirely in Alias Autostudio. This hybrid 3D sketch illustrates how the materials and colorways would work in combination with each other to create a 'Warm Tech' environment.
Full-Size Interior Model
The final model created a lightened feeling to the instrument panel's mass. Dual central displays work in tandem with front display serving as the touch interface passing user inputs and information back into the large remote screen.
Architecture of the interior form construction is highlighted in this view. Elliptical beam structure stretched into a flowing form and cradled by the center display panels and lower knee bolster. The 'non-automotive' design was internally controversial at the time (2011) but it opened a new interpretation of what a hybrid car interior environment could be.
Hidden beneath the mesh fabric, interior air ventilation system is digitally controlled to create an ambient air flow.
Door release handle grows outward from the aluminum trim detail. Armrest and door storage is designed as a fluid single element with an interior hammock for holding small items.
Center console picks up on the sculpted elliptical form language. It appears to emerge from beneath the floor as it is highlighted by a recessed LED edge light.
2018 Prius Interior
The current Prius production interior developed by Toyota's global design team in Japan was influenced by the original conceptual theme model from Calty Design Research in 2011. Even with obvious engineering limitations, the overall architecture of the original concept is evident. The theme maintains an elliptical cross beam stretching across the interior cradled by the information display and lower bolster.