Comcast "The Hub"
Reimagining comcast's internal vision for a dashboard into a minimum viable experience through user interface and user journeys
PROJECT TYPE:
Design of a MVE internal dashboard for Comcast
THE DREAM TEAM:
1 Project Manager
2 Principal Designers
2 UX Designers (me)
2 UI Designers
1 Business Analyst
TIMEFRAME:
3 months (2022)
Comcast wishes to design a decisioning orchestration interface that integrates and controls multiple decisioning sub-platforms. This interface will be called “The Hub.”
The Hub will function as a single pane of glass for the enterprise, enabling users to understand, analyze, collaborate, govern, experiment and measure across the enterprise.
THE PROBLEM: Currently, there is no one cohesive internal software that allows users to analyze metrics and data for Comcast's web placements. Users have to go across various channels which causes a delay in advertisements and approvals.
THE SOLUTION: We took Comcast's vision slides of an internal interface and transformed it into a one-stop shop for enterprise users to access data about placements, tactics, and next best actions.
BEFORE - COMCAST'S OG VISION SLIDES
*Data shown in visual wireframes are false and do not represent actual financial numbers*
The team in Comcast previously prepared 11 vision slides that they have created. These "wires" were the backbone of our design creation. Since this was to become a new tool to be used internally, there was some freedoms as to what "the hub" could provide for its users.
Overall, the MVE should provide and access data for 3 channels (Placements, Tactics, and Next Best Actions) as well as an administration portal and change request/management portal.
Even though these vision slides were provided for us, we still had to undergo client workshops and interviews to have a firm understanding of the hub.
USER INTERVIEWS AND SESSIONS
We were very fortunate to have a client that was enthusiastic in participating with continuous interviews and user testing. We conducted a 2 hour session at the beginning to go over the OG vision slides that were provided to us.
Since this is a MVE project, we did not have a physical application to test on. Instead, we asked the users within Comcast to go through their current operational duties. We also had two workshop sessions a week to go through our design process and wireframes.
We had 7 interview sessions over 2 days done over Microsoft Teams.
Due to the course of the MVE, the client did not ask us to prove any deliverables other than final wireframes and prototype.
STYLE TILES
We created 3 style tiles (consist of fonts, colors and interface elements that communicate the essence of a visual brand for the web.) They helped form a common visual language and provide a catalyst for discussions around the client's preferences and goals.
1. Brand Oriented
-
Follows Comcast brand guidelines closely
-
Minimal, high-contrast
-
Rounded corners
2. Glassmorphism
-
Glass-like UI leveraging transparency and depth on a multicolor background
-
Rounded corners, clean balance of white space and content
-
Brand color and fonts
3. Clean Modern
-
Flat, clean, traditional, tried and true
-
Light, clean, content forward
-
Following Material design cues
The client chose to go with the Brand Oriented style tile due to following the companies brand guidelines and it would be more efficient to incorporate.
MID-FIDELITY WIREFRAMES
Hi-Fidelity Wireframes Samples
BEFORE
Dashboard Overview
01
AFTER
BEFORE
Placement (Campaign) Overview
02
AFTER
BEFORE
Placement (Campaign) Details
03
AFTER
CONCLUSION
After ideating the design, we did a usability testing with the stakeholders on the new designs. They were really happy with the overall wireframes and are eager to put this into development. The team and I didn't work with developers to bring this vision into life since it was a MVE.