LinkedIn Logo - Contact Charle Diggs

Roku Jobs Portal

Visit Roku.com jobs portal

The explosive popularity of the Roku brand and products created an immediate need to improve our recruitment efforts. The first step toward that goal was to redesign the jobs portal from the ground up.

  • Design Strategy
  • User Interface Design
  • Responsive UI
  • Prototyping
  • Information Architecture
  • Interaction Design
  • Micro-interactions
  • Visual Design
Various mobile screens from the Roku jobs portal Various screens from the Roku jobs portal, including the homepage, menu, and search results page.
Mobile view of the search results page Mobile view of the search results page for the keyword "Engineer."
Roku jobs filters menu on mobile Mobile view of the Roku jobs portal filters menu.

Problem

Mobile Usability

The original Roku Jobs website had a significant set of mobile usability issues, information architecture, and navigation. Prospective candidates had to scroll through a single web page that listed every job at the company visible.

Hero Image The jobs listing page from the previous design showing misaligned job/city pairings.
Hero Image The Information Architecture and misaligned layout make for a confusing navigation experience.

My Role

I was the Lead Experience Designer on a seven-person, cross-departmental team. Members included the Vice President of Recruiting, Director of Communications, a Project Manager, a Front-end Developer, and a professional photographer.


Audience

Prospective applicants and new-grads were the target audience for this project. It was also in our own interests (Roku as a business) to improve our market presence as a great place to work and paint a better picture of what it means to work at Roku.


Goal

This redesign's goal was part of a broad company-wide strategy to attract more top talent and new-grads globally. Another important goal was to tell a better story of work/life balance at Roku and what it means to be a part of the industry's most dominant streaming brand.



Key Objectives

  • Improve mobile usability
  • Improve page layout
  • Improve information architecture
  • Enable ability to search jobs
  • Display employee testimonials

Design Process

Once our goals and objectives were locked down, I began exploring several new sitemap structures to help the team envision how a new job portal could be organized. The entire project took about 3-4 months to complete (from concept to launch).

Employee Interviews

With the help of our Director of H.R., we reached out to 40 employees to allow them to be promoted on the new website. We interviewed those that were open to it and posted their testimonials on the website as well.

Photo Shoots

We had a lot of fun during the professional photoshoots they were scheduled in the Roku offices. A few of the chosen shots below:

Hero Image I designed a random image generator which changes collage images on page reload.
Hero Image Collage image variant.
Hero Image Collage image variant.

Wireframes

I began exploring new layouts that would be much more responsive and easy to navigate regardless of viewport size (e.g., desktop, tablet, or mobile devices). I utilized components from our web-based design system, including fonts, colors, and cards.

Hero Image The new search results layout on a mobile device.
Hero Image The search bar remains sticky (e.g., always visible) at the top of the mobile viewport when users scroll through search results.
Hero Image The desktop view of the user's search results page for the keyword "Engineer."

User Interface Design

I had a rare opportunity to refresh the branding of the previous jobs website. This version embraces much more Roku purple and a yellow accent line borrowed from the product packaging. I introduced the Roku remote as it is the most recognized element by millions of users globally.

Hero Image The final design for the Roku Jobs search displaying results for the keyword "Engineer."
Hero Image Minimized view of the sticky search component allows users to change keyword search anytime during the scrolling experience.

Prototyping

Micro-interactions

This project allowed me to introduce more micro-interactions, which give a delightful, but non-distracting touch to the entire experiences as users navigate the portal. The purpose of this particular micro-interaction allows the user always to search, even when scrolling the page.

A desktop prototype demonstrating micro-interactions and motion.

Design Specifications

I also created a detailed interaction design and behavior specification for our Front-end Development team to follow in addition to the prototype.

A desktop design pecification document describing interaction behaviors - for web development team A desktop design specification describing product functions and behaviors.
A desktop design specification document describing interaction behaviors - for web development team A desktop design specification describing collapsable filters.
A mobile design specification document describing interaction behaviors - for web development team A mobile design specification describing user interface styles and layout.

Results

The newly branded Roku Jobs portal is now shared daily across LinkedIn by the entire Roku management and H.R. team. It serves as the primary destination for experienced professionals and new grads who want to learn more about the company, the culture, and the people that drive it forward.

Mobile Friendly

The new Roku Jobs experience works on all mobile devices now, making it much easier for prospective applicants to learn, search, browse, and apply for jobs at home or on the go.

Back to top

Next project