BACKGROUND
PS™Vue is a live TV streaming service based in the United States. While working in the Waterloo office I was allotted a few stories each sprint for two quarters to make some incremental improvements to the commerce site in order to improve user conversion rates (sign-ups & checkouts). 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. You can view the live site HERE.
Users could enter the commerce site through the main marketing site or from a direct link or search engine which would prompt them 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 to select a trial plan or make a subscription purchase. 
Users expect to "Explore Plans" or "Start Free Trial" when landing on our commerce page.
--------------------------------
ROLE
Designer
TIMELINE
1-3 stories per sprint (2 weeks) for 20 weeks
TEAM
– 1 Other Designer
- 1 Product Owner & 1 Product Manager
– 3 Engineers
--------------------------------
FINAL* 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).
MENTAL MODELS 
The previous navigation bar had the "sliding indicator (underline)" affordance to indicate the active content and afford that the other "tabs" are other content sections on the same site.
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 this unconventional UI element and added the cart to the mobile navigation bar 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
Re-designing the Mini-cart Experience
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. 

We switched over to dark theme modals and pop-ups to align with the visual branding of our parent site & web client.
INCREASING CHANNEL SUBSCRIPTIONS
The new mini-cart now "pops up" as soon as the user clicks an "add to cart" button. When there are channels in the cart – an "add channels" button will be shown above checkout. Selecting the "add channels" button scrolls the user down to the channel section of the site. After implementing this change within 3 weeks the amount of users that added standalone channels to their order almost doubled.  
New mini-cart features a "remove from cart [x]" button and shows pricing information.
Old Design
REVAMPING
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. Considering that users get to this site from a "start free trial" button, its no surprise that most of them click the 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 removed the CTA. This change allows the user to see some of the other options "above the fold", which prompted them to explore more. 
VISUAL HIERARCHY
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. In order to avoid clutter, we also decided to replace the "compare channels" button on each package tile with a universal scroll link underneath the section.
Channel names tend to be longer than package names, therefore we use a smaller font (and allocate space for two lines). 
MOBILE TILES
A huge debate was focused around whether or not we should create custom mobile tiles that took up less vertical space. If we retained the same tile dimensions for mobile, each screen would show just a single tile at a time – which we decided would result in excessive scrolling and loss of context. Therefore after numerous wireframes and informal user tests we decided to test an adapted "mini tile" structure and a scrolling carousel (results of this test are still under NDA). 
Pre-Design Concepts
Post-Design Concepts (AB Testing Phase)
WHAT I LEARNED
I learned a lot about balancing business goals and user goals, evaluating the level of design impact and weighing it against dev resources. I also had the chance to research a lot about AB testing and using design to improve business KPIs.
Some initial rough concepts done in Webflow.

Other Case Studies

Video Download Feature
ORBIT.CO
BeatCamp
Back to Top