Custom Site Wizard

Custom Site Wizard (CSW) is a ten year old internal application created by Broadridge. It’s a desktop application used to customize several of Broadridge’s consumer facing applications. This six month project’s goal was to redesign and overhaul the structure of CSW to pave way to the launch of Broadridge’s other application’s redesign, ProxyVote.

My Role: Lead UX Designer, Product Designer, UX Researcher

Tags: Product Design, UX Design & Research, Finance, CMS, Customizations

The Research

Business Justification

ProxyVote’s redesign was another project that started prior to Custom Site Wizard’s redesign. Since ProxyVote was recreated from scratch to modernize its interface, using the existing outdated UI of CSW would disconnect the two applications and would break Broadridge’s scope of One Broadridge. This project’s goal is to redesign CSW by modernizing its interface using Broadridge’s updated Design System while also refining CSW’s functionalities to ensure it has the best user experience. 

User Pain Points

Users of the existing CSW were interviewed to gather insights and pain points from their experience of customizing websites specifically ProxyVote. The following is a collection of Pain Points provided by the users.

The following is a screenshot of the Existing CSW before the redesign showcasing the old Structure

Personas and Empathy Map

Shelly McKayla

Senior Broadridge Associate

Shelly is an experienced user of CSW. She has been in the financial industry for 20+ Years. She likes to cling on to the current UI and is afraid the redesign would be too drastic of a change for her team.

Key Wants: Wants the ability to preview what she is customizing for the client live and as is, Wants a mobile view

Debbi Shanse

Junior Broadridge Associate

Debbi is fairly new to Broadridge. She has only been in the financial industry for about 5 Years. She is quick to learn and is great at training.

Key Wants: Wants a more intuitive way to edit UI components on the page, Wants to restructure the navigation of CSW

Using Shelly as a Persona, an empathy map was created to gather more insights on the current navigation and user flow of the existing application. The main task used is customizing ProxyVote’s banner into a different banner using CSW.

User Stories

The following is the defined user requirements for the Redesign. These were the critical requirements found from the research. In order to stick with MVP, an analysis was made between impact and feasability. 

Inspiration

I researched similar customization applications and found that the following applications are close to what the users do from their day to day for CSW. 

Wix is a Content Management System that allows the users to drag and drop and see the updates they do as they customize. There is also the ability to make updates live and preview the page from a mobile point of view. 

PROS: Drag and Drop features, live updates, mobile view

CONS: Slow performance, customization modals are on top of the screen and is hard to see the changes at times, Multiple UX functionalities require third party plug ins

Similar to Wix, WordPress is a Website Builder that also allows for desktop and mobile customizations with live previews. Unlike Wix, Wordpress gives a ton of freedom for customizations with an extensive HTML, CSS and Javascript functionalities.

PROS: Thousands of themes and customizations, Extensive coding capabilities, Robust community for references and documentation

CONS: Requires an overwhelming dashboard for customizations, Different sites has different plug ins and can drastically alter the experience for different users

The Ideation

Solution Workshop

The following are tentative solutions produced from a Solutions Workshop

User Flows

User flows were used to ensure all three types of customizations would follow the same structue and experience

Low Fidelity Mockups

Low Fidelity Mockups were used to sketch the structure of the new redesign

The Design

The Design System

Custom Site Wizard is an application designed under Broadridge's Design System. The following are some of CSW's Design elements and UI.

High Fidelity User Flows

Desktop View and Mobile View

Desktop and Mobile toggles can switch back and forth 

Side Flyout

Any customizable item is formatted with a flyout

The Final Product

Great Intuitive way to switch between Desktop and Moobile View

Flyout show and hide capability allows users to view Preview window with no interruptions

ADA Checker built in with every component ensures ProxyVote's customization is ADA Compliant

The following module shows the Before and After of the UI

Modern UI for Formatting Text. No more HTML Formatting

The Evaluation

Methodology

Custom Site Wizard was implemented and launched on January 2021 alongside ProxyVote's worldwide Launch. Two months after the result, the UX/UI team started Usability testing the final product to measure the effectiveness of the redesign. User Interviews were conducted again with the same internal users interviewed during the Research Process. The key measurables were how quick users were able to complete a task and how efficient they are able to work using the new UI

Test Results

The followiing are some of the most common feedback provided by the users

Other Metrics