High Impact
Brand Visuals for CX,
UX and UI Design

beam

labs

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

OVERVIEW

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.

PROBLEM STATEMENT

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. 

KEY OBJECTIVES

• 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.

Amazon-ScreenShot-2.jpg

Amazon Marketplace

As the Senior Level Designer, I planned, developed and created all the Brand visuals with a detailed content strategy for Customer Experience (CX) on Amazon.com Ecommerce Marketplace / Vendor Central. 

I learned a great deal from reading materials and topics relating to Story Branding. The book 'Building a Story Brand' by Donald Miller was my primary inspiration for this project. 

SCOPE
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.

DISCOVERY

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. 

TAKE AWAYS

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'. 

Whiteboard-Build copy.jpg

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

beamlabs-webpages-1.jpg

Phase 3: Beam Labs Digital Graphics for both
Ecommerce and responsive website

Alexa-Email-Template-V2.jpg

EBLAST CONTENT

I created the UX&D, wireframe prototype and High-Impact Final Art: meeting the project requirements and brand guidelines.

Illustrator - Photoshop, 
Sketch to Zeplin

Screen Shot 2019-12-19 at 4.39.48 PM.png

APP STORE
Photoshop design for content graphics: using the Brand Guidelines and the
User-Persona Voice

Additional: Breakdowns for on-brand content.
Amazon Marketplace Iconography, Visuals and Supporting Graphics   

Amazon-QuietBelt-Build.jpg

VISUALS HELP TELL THE STORY

Many times the project requirements or content are not fully available or may need a customized look.

 

Using a process of creative, technical, photo-bashing and visual design, I created graphics that when developed, are useful, adaptable and thoughtfully designed. 

MIXED METHOD

COMPOSITE

While the concept may be planned initially, often times elements need a specialized approach & unique enhancements to solving a complex challenge.

 

As a solution, I used 3D and Photoshop to create a Belt Drive look; which if photographed  traditionally would be difficult to capture this look; adding the Brand Story to finalize. 

Amazon-NotificationsBanner-Build.jpg

INVISIBLE MAGIC

Don't have an image of an exterior facade with Modern wood trim or lighting fixtures?  No worries, I'll solve that problem with Photoshop, FX brushes and compiled references along with a killer knack for lighting effects. 

 

Breakdown of my design techniques - Hocus Pocus!  

Amazon-EdgeLight-Build.jpg

MANY ELEMENTS INTO ONE

One of the most difficult images to 'get right' is a 'Day-to-Night' Composite. Essentially: make 'what's not there' look very accurate!

 

In this case, the client was very clear: make it semi-bright on one side and "not too dark" on the other. Seems easy, right?  In the process I had uncovered unique ways to approach my art and translate feedback while delivering fantastic results. 

Custom Visuals for Website Pages and Ecommerce Experience 

BeamApp-Specs-v2.png
 Informational PDF Collateral for Website
Created using: InDesign 
Beam-PDF Document.jpg
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. 
 

Iterations > Solutions > Tested > Implemented
Settings-Beam.jpg
LI-In-Bug.png

Copyright © 2020 Rick Makoul All Rights Reserved