MULTIDISCIPLINARY DESIGNER | UX/UI - INTERACTIVE DESIGN - MOTION DESIGN
// UX/UI DESIGN //
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.
Role: Visual Designer, UX/UI Designer
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:
-Launched in Q4 of 2021 and generated 250K in revenue by the end of that year.
-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.
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:
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.
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:
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.
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 (click to enlarge)
Fig 2.1 (click to enlarge)
Fig 2.2 (click to enlarge)
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.
