NBCUniversal

Simplifying a legacy entertainment & media enterprise with over 400+ products through design system contribution and design creation for data-intensive problems.
Overview
Over the course of 3 months, I tackled several enterprise-scale initiatives such as a UX audit, prototypes, design system patterns, data-intensive redesigns, a QA of dark mode components, and stakeholder presentation.
I've listed several of my projects so feel free to look through!
Personal Impact
"Amanda has been an exceptional asset... contributing to a variety of projects with enthusiasm and adaptability... her versatility and positive attitude have stood out. I have seen Amanda embrace flexible problem-solving approaches to address a range of tasks..."
-Farren Wang (Design Lead)
Role
Product Design Intern
(Design Systems)
Team
1 UI/UX Director
7 Designers (Including me!)
Duration
June - August 2024
Tools
Figma, FigJam, Airtable, Jira
ARMR ModernizationGeneric Design System PrototypePMAM Audio Metadata IntegrationStorybook Dark Mode QAFramework Equivalence ChartReflection
🎖 ARMR Modernization
‍
Task Overview
Modernize a NBCU legacy app, ARMR (Application to Readily Manage Royalties) by scoping out workflows, completely redesigning the front and backend, and using the enterprise design system.
Timeline
3 weeks (ongoing)
Product Value
✸ How NBCU gets paid
✸ ARMR does what other NBCU internal products cannot do such as title matching activity
✸ $1.7B revenue

CONTEXT
NBCUniversal gets paid through royalties of iconic films and shows
The entertainment and media enterprise tracks these domestic and international royalty statements through an internal finance tool called ARMR.
‍

PROBLEM
This billion dollar product was slow with over-complicated workflows, tech debt, bloated UI, and low user system confidence

There was so much extra noise in the app that it had become counterintuitive. Stakeholders (Product Owner and Engineering team) of this product came to my design team in need of modernizing their NBCU app that has accumulated a mass of problems since it was built in 2012. It was overly complex and just a major headache for its 300+ internal user base.
‍

How might we drastically improve this legacy app that is vital to the company's finances?


SOLUTION
Modernize the app by reusing UI components from the design system and increase operational efficiency by reducing monthly user efforts

My manager (UI/UX Director), 2 other designers, and myself held meetings with the stakeholders to flesh out priorities and gain a better understanding of ARMR. We then regrouped to put together our findings and ultimately, our strategy. I knew we couldn't just start designing from the get-go; we had to take the time to research & discover to find the best solution that would be best for both current and future users of the app.

STRATEGY
Conduct a UX audit of the existing app to reassess workflows and find design system solutions
I decided to go through the prioritized workflows, took screenshots of the legacy app, and wrote detailed annotations on UX and design system opportunities. Comparing the visual before and afters also helped better communicate ideas to the stakeholders who were not as familiar with design. Here's a sneak peek into our final audit presentation:
‍

COMPONENT INVENTORY
Giving the engineers a headstart on building
While our stakeholders were now in a good place, I wanted to make sure the entire engineering team was too. Referencing our design system, I established likely components and patterns that would be needed in the final mockups to include in the handoff with the UX audit. This would allow the engineering team to have a better grasp of what they'll be coding and even start cutting out what might not be possible.

SITEMAP + USER FLOWS
Finalizing the information architecture of the new app
A big part of this rebuild was cutting out unnecessary or repetitive workflows and trying to simplify it as much as possible. Understanding the legacy app was vital to making a restructured app. So, after finalizing the UX audit and the component inventory, I was able to create the new sitemap showing the three use cases for the app and the new user flow showing the main workflow users on ARMR would be using.
‍

END PRODUCT
Looking forward after handing off my work!
After 3 weeks, we handed off the UX audit, component inventory, sitemap, and user flow. My internship unfortunately ended before I got to make more progress with this project :'( but, my 2 beloved design team members took the reins and will be finishing the modernization!
🖼 Generic Design System Prototype
‍
Task Overview
Build a generic prototype template with a collection of the company's commonly used templates/patterns so they can be referenced or demonstrated. (Using the Angular framework).
Timeline
2 weeks
Product Value
✸ Set up template for all future frameworks (React, Salesforce, SAP Fiori, ServiceNow etc)
✸ Reduces time building future prototypes, helping designers be more efficient
✸ Speed up intake with product
✸ Ensure consistency and scalability

PROBLEM
When presenting products to stakeholders, the same new prototypes are repeatedly built, leading to inefficiency
In the enterprise, there are several patterns that are commonly repeated across the 24+ internal products (e.g. a table). However, designers end up making new prototypes over and over again of those same patterns, just with different metadata.
‍

How might we prevent designers from remaking the same designs over & over again for 24+ internal products?



COLLECTING DATA
I talked to 7 designers, discovering there were at least 21 repeatable patterns
After documenting all of the frequently used design patterns from the designers, I then collected 30+ examples of these patterns & pages from other NBCUniversal products.

SOLUTION
A generic prototype that can be easily distributed
I utilized the design system to create a generic prototype with mockdata that all designers could use as reference. This was built using our Angular components and patterns but in the future, will be remade with all of our other used frameworks.
‍
‍
💥 Dashboard
Interact with an action strip, kebab, cards, a table, and all parts of the header such as the search bar; These are all helpful for our data intensive apps.
‍
🤓 Details & Table
Read more on the details page and interact with the table where you can open a modal, use filters, go to another tab, and change the view. Tables are one of the most used patterns!
‍
⛔️ Error
View the generic error page using the side bar. Having transparency, explanation for what went wrong, and a point of contact helps users find a solution.
‍
🔊 PMAM Audio & Asset Metadata Integration
‍
Task Overview
1. Integrate Audio Channels and Audio Details for MX and M8 assets into NBCU's PMAM (Production Media Asset Management) product. Users need to be able to fully understand what audio channels and languages each asset has in PMAM.
2. Integrate asset data to allow users the view the relationship between assets.
Timeline
2 weeks
Product Value
✸ Satisfied MCS Ops team, main users of the product
✸ PMAM is a core product for business of NBCU

SOLUTION
Building new components, patterns, and prototypes with custom metadata
1. Using the design system components, I built a new properties panel and settings configure column with the new desired data of Audio Channels and Audio Details. These were all built from scratch to ensure scalability.
‍


🖌 Customize Layout Panel
Audio Channels and Audio Details are now populated in the customize layout panel within alphabetical order like the other details.
‍
🧩 Properties Panel
When a user clicks an asset, they can now see Audio Channels and Audio Details in the properties panel under Technical Specs.
‍
2. I added another section into the properties panel for the asset relationship metadata and filled them in to match the intended use case. 12 items was the max a user could view so I added a See all (#) link that will lead users to the details page.
‍

USER FLOW
Ensuring users can view the right info to create a VPost order
Navigating is much more linear as each block is a new view that is easily differentiable. Underneath each block is the action the user would have to take on that page. Users also now have transparency into viewing all the related Audio files in various places of the flow (e.g. Properties panel, Details page).
‍‍


⛓ Viewing relationship of assets
Users can toggle between the regular and condensed view. Then when they want to create a VPost order, they can see all of the related media in the properties panel as well as in the asset page itself, right before sending the order.
‍‍
🌑 Storybook Dark Mode QA
‍
Task Overview
Perform QA on half of the dark mode implementation in Storybook, evaluating 85+ UI components. Keep note of inconsistencies across the Figma Design System dark mode and Storybook. The other half was done by another designer.
Timeline
1 week
‍
Product Value
✸ NBCU product dark mode was highly requested and frequently used by users
✸ Ensure consistency and accessibility
I performed comparisons between Storybook and our Figma design system, noting down any problems with the components and then communicating them to the engineering team to fix.
‍
📈 Framework Equivalence Chart
‍
Task Overview
Create a framework equivalence chart of components, patterns, and templates to help product owners, engineers, leadership, and several other departments understand what a design system is and why it is important.
Timeline
1 week
‍‍
Product Value
✸ Used during an 80+ audience presentation every few months
✸ Significantly improved outside understanding of design systems
✸ Prevents future pain point of updating by making it scalable, editable, and flexible
PROBLEM
Understanding design systems at an enterprise scale

Product owners, engineers, leadership, and several other departments need to understand what a design system is and why it is important. My manager, the UI/UX Director, often gives presentations to 80+ members on frequent basis explaining the business value of a design system in a large org. However, his original way was outdated, not scalable, and not straight-forward enough.
‍

How might we bridge the gaps in departments outside of design in a scalable way?

SOLUTION
A simple, visual chart showing the equivalency between components, patterns, and templates across frameworks



🧱 Components
‍



✨ Patterns
‍



📄 Templates
‍



REFLECTION
Main takeaways from my internship
👯 Balancing diverse user needs can be challenging! From product owners to fellow designers, my target user group changed project to project. It was important for me to always adapt and empathize with the right users.

❓ Discovering the right solution takes iteration, asking the right questions, and research. It almost never comes so easily in the first parts of a project; in fact, often what others may ask for at the start changes by the end.

⬆️ Design systems help tremendously with efficiency, scalability, and consistency. And the best part is they make designers' lives easier and who doesn't like that!
‍

It was an extremely bittersweet goodbye in August when my internship ended because of the many friendships I had built with my design team, manager, peers, and mentors. I am incredibly grateful for all the learnings & laughter! To this day, I am still close with my design team (shown above) and we communicate via discord! The people here at NBCUniversal truly made my experience unforgettable.
‍


Check out my other work!
Join
An entertainment app that strengthens community over collaboration and synced actions
GraduateNU
Empowering students to customize their plan of study by leading new end to end features
Addgene
Redesigned research pages, data tools, educational resources, and built a design system for scientists and educators
GAVRIL@MY.COM
  made by amanda with coffee milk & egg tomato scramble