Brand Visuals for CX,
UX and UI Design
A focused brand voice helping create break-through visuals, challenge conventions, and deliver
real results for UX&D-UI.
Role & Visuals Provided
– Brand Research & Project Strategy
– Brand Voice & Content Strategy
– UX/UI & CX
– Visuals / Graphics / Content
– Interactive Design
After 30 Years of successfully positioning their company as an industry leader in home-garage security doors, Beam Labs branches out with an updated Ecommerce and Website experience.
Our team used key resources to uncover and tell the Beam Labs brand story; focused on a better understand of key target customers and building brand loyalty. The initial digital product lacked a holistic, branding cohesion and design continuity. Our aim was a complete redesign of the user experience and UI design from the ground up; making the product more engaging for the users.
• Identify and reduce user pain points to drive sales.
• Build projects around CX, UX and business goals
• Content and context more informative, easy and enjoyable to use
• Develop a scalable product & provide CMS / Marketing
• Build trust and loyalty with customer base = Brand Equity
• Reshape the customer's Behaviors
• Increase the adoption of the product = more Revenue + Metrics
• Create accessible, functional and valuable products
• Go to market ASAP - High-quality MVP / QUICK WINS FIRST!
Phase 1: Successful Visuals Begin with
A Planned Brand Story Guide & UX Paradigms
Design-Thinking process to uncover unmet user needs and project solutions.
Before I could dive into visuals, our team needed a detailed roadmap to help communicate the brand clearly throughout all phases of the campaign: Web-Mobile, Ecommerce, Marketplace, App store, eBlast.
With team collaborations, we were able to developed a detailed Brand Story and Voice. The Brand Story Strategy was used throughout each phase of our marketing campaign from user experience to final visuals.
The data gathered during user research helped to uncover pain points, client needs, users expectations; aiding in the creation of personas, journey mapping, customer flow and CX strategies. Once fully analyzed, we developed actionable steps and used the foundational research for all user experience/empathy design, use cases, as well as, content strategies, ideation and rapid-iterative prototypes for UI content and visuals.
During the discovery phase, I unlocked key User Experience Metaphors and Use Cases to add credibility and validation; applying these to my empathy-based designing. Example metaphors used in my UX&D: 'a safe bet' , 'safe and sound', 'you're in good hands', 'on top of the world', and 'breathe easily'.
Phase 2: Beam Labs Digital Graphics
and Responsive Design
Using the Brand Story, I created a unique experience for website, email, marketing content and Interactive Mobile App Design.
BEAM LABS RESPONSIVE WEBSITE
UX Design to remove Friction from User interaction - I incorporated CX, UX&D paradigms and UI Visuals showcasing the Brand Story and User Experience.
Visuals and assets design included:
Content strategy, CTAs, layout, wireframe, prototypes, Icons, Illustrations, informational architecture,
and final Hi-Fidelity Deliveries.
Mockups to Prototype: Photoshop, Illustrator, Sketch, InVision / Final Responsive: SquareSpace
Phase 3: Beam Labs Digital Graphics for both
Ecommerce and responsive website
I created the UX&D, wireframe prototype and High-Impact Final Art: meeting the project requirements and brand guidelines.
Illustrator - Photoshop,
Sketch to Zeplin
Photoshop design for content graphics: using the Brand Guidelines and the
Additional: Breakdowns for on-brand content.
Amazon Marketplace Iconography, Visuals and Supporting Graphics
Custom Visuals for Website Pages and Ecommerce Experience
Informational PDF Collateral for Website
Created using: InDesign
Mobile App UX Design
Case Study & Paradigms
Creating impactful, targeted and friction-free Interactive Designs.
Problem: After reviewing and researching user pain points within the Mobile App, I noticed the user making the same task mistakes; users over-thought at a critical decision point and neglected to select the linked option of 'settings' under main title 'Home'. Setting was not being perceived as a 'clickable link' to discover more data to the user. As a constraint, the word 'Settings' need to remain the current spot on the Mobile UI interface.
I designed and created Use Case Scenario and Journey Map to uncover the best solutions.
Solution: UX to ease the users friction of cognition, altering user perception of tasks and preserve the economy of actions for the user. I decided to adhere to common UI interaction requirements and UI consistency / conventions.
Mental Model: Settings with UI Angle/Caret icon to indicate a menu of data. The Caret's proximity to the Word was also considered for clarity of intended use.
The outcome met the business and user's needs. Lessened the steps for users and
aided in the intended functionality of the interface.