The goal of the project was to better educate prospective partners of company service offerings, and provide current advisory partners with access to white label tools and resources, created to better inform and service their client base.
Research, Design, and Wireframing
Since the project did not contain a budget for comprehensive user research, I planned a quick guerrilla study over the phone with the director of business development and a number of financial advisors. This gave me a glimpse of the goals and needs of both internal stakeholders and end users. By doing this I was able to identify pain points, uncover constraints and come up with actionable ideas.
The above research was also synthesized to develop a persona. This was primarily used to ensure that I was on the same page as the client but also to test certain assumptions when it came to defining the target audience. Below is an example of one of the persona’s used in the project.
At this point I have a good understanding of user needs and frustrations, and from talking to company stakeholders – business goals. Using analytics data, I first created a list of well performing pages on the current company website to integrate into the new architecture. From this point, I mapped business and advisor needs, and goals to content types and pages. I interviewed company stakeholders to test assumptions on how they access information and to ensure I was getting their feedback at every critical step. After a series of revisions, an experience map was created.
Wireframing is an iterative process, and it was important to me to conceptualize a design that would resonate with advisors and staff. Notebook sketches, post its, together with the experience architecture formed the basis for wireframe exploration. I tested numerous design patterns, conceptualized page element behaviors and explored content relationships. Presentations on design decisions helped further facilitate and validate actions, assumptions and goals.
I was tasked to create a child-theme to speed up development rather than using a premium bloated WordPress theme. By using a child theme, I could cut down on development time by taking advantage of the stock navigation that ships with the theme. I opted to use Advanced Custom Fields to connect content editors with page content without needing to code.
In developing the website, I wanted to ensure that the code and content were built to scale and grow with the company goals over time. I created both a development and staging environment for the project to live on. Once WordPress was up and running, I began by building a WordPress plugin to manage custom post types and taxonomies the site would require. Using the awesome wp-core plugin, allowed me to batch install my most frequently used plugins to kickstart development. The current incarnation of the website suffered from disorganized and redundant code. I opted to use a combination of ITCSS and BEM to better organize site styles over time and to implement a system that anyone working with the code could easily understand. I used gulp.js to handle browser reloads, and to concatenate and minify code and mages.
The design features new service areas and offerings, rich content for current and prospective financial professionals working in the independent advisory niche.
The footer was reorganized to provide quick access to rich content and service areas. It uses flexbox to handle equal column spacing.