OVERVIEW
BACKGROUND INFORMATION
• PS™Vue is a live TV streaming service based in the United States. 
• I spearheaded incremental improvements to the commerce site in order to improve certain KPIs (sign-ups & checkouts).
• I worked with the product owner and engineering team for a few stories per sprint for 2 quarters to work on this project. 
• There wasn't enough resources to do a complete site re-design, or conduct formal UX testing.
• All the design interventions had to be high impact low cost improvements.
ENTRY POINT
• Users could enter the commerce site through the main marketing site or from a direct link or search engine.
• Users were prompted to either "start free trial (new user)" or "login (existing user)".
• Existing users would be directed to the web client, whereas new users would be directed to the commerce site.
• The goal of this site was to convince non-subscribers to start a free trial and to up-sell the standalone channels. 
Existing User Flow
Users expect to "Explore Plans" or "Start Free Trial" when landing on our commerce page.
DESIGN PREVIEW
Note: I have stopped working on this project since mid 2016 – therefore the designs reflected here are not what's "live".
This entire piece has also been re-created for the purpose of this portfolio – not all aspects are exact representations of the site (content thumbnails are placeholders – not affiliated with PS™Vue). 
Some details (i.e. prices, exact channels in each package) are removed due to some content restrictions (NDA).
DESIGN ITERATION
1.0 Navigation 
The previous navigation bar had the "sliding tab (underline)" affordance to indicate the active section the user was on, however "devices" and "get started" were external links. The re-design fixes this to better align with user expectations.
1.1 VISIBLE CART ON MOBILE
• The old design used the user profile and chevron as a replacement for the mobile standard "hamburger menu".
• The re-design resolved the unconventional UI element and added the cart to the mobile navigation so that it's visible at all times.
(1) Blue = active section of site (2) > indicators = external links (3) Action text buttons = blue semibold font in all caps *CONCEPT ONLY
2.0 Mini-cart PRE-DESIGN 
• The previous mini-cart was missing several important features such as "remove from cart button" and price information.
• The mini-cart also had two buttons that served the same function: "edit cart" and "proceed to checkout".
• Furthermore, the mini-cart was shown ONLY on hover – which led to most users overlooking its existence. 
2.1 MINI-CART POST DESIGN
• We switched over to dark theme modals and pop-ups to align with the visual branding of our parent site & web client.
• Now the mini-cart pops up as soon as the user adds something to the cart. 
2.2 "ADD MORE CHANNELS" 
New mini-cart includes a "remove from cart [x]" button and shows pricing information.
• When there are no channels in the cart – an "add more channels" button will be shown in the mini-cart.
• Selecting the button scrolls the user down to the channel section of the site.
• Within 3 weeks after implementing this change, the amount of users that added standalone channels to their order almost doubled.  
3.0 Marketing Area
Old Design
• The previous "hero section" took up about 80 percent of the viewport height on desktop and featured a promotion with a "start free trial" call to action.
• Most users click the "free trial" CTA without looking at the other subscription options. 
• To improve this experience, after numerous wireframes and user testing we decided to opt for a simpler solution.
• We reduced the height of the hero section and replaced the CTA with a scrolling link.
• This change encourages users to explore the other subscription options rather than clicking the first CTA shown.
4.0 Tile Design
Channel names tend to be longer than package names, therefore we use a smaller font (and allocate space for two lines). 
• The main problems with the old design is the indistinct visual hierarchies.
• In order of importance it should be (1) title of product, (2) price, (3) add to cart button, and (4) "view details" button.
• To avoid clutter, we also decided to replace the "compare channels" button on each package tile with a scroll link underneath.
4.1 MOBILE TILES
Pre-Design Concepts
• A huge debate was focused around whether or not we should create custom mobile tiles that took up less vertical space.
• Option A was the default option, which showed 1 tile at a time – resulting in excessive scrolling and loss of context.
Post-Design Concepts (AB Testing Phase)
• We settled on a "mini tile" structure and a scrolling carousel.
• However, this design is not scalable once we get more standalone channels, at that time we plan to consider alternatives.
CONCLUSION
• New revised cart checkout process (almost) doubled click-through-rate for standalone channels.
• All the changes outlined here have improved some form of KPI to a great extent. 
system usability scale (SUS) Test Results

SUS – 10 item questionnaire with 1-5 Likert scale (adapted questions to fit context of design)

• Tested 4-12 participants for each incremental change using the standard SUS questionnaire (link to calculator).
• Results show the most recent SUS test with 6 participants.
• Pre-design = 43.75 (51 = F "fail" grade).
• New design = 77.5 (68 = C "OK" grade, 80.3 = A). 
• Some of the user concerns about feature integration and "cumbersomeness" could not be resolved within the scope of this project.

Other Case Studies

Orbit.Co Advertising
Pet Adoption (PROTECTED)
Beatcamp Marketplace
PS™Video Downloads
Back to Top