— oyuky

Device - Macbook Pro.png — NBCUniversal Challenge

A collaborative visualization tool for Telemundo Enterprises to track the hours worked on projects by the editors for the management team.
**My Role:** Product Designer
**Project Type:** Hackathon
**Timeline:** 24 hours
**Tools:** Figma, Pen & Paper, GitHub, Zoom, Slack

Meet our Team: HeartStation #9

HeartStation #9 consisted of 2 product designers, 3 web developers, and a project manager.

Product Designers:

Web Developers:

Project Manager:

NBCUniversal Telemundo Enterprises was looking for a way to visualize booking data to maximize the use of talent and shared resources of the Post-Production Center of Excellence.

Above was the original heat map that Telemundo Enterprises was using to track their editors’ hours worked on projects. They expressed that it was overwhelming and cluttered for the production managers to navigate. — Above was the **original heat map** that Telemundo Enterprises was **using to track their editors’ hours** worked on projects. They expressed that it was **overwhelming** and **cluttered** for the production managers to navigate.

Getting Started

Right away, I jotted down an **action plan** for us to keep ourselves productive and be **ready to present our work** to NBCUniversal Telemundo Enterprises **after 24-hours**!

Under the excitement of the 24-hour time crunch, HeartStation #9 had an initial meeting and then the product designers dove right into researching different ways that companies organize their employees’ hours. We concluded that different types of charts on a dashboard would be most effective.

Inspired by our discoveries, Javiera and I began ideating. — **Inspired** by our discoveries, Javiera and I **began ideating**.

Persona

Before we could begin sketching out our ideas, we imagined who it would be navigating through our dashboard, so that we could better flesh out their journey and consider what they might struggle with and the opportunities for us to help.

Goals:

• Wants to quickly identify work patterns and measure job performance
• Needs to balance her editors’ hours for upcoming shows
Pain Points:
• Is not excel savvy
• Managing her editors hours has become a nightmare

Task Flow for Daya

Sketching

Hi-Level Wireframe

Hi-Fidelity Mockup

Shown above are the Telemundo Enterprise brand colors that we applied to our design.

We decided to go with a list view by clicking into the "Editors" icon. It would result in a heat map of Top Performers filtered by Project. — We decided to go with a **list view** by **clicking** into the **"Editors" icon**. It would result in a **heat map** of **Top Performers** filtered by **Project**.

Collaboration and Changes

Product Designers and Web Developers re-grouped to discuss progress and possibilities. They were able to give us some feedback and suggestions on changes we could make that would translate better to their end of the process.

Below is our second version of the Hi-Fidelity Mockup: — Below is our **second version** of the **Hi-Fidelity Mockup**:

Thanks to the Web Developers, we as Product Designers could now move forward with prototyping!

Prototype

Web Development

Finally, we handed it over to the Web Developers to bring our product to life! Below are snippets of their process and the work they were able to produce in the given timeframe:

Next Steps

We had so much fun designing under the 24-hour challenge. Of course, though, we couldn’t help but map out some ideas for the future with Telemundo Enterprises.

For the Product Designers, we would like to create a way for production managers like Daya, to be able to view an individual editor’s hours and projects. We laid out what it would possibly look like when you select one of the editors by name:

Once that is ready, we will continue to iterate with our web development team for any changes. They plan to continue styling the project into a functional site! — Once that is ready, we will continue to iterate with our **web development team** for any changes. They plan to continue **styling the project** into a functional site!

hack. end pic.png — 24-Hour Takeaways

Though our time was short, we still learned valuable lessons during our hackathon.
• **Done is better than perfect!** The limitation of 24 hours allowed us to focus on producing content instead of overthinking details. With UX, you are never *really* done, because you can always go in and tweak or update features or elements. Still, it’s important to always be able to provide *something* for a client when expected.
• **It’s important to touch base often with the rest of your team** to ensure that you’re setting them up for success with every step. As product designers, we have blue-sky artistic thinking, so discussing our ideas with the Web Developers grounds us and defines what is and isn’t possible for the final functioning website.

T
hank you to NBCUniversal TELEMUNDO Enterprises for this opportunity!

& thank you to **you**, the reader! We hope that you enjoyed learning about our experience!
Love, HeartStation #9

NBCUniversal Challenge