Next Project
Next Project
Next Project
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
Project Brief
Hulu Capstone Project
Collaborating to design a new developer console for Hulu software engineers.
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
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.
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.
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.
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.
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.
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.
Nulugan onboarding
Tool switching
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.
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.
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.
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.
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.
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.
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
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.
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.