Case study [Kaspersky In-Product Purchase]

Kaspersky sell anti-virus and internet security software. A project came up to redesign the client's in-product renewal flow. The client and account manager requested that I worked on it as I had knowledge of the brand and had built up a good working relationship with the stakeholders.

I estimated the project hours, breaking it down into phases and milestones. Overall; this required an analysis of how the renewal flow fitted into the overall user journey before identifying how it could be streamlined and improved. I then rapidly iterated low-fidelity prototypes in Adobe XD, ensuring the user experience felt natural. Reviewing with the account manager, we ensured all the legal necessities were present and once that was nailed down, I proceeded to create high fidelity mocks in Photoshop to convey the style updates.

With the XD prototype to view interactions and animations, and the photoshop designs to show visual style, along with the support documentation… it put the developers in a good place to complete the implementation of the redesign. This was then rolled out as an A-B test, focussing on Site Optimization, and collating enough data to have a high confidence level before full scaling.

Image

Rapid prototyping in XD. Simple flow mapped out, with forward and back navigation where appropriate.

Image

Screen capture illustrating prototype interactions. The legal requirements were the auto-renewal notice, seller of record T&Cs and marketing opt-in check boxes. In the old flow, these were on different screens, resulting in a disjointed feel. There was also no way to adjust the number of device the subscription covered so users looking to upgrade or downgrade were dropping off.

Image

Design with updated styles. Before and after. The intention here was to make the flow look more like an in-product renewal and less like a new cart purchase. This reduced user friction.

Image

Animation showing 3 stages of the flow with the new design. I removed any unnecessary distractions, like line items and unnecessary input fields. By placing the marketing opt in on the review page, it freed up space to merge the payment and billing stages - effectively removing a stage in the process and streamlining.

Case study [LenovoPro]

Lenovo are a well known computer manufacturer. They wanted to focus on an initiative called LenovoPro; to reward customer accounts that ordered regularly, most likely on behalf of small businesses. This was to sit between individual consumers and B2B bulk orders. This required marketing materials such as display banners, a dedicated landing page and an updated cart experience.

Image

Banners - Full banner sets with different messaging, languages and sizes were required. Because this 'Pro' arm was fairly new, I also needed to define a brand accentuation for it; the imagery, an emphasis on the colour blue, and increased use of the Pro logo.

Image

Landing page - I built out the fully responsive page, incorporating the accordion content and styled hover states. Built with Bootstrap 4. This was designed by another designer using a set of brand definitions I had put together earlier.

Image

Landing page as shown on mobile. This was hosted on the GC platform. The page introduced the user to the idea of the tiered spend brackets. The more you spend with LenovoPro, the higher bracket you go into, and the bigger discount you get on future orders. As well as other perks.

Image

To assure the user that they are checking out in the LenovoPro environment, the cart needed a few tweaks and a re-skin. The existing cart (left) had some room for improvement, so I tightened up the visuals and added the LenovoPro line-of-credit payment method. Once the customer was logged in, it allowed me to pull in their previous order information, which spend bracket they were in and how much more they needed to spend to reach the next 'level'.

Image

The standard cart review page.

Image

The LenovoPro cart review page. Using more blue, and integrating the Pro logo.

Case study [Nuance Cart]

Nuance provide voice recognition/dictation products for businesses and consumers. Their B2C checkout flow was looking a bit dated, and I was tasked with giving it a visual overhaul, without making costly fundamental changes.

KPIs: Increased conversion, increased revenue.

Results: +3.7% Conversion Rate | +4.7% Revenue Per Visitor | (Email traffic, +23% Conversion Rate)

Nuance cart before

This is the cart overview before my facelift. The client wasn't a fan of the purple as it was no longer representative of the brand. The main direction was to make it cleaner, sleeker and lighter.

Nuance cart after

This is the cart overview after the facelift. I took the approach of removing boxes and subdivisions where applicable. I increased the information hierarchy. And I pulled in the updated border colours, font family and weighting.

Payment details

Increased emphasis on the breadcrumbs. As well as making everything lighter.

Order summary

Gradiented border colour adds a bit of visual flair and ties in newer brand colours without being overpowering. The final set of designs was handed to the Web Dev team to implement the styling changes.

Case study [Kaspersky Affiliate]

Kaspersky sell anti-virus and internet security software. One of their consumer channels is through affiliates. The program manager approached me about reworking their affiliate landing page, to offer a better experience.

KPIs: Increase conversion rate.

Results: +100% Conversion Rate, up from 2.5% to 5% and stable.

Kaspersky Affiliate

This redesign was a chance for a fresh start. Affiliate traffic has likely already done the product research and are looking for a clear and simple transition to check out. Reduced clutter and clear product variation selection allows this.

Kaspersky Affiliate

The filter options towards the top of the page allow for the quick segregation of product, depending on the customer's need. This feature also allows the page to load with specific filters activated, so affiliates can offer more targeted links.

Kaspersky Affiliate

To ensure customers didn't need to leave the page to seek more information, I added the product features details to an overlay.

Kaspersky Affiliate

Fully responsive build for tablet and mobile. Columns stack for filter, products and buy blocks. Includes bottom of page 'return to top' button.

Case study [Flir Affiliate]

Flir offer, amongst other things, a range of thermal imaging cameras, from £150 to £30,000+. They needed a landing page for their affiliate channel - This was intended to cut out the noise of their myriad other offerings and bring the more affordable consumer products into one place. This page contributed to the fantastic performance of the channel and harbored a couple of neat technological solutions/features.

Image

This page was powered by dynamic product information pulled in via ajax call. Upon fetching the JSON data, I processed it and displayed the vat inclusive price and the stock levels. I then wrote a function to calculate the excluding vat price, at client request.

Image

This page built upon my load-pre-filtered function. For example, adding #eseries to the end of the URL brought that content to the top of the page, allowing the program manager to better tailor their ads.

Image

The video overlay background adds a bit of extra colour, utilising in the orange and pink of the thermal displays.

Image

Fully responsive build. On small screens, products stacks and elements resize accordingly.

Contact

info@rhysgthomas.co.uk

External links

Creative blog

Adventure blog