Star Trek website Redesign Overview

The following design presentation represents only the first 2-days of sketch ideation around an upcoming redesign of StarTrek.com. In January 2019, there are multiple premiers forthcoming with Star Trek properties including the second season of Discovery, a new series featuring Patrick Steward as well as new films. CBSi is seeking to refresh the site and create a more compelling user experience that delivers on the overall promise of the brand to create an immersive user experience.

Design Team

Daryl Harris, UX Lead

Peter Luong, UI Lead

Thoughts on Star Trek

As a Sci-Fi fan, I hold a high level of respect for the progressive vision Star Trek has brought to the world since its debut episode in 1966. Gene Roddenberry truly ventured into uncharted space by presenting the big idea of a cooperative future society traveling well beyond earth with a diverse multi-species crew of leaders, scientists and engineers. In juxtaposition, America at that time was actively struggling with the pursuit of racial, gender and judicial equality. Star Trek presented a living story of advancement showing us what our higher potential could look like.

Today as we approach the third decade of the twentieth century, Star Trek’s vision of mindful leadership and actualized inclusion is just as relevant now as it was then. Our technology has advanced leaps and bounds but our world-views seem to be evolving at a much slower pace. With each new TV series, Star Trek has much more to offer than Sci-Fi entertainment. When at its best, the stories Star Trek tells lead us to think deeply about ourselves and that is what makes it different.

Personas

These are four of the user personas we explored ranging from avid Star Trek fans to the more casual observers. One key goal for the updated site was to envision fresh approaches to highlighting the diverse library of editorial, video and photo content to attract both existing fans and invite in potential new viewers.

Super Fan Steve

Steve loves all things Star Trek. He has the merch. He has watched all the series and movies. He knows the lore and the timelines. He wants to consume all things Trek and is thrilled with the new series Discovery (although he has some concerns about the Klingon outfits). Steve has starter.com on bookmark and visits regularly to get the latest news.

Discovery Dennis

Dennis is a CBS All Access subscriber and is a fan of Star Trek Discovery. He’s a sci-fi fan in general, but he’s no Superfan Steve. Dennis has an active outdoor lifestyle and spends a lot of his time there, so any hours on TV or online has to be worth it. However, he is very excited about Patrick Stewart returning to Star Trek and wants to find out as much as possible about this new series.

Reading Raina

Raina hasn’t watched Discovery yet but is interested after hearing and reading about the buzz around the new series. For her, Star Trek is all about TOS (The Original Series) with its depth of story telling and bold messaging that made it so iconic. Raina is someone who could really become new subscriber and a regular visitor to startrek.com if she finds it compelling enough.

Curious Corinne

Corinne is a photographer that loves Sci-Fi and the creative imagery of the living universe it presents. Star Trek appeals to her curiosity of exploring what the outer reaches of space might look like and who we might meet along that journey. As an artist, Corinne studies the videography and how these worlds are brought to life, so she would appreciate and enjoy browsing photo galleries and video clips.

Current Star Trek Website

Below are screenshots of the existing site with annotations of target areas to improve with new design proposals.

Home Page

Improve site navigation menu.
Rethink how to present top content and engage first time visitors.
Simplify page structure from individual tiles to category sections.

News Page

Eliminate secondary navigation to reduce complexity.
Streamline categories and remove redundancies.
Explore new component design styles.

Database page

Rethink information architecture for improved navigation and usability.
Rethink search tool for instant curated result.
Explore more visually immersive design layout for timeline.

Article Page

Enable article photo galleries, download capability and sharing.
Explore new solutions to browsing more articles from this page.

Strategic Goals

Complete new look and feel for the Star Trek online experience with a clean, premium and intuitive interface
Use as lead generation platform for US and International Licensors: CBS All Access (US), Netflix (International), Space
Responsive website design with updated structure and navigation
Highlight new series’ Discovery and the upcoming Patrick Stewart series
Improve SEO

Pen and marker

Quick sketches on paper is how I start the idea visualization process. The following panels are representations of the first round of thoughts on how StarTrek.com could be reorganized and designed for a more immersive experience with editorial, video and photo galleries.

Navigation

After assessing the current site’s information architecture, areas of category redundancy were identified with plans to simplify and minimize the structure to provide a more efficient arrangement across mobile and desktop platforms.

Featured News Section

Building on the video marquee idea, the featured news section would also have interactive components. On-hover (desktop) and on-swipe (mobile) each news feature description animates up and background marquee image changes with article content. Users can click on ‘view more’ icon to link to the article page.

Article page

Updated article pages to enable enhanced photo galleries with ability to download hi-res images and share via social media.

UX Design Home Page v1

Lead Marquee

Concepts for content promotion marquees. Idea is to list out brief descriptions of each marquee in the slideshow with a timer progress bar giving the user an indication of what is available and how long each image would be shown.

Video and Article Cards

To simplify the page presentation, these information cards lead with minimized meta-data. On-hover (desktop) and on-tap (mobile) article detail expands. For video cards, on-hover triggers start previewing content. While on-click or on-tap (mobile) will initiate the video player experience.

Events Section

Events calendar presented on an interactive timeline carousel. On-hover, event cards expand to present additional detail.

UX Design Home Page v2

UI Design Home Page v1

Focuses on utilizing the information component designs and arranging primary sections in an improved structure based on tracked data of user interests.

UI Design Home Page v2

Features a full-bleed layout with expansive background imagery for each information section. Structure is similar to V1 but presents in a more visual impactful layout.