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.
1-3 stories per sprint (2 weeks) for 20 weeks
– 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).
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.
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.
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.
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.
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.
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).
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.