digitalreach - moving the platform from flash to html

Client:  BLUERUSH       Project Date:  2017
About the Project
Digital Reach is a content engagement platform used by over 75,000 advisors from major financial institutions all cross Canada. It empowers them to send personalized, compliant, trackable communications to their clients. It was - and still is - a great product, but clients were unhappy with its outdated Flash design and limiting workflow.
My Role
PRODUCT DESIGN LEAD
I led the design for the HTML update of DIGITALREACH. I worked alongside an agile team of developers, a business analyst and a product manager.
I focused on simplifying the user experience of the product's core workflow - creating and sending content deliveries. I also improved the look of the UI, and designed it to accommodate future growth and feature additions.
About the Project

Digital Reach is a content engagement platform used by over 75,000 advisors from major financial institutions all cross Canada. It empowers them to send personalized, compliant, trackable communications to their clients. It was - and still is - a great product, but clients were unhappy with its outdated Flash design and limiting workflow.

My Role

product design lead
I led the design for the HTML update of DIGITALREACH. I worked alongside an agile team of developers, a business analyst and a product manager.
I focused on simplifying the user experience of the product's core workflow - creating and sending content deliveries. I also improved the look of the UI, and designed it to accommodate future growth and feature additions.

a bit of historical context - the ORIGINAL flash product

The product was originally designed and built in Flash. It had a confusing, cumbersome workflow, the existing UI wasn't designed to grow with the product, and it was in dire need of a design update. Here's a few screenshots prior to the redesign:

our key goals for the redesign

The main purpose of this project was to move the DIGITALREACH platform from Flash to HTML. However, we also saw a great opportunity to improve the product at the same time.

Accommodate existing users & make the experience better
There are thousands of financial advisors using the product every day to send out important communications to their clients. We had to ensure that the changes we made weren't going to severely impact their work flow by forcing them to learn a completely alien UI. At the same time, we wanted to improve the experience and design solutions that would mitigate some of their larger pain points.

Redesign mobile first
One of the biggest limitations of the Flash product was that users could only access it on their desktop computers. With more advisors working remotely, being able to access the platform from their mobile device was key - and we wanted to ensure that the product was easy to use on any screen size. Designing mobile first allowed us to look at the most problematic workflows and streamline them.

Better implementation of client brands
DIGITALREACH is utilized by numerous financial institutions - each with their own specific colours and branding. One of the goals with the redesign was to create a design system that can accommodate any client branding scheme with minimal effort on the client's side, and the development team.
mobile phone with digitalreach

ALWAYS START WITH SKETCHES

To get the team on board with my vision, I sketched out some of the main workflows of the product, scanned them, and made a quick prototype using Invision. Because some of the product team works remotely, this was an easy way for us to communicate, discuss and quickly iterate without spending a lot of time building a more high fidelity prototype.

Some early sketches

creating a style guide

The old DIGITALREACH product never had a style guide or any kind of component library to follow. This made for a lot of inconsistencies throughout the tool. As well, it was hard to onboard a new designer or front end developer without anything to reference. During the redesign, I made sure we had a working design library that we were constantly adding to.

creating a colour system

With over 30 large financial clients on our platform, we had to design an efficient system to manage all of their brands and represent their colour schemes beautifully. What we came up with was a system of global colours and brand colours that defined every element in the product.

How the colour system works
The client would define 4 main brand colours. Those 4 brand colours could then be applied to 5 'style variables' which cascade throughout the product. The rest of the elements in the product are defined by the global colours.

If the client also had brand colours for charts and graphs, they would be populated here too. Otherwise tints and shades of the 4 main brand colours would be used.

Why the colour system works
For the client:
We created a versatile system that allows any colour palette to be displayed beautifully.

For our development team:
Any time a new client is onboarded, the developers only have to define 4 hex colours, and 5 style variables. Easy peasy.





mobile phone with digitalreach

bringing it all together

After a lot of prototypes, iterating, and internal testing, we finally had a design system we were happy with. The following screens show the updated design applied to the DIGITALREACH brand.

Home Module

Notification Panel
One of the best improvements we incorporated was to create a notification area for advisors. Any time they log in they can refer to this area for alerts about new content added to the platform, delivery issues, system alerts and more.




mobile phone with digitalreach

Library Module

Library Screen
Library Upgrades
We made a lot of UX improvements to the Library module:

- Larger, more visual card items that lazy load as the user scrolls. No more pagination.

- Moved the filters above the library items and allowed the user to apply multiple filters

- Improved the Search function

- Added the send list and main CTA buttons to an anchored bar at the bottom of the screen so that they are always available.




mobile phone with digitalreachmobile phone with digitalreach

Contacts & Groups

Library Screen
Contacts & Groups Module Upgrades
We made significant UX improvements to the Contacts & Groups modules:

- Contacts & Groups used to be on the same screen together which made it cumbersome. We've now moved each into its own module.

- For consistency, the icon that's used to add contacts to the send list, is the same icon that's used in the Library.

- Added the send list and main CTA buttons to an anchored bar at the bottom of the screen so that they are always available.

- Created a new feature which allows users to transfer contacts to one another.




mobile phone with digitalreachmobile phone with digitalreach

Account and Role Selector

Library Screen
Multiple Roles
This is a new feature that we incorporated into the redesign. It allows a user with access to more than one role (for example, an Advisor and and Admin) to switch between the roles without having to log in and out.

Account Selector
The new Account Selector feature allows administrative users to act on behalf of their managers and send deliveries via their accounts.





mobile phone with digitalreach
mobile phone with digitalreach

workshops that work

During the redesign process, we had regular workshops with the team anytime we wanted to change a workflow or update a feature. We would map out different solutions on the whiteboard, and then by the end of the session, I'd go away with a few strong ideas to explore. One of the workflows we debated on the most was the delivery workflow.

Creating, populating and sending a delivery is the main workflow in DIGITALREACH. In the old Flash product, sending a delivery was frustrating because some screens weren't accessible until you were a few steps into the delivery, and if you tried to back track, you'd lose your work. We explored two options to improve this process:

#1 - Navigating the user to a 'Delivery wizard'
- a separate part of the product where the only task available is to create and send a delivery.

Pros: it focuses the user to one task and would be very easy for beginner users to follow

Cons: It could frustrate power users who want to multi-task or work more efficiently.

#2 - Having an omnipresent 'Send List' that populates a new Deliveries module.
-
acts as a delivery container so that the user can add to his delivery as he's navigating throughout the product. Anything added to the Send List could be reviewed in the 'Deliveries Module'

Pros: It allows the user to create a delivery according to their working style.

Cons: It could be confusing to some newer users to have more than one task on screen.
Whiteboard deliveries

After prototyping and internally testing both options, we decided to move forward with Option 2. Below is quick look at the Deliveries module.

NEW Deliveries Module
What the old product was missing was a section for the user to properly review the delivery they are creating. We also thought it was important to allow the user to edit their delivery at this stage without having to start over. We're currently looking to add a scheduling feature to this module.
Create a delivery screen

Update - ONboarding

One of the roadmap items I was really pushing for to include in the HTML release was onboarding. The old product had no onboarding process at all. New users were required to go through a lengthy training session and refer to PDF documents for help on how to use the platform.

It took a bit longer than I hoped, but DIGITALREACH finally has onboarding! We signed up for a product called 'WalkMe' - a browser based product that allows us to add step by step walkthroughs, alerts and more to our platform without writing any code. This means that my UX team could own the onboarding process from beginning to end. Perfect.

WalkMe was a lifesaver
The DIGITALREACH platform is extremely configurable for our clients, so creating walk-throughs and segmenting them properly for each client group proved to be a challenge.

We had to ask the front end team to create variables in the code for each module (section) of the product and for each client. My UX team also had to learn a little bit about jquery selector elements. All in all it was a great learning experience and we now have a system that allows us to create helpful walkthroughs for onboarding, new feature releases, alerts, updates, etc.

We were even able to create an FAQ pop-up that allows the user to launch any of the walkthroughs on their own if they need assistance with a module.
WalkMe LibraryWalkMe LibraryWalkMe Library

The HTML redesign was a great success. We've gotten some great feedback from our clients and users and we're continually making updates to the platform

related works

BACK TO TOP
Want to see more?  Let’s go back to my  Portfolio