Project type: Mobile-Web UX
Role: Lead UX Designer

Objective
To create a mobile/web design language and reusable component system that would increase our design and development efficiency, acting as a a single source of truth for all UX design related needs.
Accommodate new, key features that will be introduced with our design refresh
Acceptance Criteria
Document
SiriusXM's UX design language and can easily be referenced by multiple departments
Build
A component library that can be used to rapidly construct screens and prototypes
Refine
The visual style of the app design to increase consistency without breaking the existing structures
Information Gathering
Product Inventory

Usability
While deep-diving into the product we were able to pinpoint multiple usability issues that needed to be addressed. A few examples of areas that we focused on:

Contrast and Accessibility
Multiple key components didn't meet WCAG 2 contrast standards. There was also no dark mode dark mode which would offer a higher contrast and further highlight the content tiles.

Application Load Time
This was an issue due to the quantity of large images. Besides the added load time, the imagery lacked distinction (eg. the alt rock station tile was the same color as a country station which drew users to form an association between the two)

Content Differentiation
This has always been a challenge for SiriusXM since they host many different content formats. For example hero promos and video tiles are often confused because both tiles are in a 16:9 aspect ratio.

Content Organization
Since the app loaded with 3 large promo tiles above the fold users believe they were being served ads. They wanted more actionable content that was relevant to them instead of being upsold things they might not enjoy.
Visual Guidelines
The result was a more consistent look and feel within the UI. We developed a color and spacing system, designed icons with a consistent look/feel, and simplified components such as buttons.

We even took the painstaking task of assigning a unique color to each of SiriusXMs 200+ channels to help celebrate their individual 'sub-brands.' Each color had to be tested in order to meet contrast standards in multiple use cases and due to the wide variance in SiriusXM logo designs this process took a long time to say the least.


Component Design
Now the process of building the components begins! With only two designers assigned to this project you can imagine how many hours of work this took, especially when the number of platforms are considered(iOS phone and tablet, Android, AppleTV, FireTV, and in-vehicle). Below are examples of components from the iOS library.
Highlights

Dark Mode
The introduction of dark mode adds a higher contrast UI as well as a greater emphasis on the content tiles

Unique Channel Colors
Every channel has a unique color assigned it it, in lieu of heavy background images

Video Content
Newly added video content design allows for greater distinction from non-video tiles

Pandora Artist Stations
A user can now initiate an artist station from the currently playing artist on a broadcast channel

Sub Genre Channels
In addition to Pandora Stations we launched 100s of sub genre channels related to our most popular channel brands
Screen Assembly

Old vs New


Conclusion
















