Pro Financial Network Redesign

Visual Design | User Experience | Coding

Done in Q4 of 2017, this financial advising company was looking for a fresh start and a message redirect.
Here's the breakdown:



The Problem


The client had reached out to me looking to update their website and give it a more modern & professional look and feel. They also wanted to change the focus of being a jack-of-all-trades type of financial advisor to focusing more on physician disability insurance. They're main goal for the site was not only to update the appearance but also increase their potential client base.


The site was built upon a financial advisor/accountant focused platform called Broadridge Advisor Solutions, which was essentially a custom CMS that also offered specific content for each advisor to publish. Widgets such as articles, calculators, newsletters, tax libraries, glossaries, stock market tools are just some examples on what this platform makes it easy for these advisors.


Originally I was nervous because I was unsure how much creative freedom I had within this platform. At first, I didn't even know if I could edit any of the HTML or CSS. Thankfully, after some exploration and a little help from customer support, I was comfortable in starting a design with this new platform. Being a management system that my client already knew, this decision was recommended as opposed to moving over to a platform such as WordPress.

Site before redesign

Working in Photoshop

The Journey


The client and I met several times at the very beginning, mostly to see what he had in mind for this project. Before starting any design, I wanted to be clear what exactly he was looking for. Asking questions such as:


  • ▪ What are your overall goals for the website?
  • ▪ What do you want users who visit your site to do once they're here?
  • ▪ What do you like about your current site's design?
  • ▪ What content elements do you want to keep?
  • ▪ What are the big changes you want to see on the site?
  • ▪ What websites do you find inspiring?

After that chat, I started to give him ideas on what I was already thinking for the site's design, and everything was flowing very smoothly. In fact, there was even some preliminary sketching during the meeting as a visual to help my client understand what I had in mind. After parting, there was an immediate move to finish the sketch while it as still fresh.


Sketching came into the mockup phase of the project. This was done in Photoshop. This was almost a nostalgic feeling because it had been a while since using Photoshop as a mockup tool. Recently, I had been prototyping within Axure. Due to the limitations of the Broadridge CMS, I knew I could change the appearance of the site, but wasn't too sure of the functionality and therefore did not want to use a prototyping program to create the vision on this project.


Going over the mockup went extremely well and there were very minimal changes. We started talking about content, calls to action and supporting images. Once everything was finalized, the coding began.


Wrapping It Up


Coding of the site was actually the most challenging part of all. They're editing functionality was in a WYSIWYG editor which had a source editor, but would often bug and revert my changes. But after some persistence and a lot of patience I found a method that worked. Unfortunately, some of the ideas within the mockup were not able to be duplicated due to limitations in code editing and there was no work around available.
Making the site responsive was of course of must and made multiple stylistic changes to make sure that usability was high on mobile. Adding meta data, keywords and other SEO influencers were my contribution in the realm of SEO and I encouraged my client to have content with specific key words included.


After going over the preview site, the new redesign was finally launched. There were a few content changes post-launch, but otherwise the Q&A went smoothly. The verdict is still out on if the redesign has had any major significance for my clients business, but hoping for the best.

Coding the CSS


< Go Back