// INTERACTIVE DESIGN //
Interactive piece introducing new B2C Performance Marketing Initiative that launched in Q4 of 2021.
Overall Marketing Objective: create a piece to take clients and new prospects through a builder widget that teases how the program works.
Role: Visual Designer, UX/UI
- Led conversations around design to art director, copywriters and stakeholders (product and sales)
- Designed and developed piece from conception / lo-fidelity and hi-fidelity wireframes to final piece.
- created dozens of assets surrounding the final piece including digital ads, powerpoints, and sale slicks
- continued to maintain and make revisions alongside copywriter and stakeholders
-Launched in Q4 and generated 250K in revenue by the end of 2021
-Enabled product and sales team to present and discuss new marketing initiatives to clients and stakeholders.
view live site here:
This piece was meant to serve as both a hands-on tool that would enable sales to through their client calls/discussions and also as a standalone piece that prospects could walk through on their own if they come across this through marketing efforts or organically,
Client Success Manager
A tool to walk clients through a new marketing program
Program is convoluted with many steps and could get confusing without a visual aid
Persona 1 use case:
Client Success Manager would use the piece to walk clients through how the program works.
CEO of a community Financial Institution in Vermont
New marketing that is targeted specifically to their audience, uses their own voice in the messaging and the brand colors.
Financial Instituion Challenges:
Not enough budget to hire a marketing agency or a marketing department.
User Challenges: Not tech savvy, doesn't keep up to date with web trends (no distracting interactions/ animations) Needs information delivered quickly in a clear and easy-to-understand way.
Persona 2 journey:
CEO of community financial institution stumbles upon a LinkedIn ad from Kasasa advertising this piece.
Wireframing and Prototyping:
Initial lo-fi wireframe:
The initial wireframe was laid out as a classic long-form infographic that outlined the steps that explained how the program worked.
Challenges: The design wasn't streamlined and would take several minutes for a user to get through.
Final lo-fi wireframe:
The final wireframe contained a condensed widget that users could interact with to take them through a series of steps that outlines and demonstrates how the program works.
Design decisions and Heuristic analysis:
Kasasa was in the process of a rebrand that was still unannounced at the time of this product launch. The challenge was to use the existing brand colors as shown below in a visually new way that would seamlessly transition to the new brand launch.
The goal was to create components and a layout that could be carried seamlessly into a new brand look without knowing what the end result of the new brand would be.
Old brand colors:
Visibility: pulse animations were added throughout to lead users through the steps in the builder widget
Match: The user is taken through the page with the two main categories then taken through a builder widget
Consistency: Icons used at the top of the page are used within the builder widget
Recognition: Steps are outlined for users to follow
Flexibility: Users are able to navigate back and forth between each step at their own pace by using the tabs in the widget
Help: Steps are listed out in a concrete way to accomplish the task with the addition of visual markers to help aid users along.
Version 2 (UI redesign):
Version 2 of this piece leverages the company's new brand colors and components, following design systems that were put in place across our B2C web and mobile experiences while also using components from version 1 of this design.
Visibility: I felt the design of the previous version felt cut off / split into blocks that didn't flow or encourage users to continue to move through the piece. The hover functions on the top icons of the previous design felt like a separate element from the rest of the piece.
Match: With the divide in the previous design it felt like users were meant to select or take an action in the first section and it wasn't clear what that was. With this new design, I tried to leave room for users to read through the channel and product offerings, allowing them to hover over and learn more about the icons if needed as nuggets however this would not make a substantial impact in their overall experience.
Consistency: Icons and colors are consistent within the entire design.
Recognition: Rings around every icon in the previous version was confusing to users. This new version highlights only the icon that is meant to get selected.
- A cleaner and more open design allow users to navigate through the piece in the correct order without feeling like each portion of the page are separate from one another.
Takeaways / User Analysis:
Version 2 is currently in beta so there is no data to compare to version 1 however, looking at the data from version 1 if I were to re-visit and redesign this tool I would consider some of the points below:
-Step 2 involved choosing between 2 selections. The option to do this was possibly confusing for users / led to the least engagement out of all the other steps. Surprisingly, despite the confusion, the engagement did not fall off after Step 2. This led me to believe users were clicking through and engaging with the interactions multiple times throughout their experience. (Fig 1.1)
-The main CTA that led to the demo form was placed at the bottom of the page and got covered up once the user clicked on the pop-up button to show some samples. Only 71 users out of 141 knew to close the pop up to reveal the main CTA (Fig 2.1). This led to only 2% of users clicking the outbound CTA link. (Fig 2.2)
-The hover interaction on the top of the page that allows users to learn more about the product / channel offerings do not collect any data. I would likely convert this to a click function to track engagement / interest.
Fig 1.1 (click to enlarge)
Fig 2.1 (click to enlarge)
Fig 2.2 (click to enlarge)