BESPOKE MARKETING

Objective:

Create an interactive piece introducing new B2C Performance Marketing Initiative, Bespoke that would take clients and new prospects through a builder widget that teases how the program works. 


Contributions: 

- 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 using Adobe Illustrator, Adobe XD and Ceros.

- 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


Results:

- The program generated over six figures in revenue in it's first quarter.

- Enabled product and sales team to present and discuss new marketing initiatives to clients and stakeholders.

User Profiles:

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,

Feature Planning:

Worked with copywriters, and marketing stakeholders to decide on which features were to get added and how we presumed the layout would look.

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 CSM / Client to get through.

MC-6690 Bespoke How It Works Preso-03.png
MC-6690 Bespoke How It Works Preso-03.png
MC-6690 Bespoke How It Works Preso-03.png

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.

MC-6690 Bespoke How It Works Preso v3-01.png
MC-6690 Bespoke How It Works Preso v3-01.png
MC-6690 Bespoke How It Works Preso v3-01.png
MC-6690 Bespoke How It Works Preso v3-02.png
MC-6690 Bespoke How It Works Preso v3-02.png
MC-6690 Bespoke How It Works Preso v3-02.png

Design decisions:

V1 Prototype:

Version 1:

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.

Heuristics:

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.
 

Visibility: pulse animations were added throughout to lead users through the steps in the builder widget  


Match: Used familiar category labels and real-world terms in the builder widget, avoiding internal jargon, so users could easily understand what each section referred to without prior knowledge.

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: A step-by-step guide and clear visual markers were included to support users who needed guidance, especially if they were walking through the tool without a sales rep.
 

Takeaways / User Analysis:

-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

Fig 2.1

Fig 2.2

Version 2:

V2 Prototype:

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. 

Heuristic improvements:

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. 

Heuristic improvements:

Visibility: The original layout lacked continuity and visual guidance, which made it unclear what users were supposed to do next. In the new version, layout and interaction flow were improved to make progress and available actions more visually obvious- increasing visibility of system status.


Match: In the updated design, we used intuitive labels and familiar marketing terms to help users easily understand the types of offerings, aligning the experience with how users naturally think about campaign planning.

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.