UX/UI Design
Case Study
LPL Financial's Video Customization Portal
The Ask
Design an application that allows advisors to personalize a selection of white-label marketing videos, which they can download from the Marketing Gateway.
User Story
As an independent wealth advisor, I want a way to add my business logo and contact information to white-label marketing videos provided by LPL Financial for marketing purposes.
Solution
The final application was designed using a simple progress-step UI design pattern that walked advisors through the personalization of their selected marketing videos.
The Design Process
Discovery & Requirements Gathering
Working alongside the lead Web developer, I met with internal business owners to gather requirements for the application. During the discovery phase, we identified the following items as must-have features:
- Maintain established Marketing Gateway branding and style standards.
- Users can select from LPL’s entire library of white-label marketing videos for customization.
- Users can customize videos with a logo of their choosing.
- Users can add business contact information to a slide at the end of the video.
- Users may customize the contact slide’s colors to match their business’s branding.
- Users may be notified via email when their custom videos are available for download once processing is complete.
Brainstorming & Ideation
Following the interviews, the Web developer and I organized the information we had gathered, forming ideas for how the application would look and function, and developed an action plan. I used two simple tools during this phase — task flow diagrams and low-fidelity sketches — to visualize our ideas before spending time on more detailed design assets.
Task Flow Diagrams
Task flow diagrams provide a high-level view of the steps taken to accomplish a given task within an application. A separate diagram was created for each task to identify key decision points and simple interactions a user would encounter while creating and downloading a custom video.
Low-fidelity Sketches
Using the task flow diagrams as a blueprint for the application design, I put pen to paper and sketched out rough ideas for the user interface. Sketching the ideas first allowed me to experiment with different layouts and test various design patterns before presenting our ideas to the stakeholders for feedback.
Wireframes and 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 improve the fidelity of the designs, I created a series of wireframe layouts and added wireflows to describe how users would interact with the application.
Wireframe Layouts
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 Development
Next, I developed a wireflow diagram to describe and map out essential features of the user interface in place of a prototype, which takes more time and would have been overkill for this particular application. Wireflows visually communicate the various touchpoints a user might encounter along their journey. They add context that task flow diagrams may lack while remaining relatively easy to create and maintain.
Visual Design
With its structure planned out, I started working on the applications’s aesthetics. As the last step before handing off the design assets to the developer, I created a set of detailed high-fidelity mockups, along with a basic typography and color style guide, defining the final look and feel of the application. The mockups and style guide served to accomplish two goals:
- Acquire final sign-off from the stakeholders before beginning application development.
- Provide the developer with an approved UI to use as a standard for acceptance.
High-fidelity Mockups
I created a high-fidelity mockup for each wireframe layout to illustrate how the finished application would look and feel to the end user. I used the Marketing Gateway's style guide as a foundation to ensure brand consistency. UI features unique to the Video Customization Portal were designed in detail to give a comprehensive view of the application in its finished state.
Typography & Colors
With a high-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 Marketing Gateway's style guide, which was then used for system maintenance moving forward.
Product Release & Feedback
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 asked to note 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 change requests, the product was released to production where advisors quickly adopted it. The application was well received and became a regular part of our system maintenance and development release cycle.