Case Study

Website UX

Legal section page revamp

Redesign the Legal section of bose.com to the newer look and feel of the website, and help make the pages easier for users to navigate.

Year
2021

Company
Bose Corporation

Revised Legal page desktop and mobile view.

Desktop and mobile view of final Legal landing page.

Project Background

The legal team is collaborating with HR in making our legal policy more customer-facing. When driving this project, we concluded that the privacy pages are outdated in terms of look and feel and in addition, are off-brand. This section of the global website was never updated with the newer look and feel, which added a bit to the outdated feel. Also, the navigation and interactions had moved away in the new platform and needed a refresh to be more in line with the rest of the website.  

My Role

I was responsible for all aspects of the user experience design from research, audit, wireframes, prototyping, and presenting to the Legal team for approval of the proposed solution. In addition, since this was an entire section of the site, comprised of at least 8 pages, I set up a spec sheet with CSS styles for authors to have as a reference when updating the additional pages (not in scope immediately) for this section of the site.

Project Overview

The current legal section on the website felt a bit detached and out of date versus the rest of the customer-facing e-commerce site. To instill consumer confidence in purchases from the website and give those needing to search out this type of content an easy path to find what they needed without getting confused or lost.

Per Marketing Brief: When driving this project, we concluded that the privacy pages are outdated in terms of look and feel and in addition, are off-brand.

UX Assessment: This section of the website was never updated with the newer look and feel, which makes it feel disconnected from the rest of the site experience. A refresh to be more in line with the rest of the website.

Additional Consideration: The navigation and interactions currently being created for the new website platform have moved away from sidebar navigation. Good opportunity to update as only US and Canada will be on new platform at launch. The Ask

The implementation of a sound communication strategy on the website will help Refurbished be easily findable for those looking specifically for it, without interfering with the customer journey to purchase Bose products.

Problem to solve

What is the problem we are trying to solve for users?

To help brand the Legal section and instill consumer confidence in purchases from the website.

This will give those users who need to search for this type of content an easy path to find what they need without getting confused or lost.

How to solve

Using the existing functionality the platform components allow, this content can be migrated into an improved user experience. This includes improving the navigation with anchor links to make navigating long pages easier and adding a landing page with text links.

Goals/Hypothesis

Business Goals

Goal aligned with the Legal team: To increase consumer engagement with the brand by making this content easier to consume and bringing it up-to-date with the rest of the website experience.

UX Goal

To bring an improved experience for users that need to find certain legal information. The goal is to meet the needs of this user by creating an experience with this information that gives them a clear path to the content they are looking for.

Design Process

1: Audit of existing site structure

  • Review and understand the site structure and the pages involved.

  • Mapping out existing legal sections to determine the best options to update.

  • Competitive analysis of how other sites handle the legal content.

Starting Point: Mapping Existing Site Structure

2: Create wireframes using existing site components and functionality.

  • Based on a review of the site overall, presented a couple of options for components to use for the Legal Landing page content.

  • Showing layout options authorable with existing site components.

Wireframes

Wireframe option 1 using cards.
Wireframe option 2 using table of contents approach.
Desktop view of final Legal landing page.

3: Mockups/Prototypes created for stakeholder approval.

  • Using live content, review pages with layout updates. Approve copy and layout.

  • Interactive prototype to guide authoring with a detailed explanation of intended interaction and updates to page layout.

Mockups and Interactive Prototype

Mobile view of final Legal landing page.

4: Create a spec sheet for content authors for current and future updates.

  • Handoff to authoring with detailed instructions for authoring showing the type styles from the CSS and the page interactions.

  • Set up a handoff document for authors to have a resource for all page updates (current and future).

Spec Sheet for Authoring

Summary

While not actively tested, bringing this into a more brand experience, the assumption is the content is written more relevantly to customers to understand and easier to navigate and find.

Project Timeline

4 weeks (May-June 2021)

The Team:

  • 1 UX Designer (me)

  • 1 Digital Marketing Specialist

  • 3 Legal Specialists

  • Authoring team

Tools Used

Adobe XD, Photoshop, Adobe Experience Manager (AEM)