Introduction
In today's financial world, independent wealth advisors need more than just solid financial strategies to stand out; they need practical marketing tools that reflect their personal brand. LPL Financial tasked our team with creating a seamless and user-friendly application that advisors could use to personalize white-label marketing videos, giving them a powerful new way to connect with clients.
Through a collaborative and iterative design process, our team created an intuitive video customization tool that quickly became a favorite among advisors. It streamlined their marketing efforts, strengthened client impact, and ensured consistency with LPL's established Branding and Marketing Gateway styles.
The Problem
Independent wealth advisors lacked an easy-to-use tool for customizing white-label marketing videos with their branding while maintaining consistency with LPL's established guidelines. The challenge: How do we create a tool that ensures simplicity and brand integrity, enabling advisors to effectively promote their services?
Understanding User Needs
To kick off the project, our team met with stakeholders to conduct interviews and requirements-gathering sessions with internal business owners. Our goal was to fully understand the advisors’ challenges and aspirations with personalizing marketing materials. We left the sessions with a few key requirements:
- The app must maintain established Marketing Gateway branding and style standards.
- Users need the ability to select from LPL’s entire library of white-label marketing videos for customization.
- Users need the ability to customize videos with a logo of their choosing.
- Users need the ability to add business contact information to a slide at the end of the video.
- Users want the ability to customize the contact slide’s colors to match their business’s branding.
- Users would like to be notified via email when their custom videos are available for download once processing is complete.
Brainstorming & Ideation
Following our stakeholder interviews, the developer and I started brainstorming early ideas for the user flow and interface based on our key objectives. Using task flow diagrams and low-fidelity sketches, we quickly iterated on concepts to refine the application’s structure.
Task Flow Diagrams & Low-fidelity Sketches
Task flow diagrams provided a high-level view of the user’s journey through the application. Each diagram outlined the key steps, decision points, and interactions they would encounter while customizing and downloading videos. The diagrams acted as a foundational blueprint, helping us visualize how users would navigate the personalization process. Building on these blueprints, I sketched rough user interface layouts, using the task flows to guide my design decisions. Sketching allowed for quick iteration and exploration of different design patterns, enabling us to refine the interface before seeking stakeholder feedback.
Interaction Design
At this stage, we had a good sense of the direction we wanted to go with the designs, but we were still looking for more detail than we could get using sketches alone. To increase the fidelity of the designs, I created a series of wireframes and added wireflows to better describe how users would interact with the application.
Wireframes
Medium-fidelity wireframes were used to quickly iterate through layout changes without concern for non-essential details, such as images, copy, colors, and typography, that would be added or changed later. The wireframes included everything we needed to communicate our design concepts to the stakeholders while remaining simple enough that they could be modified to try out variations on the fly without much effort.
Wireflow
Next, I developed a wireflow diagram to describe and map out essential features of the user interface instead of a prototype, which takes more time and would have been overkill for this particular application. Wireflows are helpful tools for visually communicating the various interactions and touchpoints a user will encounter along their journey. They add context that task flow diagrams may lack while remaining relatively easy to create and maintain.
Visual Design
The final design stage involved translating wireframes into polished, high-fidelity mockups. This step was crucial in getting stakeholder approval and providing the developer with clear guidelines for implementation.
Hi-fidelity Mockups
Typography & Color Style Guide
With a hi-fidelity view of the application fully approved for development, I created a simple style guide detailing essential elemental UI typography and colors unique to the new application's design. The details of this style guide were eventually incorporated into the greater Marketing Gateway style guide, which were then used for system maintainence moving forward.
Product Testing & Release
I worked closely with the developer at every stage during the application’s development and reviewed the application before each release to ensure consistency with the design plans and style guide. Once the product was released for testing, stakeholders were encouraged to review it on their own, provide feedback, and report back on any bugs they may have found. Additionally, we selected a few random volunteers from the marketing department who had no previous exposure to the application to put it through its paces. Volunteers were given a series of goals to accomplish within the system and were asked to take note of any issues they encountered or suggestions they had for improvements.
After a few development iterations in which the developer and I addressed any bugs and/or change requests, the application was released to production.
Results
The Video Customization Portal was quickly embraced by LPL's independent financial advisors, who used it to personalize their marketing videos and strengthen client relationships. It became a key tool in LPL’s marketing offerings, improving the user experience and maintaining brand integrity.