top of page

KW Redesign

  Project Brief  

Hulu Capstone Project

Collaborating to design a new developer console for Hulu software engineers.

iMac Mockup@1x.png
MacBook @2x.png

Project Summary

As our Capstone project for our Master's degree, I worked with 3 colleagues to design a new dev console for software engineers on Hulu's Enterprise team. We designed a custom product that centralized and facilitated access to documentation and promoted collaboration. 

Role

Our team was comprised of 2 researchers and 2 designers, but we all contributed to each phase of the project. I focused mainly on the project's design and prototype but also contributed to user interviews and shadowing.

Process Overview

We followed a double diamond methodology with this project. Over the span of 6 months, we shadowed and interviewed our users, synthesized and presented that research to stakeholders, and then moved on to designing and prototyping our experience. Use the skip links below to jump to a section.

  Survey  

A diagram depicting the double diamond process with 4 stages: Discover, Define, Develop, and Deliver.

  Survey  

Discover: User Research

Kicking off the project, our team knew hardly nothing about what makes an effective developer console. We immediately recognized the need for thorough user research, so we sent out a quick survey to Hulu engineers.

Survey Goals

Our kickoff survey focused on understanding what types of tools these developers were using and what the hoped to see in an improved dev console. We also asked respondents if they would be open to participating in shadowing sessions and user interviews in this survey.

Key Findings

  • 80% of respondents had used a dev console before.

  • Ease of searching was the most requested feature.

  • Users wanted consolidated documentation and resources.

  • New employees reported a steep learning curve with Hulu's internal tools.

  • 4 participants agreed to shadowing

  • 8 participants agreed to interviews.

Tool Bubble Charts

The 2 researchers on the team created these bubble charts, so we could get a better understanding of developer workflows and get an understanding of the types of interfaces these users were most used to. 

bubblecharts.png

We followed up with the developers that we shadowed and interviewed 4 additional ones. Leveraging questions from our shadowing sessions, we focused on understanding themes like their workflows, tools they used and why, and the most important features they expected in the dev console. 

Interview Findings

  • Users were eager to identify reliable documentation and centralize it.

  • Hulu devs were most accustomed to Apple design patterns in addition to Hulu's internal design system.

  • Users were rigorous searchers who preferred clean layouts with prominent search features.

  • Shortcuts were heavily relied upon in workflows.

  Shadowing + Interviews  

Virtual Shadowing and User Interviews

The survey helped us identify some high level goals of the dev console. To get a more detailed view of our users' workflows, we virtually shadowed 4 Hulu developers and conducted follow up interviews with them. In addition to those 4, we also interviewed 4 additional developers.

Virtual Shadowing

Starting with shadowing, we got a deeper understanding of workflows and also generated questions for our interviews. To ensure our console was utilized, we needed to make sure that it cleanly fit into workflows and built upon existing user behavior.

Shadowing Findings

  • Users heavily relied on search.

  • Bookmarks were popular for frequently used tools and documentation.

  • Those who didn't use bookmarks often memorized the URLs of pages.

  • In 1 hour, participants used 8 different tools on average.

Naman.png

User Interviews

  Research Presentation  

Presenting Research to Stakeholders

We created a deck with our key research insights and presented it to our stakeholders at Hulu. 

Presentation Deck

Below are a few slides from our presentation deck. We focused on distilling our key insights and proposing key features our console should have.

3.png
13.png
29.png

Feedback

Our stakeholders affirmed the insights we distilled from the research and helped us feel like we were on the right track. While they liked our proposed features, they encouraged us to focus on one key thematic area for the scope of this project.

"I almost feel emotional, it's like our needs are finally being heard."

Technical Product Manager, Hulu

  Personas + Journey Maps  

Define: Research Synthesis

Moving on from Discover to Define, we synthesized our research findings into data-based user personas and user journey maps.

User Personas

We created user personas based on the shadowing seasons and user interviews. We created 3 user personas based on the archetypes we heard of in the interviews: Nulugans (new hires), experienced developers, and team leads.

Nulugan.png
Seasoned Dev.png
Seasoned Manager.png

User Journey Maps

To better visualize where our product might make an impact, we created user journey maps. These artifacts helped us map out our persona's workflows. Below is an example of one of these journey maps.

Journey Map - Seasoned Software Develope

  Design Strategy  

Aligning on a Design Direction

We generated how might we questions and strategized features through an effort/impact matrix to define the scope of our console.

How Might We's

We wrote down HMW questions to focus on user problems and potential solutions that could address them. We narrowed down our focus areas to the green sticky notes with bold text to define the focus areas for our project.

HMW provide documentation at the moment devs need it

HMW helps devs identify when to use certain tools?

HMW effectively help them switch between tools?

HMW evangelize coding best practices?

HMW meet the diverse needs of each user?

HMW provide actionable status updates?

HMW organize and filter documentation?

HMW ensure the console loads quickly?

HMW simplify workflows?

HMW help devs keep track of different services?

HMW highlight available resources for Hulu devs?

HMW improve collaboration across dev teams?

HMW direct users to the right SMEs?

HMW show how tools and applications are connected?

HMW create consistency in team workflows and tools?

HMW improve onboarding for Nulugans?

HMW facilitate selecting the appropriate resource?

HMW create a single source of truth for all documentation?

HMW ensure documentation is updated and relevant?

HMW help Nulugans feel comfortable with internal tools?

A Defined Scope

The HMWs that we settled upon helped us inform the scope of our design and specify the 3 problem areas that our dev console needed to address.​

noun-user-162962.png

Nulugan onboarding

noun-tools-486566.png

Tool switching

noun-consolidation-6243598.png

Consolidating documentation

Impact x Effort Matrix

Leveraging feedback from stakeholders and our user research, we ideated on features that helped our users achieve their goals within our 3 focus areas. We then sorted these features into the matrix below to inform our design strategy.

Group 144.png

  Sitemap + Sketches  

Develop: Sitemap and Concept Sketches 

Before we started wireframing, we wanted to ensure the organization of the dev console made sense and that we had a high level idea of what the solution might look like.

Defining the Information Architecture

The team collaborated on a sitemap to make sense of the organization of the dev console. We found this step to be incredibly helpful in organizing our vision for the console, especially since it was so information dense.

DevX_Console-Sitemap.png

Concept Sketches

Using procreate, we collaborated on these concept sketches to visualize how our ideas would take shape within the dev console. These sketches helped drive home the importance of searchability and organization in the console. 

Group 145.png
Group 147.png
Group 149.png

  Wireframes + Testing  

Wireframes and User Testing

Myself and the other designer on our team focused on putting together wireframes for our dev console.

LoFi Wireframes

We put together LoFi wireframes and a prototype to visualize the core experiences of the dev console. We focused on onboarding, the main dropdown menu, and the home page. 

User Testing

Myself and the other designer led 4 moderated user testing sessions with our users. We also sent out a prototype link along with a questionnaire for developers who wanted to test async. 

LoFiMockup.png

Feedback from Testing

  • Users wanted more information about tools in the onboarding flow.

  • Users reacted very positively to the content on the home page.

  • Users wanted bookmarks or a way to pin important documentation.

  • Users found our main dropdown menu confusing and did not understand its organization.

  HiFi Mockups  

HiFi Mockups and More User Tests

We incorporated the feedback from our first round of user testing, upped our design fidelity, and then led more user testing to evaluate or 2nd pass.

Iterating to HiFi

Based on user feedback, we reformatted our main dropdown menu, added content to the onboarding, and introduced bookmarks as well. We then started incorporating more visual design elements into our designs to feel more like a fully fledged product.

Group@1x.png

HiFi User Tests

Since this was our last opportunity to test, we led hour long moderated user testing sessions with 5 developers to elicit as much feedback as we could before we delivered our product. 

David3.png

Test Feedback + Quotes

Feedback from Testing

  • Users found the onboarding more friendly and informative.

  • Users liked the inclusion of personal pronouns in onboarding.

  • Users wanted tags on documentation to better determine its relevancy.

  • This version of the dropdown menu was much better received.

"Maybe it'll become my new homepage!"

"It seems it would make my life easier."

  Project Delivery  

Project Delivery

To finalize our deliverables, we incorporated the feedback from user testing and aligned our designs more with Hulu's design system. Then, we presented our project to stakeholders and the team.

Final Prototype

Our final prototype featured UI more in line with Hulu's design system, the tags requested by users, and a sharpened service dropdown menu.

Feature Overview

Below are some of the key features users requested in the dev console.

Service Dropdown@2x.png

Service Dropdown

The service dropdown offers an easy way to access all the documentation, guides, and important links. It's accessible from the top nav and was seen as a critical feature for this product.​

Designing an intuitive and robust IA was a challenge in this project, but after iterating and testing, this layout was well received by our users.

Users especially loved the estimated time callout on this page for guides.

Search + Tags

Many users requested a comprehensive search experience. We paid a lot of attention to our global search screen to make sure it presented the information our users were looking for. We also added detailed filtering to help them find whatever they might need.

 

Through testing, we uncovered a key need for tagging content across the console. We leveraged this not only on guides and documentation but also on individual user profiles so user could easily flag down subject matter experts.

Search@2x.png
Tool Mapping@2x.png

Tool Mapping

In testing, one user in a leadership role stated that tool mapping could be the most valuable feature in this console. Tool mapping is very important for users, especially Nulugans, to understand how tools in Hulu's stack interact. Developers at Hulu use a ton of tools, so this understanding was critical to their efficiency at work.

KW Redesign

Survey
Shadowing
Prsentation
Personas
Design Strategy
Sitemap
Wireframes
HiFi
Delivery
bottom of page