NortonLifeLock Checkout

Levelling up the purchasing experience

NortonLifeLock required an updated checkout experience as the existing experience was no longer appropriate for changes within the broader business.

NortonLifeLock's business is broadly segmented between customers looking for device security and those looking for identity theft protection. Our checkout was not adequately addressing the different expectations of these customer segments.
We needed to create a unified checkout experience that could accomodate different customers with different needs. Our existing experience also contained too many steps and we were losing customers. We needed to create an experience which felt seamless, presented the right information at the right time, and helped reduced overall friction.

I was the lead designer and was responsible for the overall UX and visual design. I worked with team consisting of another UX designer, PM's, and Dev leads to ensure the project stayed on track. We liaised directly with various senior stakeholders across the business to manage expectations and communicate project status. The project was high profile and significant as the checkout is NortonLifeLock's main place where customer purchase our products.

Business Requirements and Goals

The business had a number of goals for the project:

  • Increase revenue by 5%+, up-sell and cross-sell additional secondary products

  • Improve integration between Norton and LifeLock products

  • Reduce friction and customer pain points

  • Optimise sign up and log in process

  • Reduce business siloing which contributed to a fractured customer experience

  • Be compliant with WCAG Accessibility Guidelines 2.1 AA and ADA

  • Accomodate multiple languages and regional requirements

These challenges were important for a number of reasons. The company was under pressure to increase revenue. The existing checkout was under performing relative to our competitors ie too many steps, too many forms and overly complicated login process. The checkout needed to provide a checkout solution which addressed different product and customer needs - LifeLock and Norton have a different user base with different requirements for data such as Social Security Numbers and Personal Identification data for each user.

We negotiated with the senior stakeholders to make sure the project was addressing both business and customer needs. We ran workshops and provided design processes via Lean UX, ideation, competitor research, journey maps, to tease out the most important problems to solve.

Competitive Analysis

In order to ensure we had a best-in-class experience, we conducted an extensive competitive analysis of our competitors. This included, but was not limited to:

  • McAfee

  • Avast

  • Avira

  • Kaspersky

  • AVG

Listening and empathising with our customers

User Journey

User journey mapping helped to identify the most frictionless options available. We could then iterate on this solution as the business clarified ongoing legal requirements. The team focussed on identifying the bare minimum customer information we needed so our customers could successfully purchase. We wanted to be sure we only included necessary steps and asked for additional information only when necessary. We wanted to present relevant additional product offerings at the right time in the customer journey. Striking the right balance between frictionless purchasing and additional offerings was critical. Through user testing and our extensive library of previous tests, we were able to focus on presenting the right offerings at the right times for the mix of products that our customers were interested in.

There were a number of factors the team identified as crucial for success:

  1. Reduce and remove unnecessary steps, input fields and lengthy forms

  2. Help guide the user with timely and relevant interaction/animations

  3. Minimise superflous visual clutter

By exploring the ways our different steps were presented, we helped to minimise customer fatigue and we were able to make the process seem shorter and easier to get through.

Wireframes

At the beginning of our design process we created wireframes for testing purposes. We started our creative process with low fidelity wireframes to quickly map out the customer journey. We wanted to rapidly explore different options which effectively accommodated business requirements and user needs. We used a variety of research inputs as starting points as well as data from our existing checkout. We used a variety of research inputs (competitive research, optimisation data and heuristic knowledge) as starting points as well as data from our existing checkout. We also used it as a brainstorming tool to get stakeholders onboard as well as to collect insights from them. We built out the wireframes in Sketch and Invision, then used Usertesting.com to get our ideas in front of users. We were able to quickly iterate on our wireframes while also taking input from stakeholders to rapidly develop validated and approved flows so we could start visual design.

User Testing

The business had a large pool of data from existing checkouts which the team was able to leverage into useful insights. It meant we could focus on implementing these insights into the new checkout as well as building on this knowledge through more iterative testing as we built out our wireframes and higher fidelity flows. We primarily used a third-party usability testing platform which allowed us to get rapid feedback from users.
We wanted to identify any potential issues as they came up so as to reduce potential issues later in the process.

We started running tests once we had wireframes of the experience flow. The checkout is used by a wide variety of people from all walks of life, so we tested regularly and broadly across all demographics focussing on the 25+ age group. The reason is that most of our customers are above 25 years old.

Our initial tests during the design process were all remote and unmoderated as we wanted rapid feedback to keep our aggressive timelines. We were able to identify some key issues early and iterate until we had a functional experience.

After we had higher fidelity prototypes we moved into live A/B testing to ensure the new experience would not impact conversions.

NortonLifeLock Checkout

UI Design

The business wanted to new checkout design to follow the new corporate brand guidelines. We followed a lighter, brighter, minimalist style which removed any unnecessary elements. The plan was to keep users focused on the most important tasks in the checkout and minimise any distractions. We used a reduced colour palette based on the corporate brand, while also adhering to Web Accessibility (Level AA of ADA and WCAG Standards).

We took into account both Material Design and Apple's HCI to inform the design and appeal to common UI elements between both. We wanted to appeal to both sets of users while also being mindful that our customer base skews towards iOS users.

The checkout was designed to be responsive, targeting three breakpoints that represented the most common devices types - mobile, tablet and desktop configurations. We used data from our analytics platform to identify the most common screen resolutions our customers use, while ensuring that the experience was robust enough to still work for other viewports. The solution we delivered was able to balance customer needs with business goals, the latest visual style and technical limitations.

Visual Design iterations

The final design solution

12
Iterations
70
Screens
4%
increased conversion
$5mil
extra annualised bookings

Final Thoughts

My biggest concern during the project was whether we could deliver a better experience for our customers and whether it would ultimately hurt conversion. The transition from an existing experience to a new one always brings with it the possibility of delivering an inferior product. The aggressive timelines also didn't help as it impacted quality at every stage of the process. Due to significant internal changes at the time, there was a lack of clarity around roles and responsibilities which caused unnecessary confusion. We also had challenges with legacy technical issues that we were not able to solve for the first iteration of the project. The project also would have benefitted from a C-level design advocate operating within a DesignOps overview role.

Although we faced these various headwinds we were still able to deliver a streamlined customer experience which delivered on all business requirements. Working together as a team and employing Scrumban methodology we were able to reach across the organisation at the right times to get the project delivered. We were able to successfully bring customer needs together with business goals within the confines of technical limitations and deliver significant increases in revenue.