UX Design

Project Study.

scroll

Website, Mobile, and Ecommerce designs for people who want to purchase the best and latest technology in Home Security-Internet of Things and Garage Door Openers.

ROLE

UX-UI Design

Creative Direction

CLIENT

BeamLabs

TIME FRAME
4 Months

SOFTWARE

Illustrator, Photoshop

Sketch, InVision, Zeplin

 

Focused brand voice and UX research helping create break-through visuals and deliver measurable results

ROLE DETAILS
– Brand Research & Project Strategy

– UX/UI & CX 

– Lean UX

– Brand Voice & Content Strategy

– Visuals / Graphics / Content

– Interactive Design

PROJECT OVERVIEW

After 30 Years of successfully positioning their company as an industry leader in home-garage security doors, BeamLabs branched out with new IoT products, an updated Ecommerce, Mobile and Website experience.

PROBLEM STATEMENT

Our team had little to no Statistical Significant data nor Qualitative research during the first UX Workshop meetings. In order to build our digital products, I did research, mapping and strategy to find solutions to usability issues. The product currently lacked: on-Brand deliverables, user experience-empathy and consistent user interfaces.

CONSTRAINTS

Most of the design work was implemented on SquareSpace. The limitations were the contextual and real-world integrations for both Desktop and Mobile. 

KEY OBJECTIVES

• Identify and reduce user pain points

• Build projects around CX, UX and business goals
• Develop a scalable product & provide CMS / SEO Marketing capabilities
• Build trust and loyalty with customer base = Brand Equity

• Reshape the customer's behaviors with our product

• Increase the adoption of the product = more revenue

• Create accessible, functional and valuable products

• Go to market ASAP - High-quality MVP / QUICK WINS FIRST.

OVERARCHING UX DESIGN BUSINESS REQUIREMENT 

The main experience will focus on engaging the users with appropriate, on-Brand story information and product data; educating the users to make quick decisions and provide them with effective solutions. UX Goal: through persuasive design, create an experience guiding users to the Amazon Marketplace to make their product purchases efficient, usable and enjoyable.

01

To understand and uncover user needs and friction points for the product, I initially dedicated two weeks of UX Research and Analysis.

DISCOVER

PROCESS & GOALS
Before I could dive into visuals, our team needed a detailed roadmap to help communicate the brand clearly throughout all phases of the marketing campaign: Web-Mobile, Amazon Ecommerce, App store, eBlast, etc. Early in the process I performed several CX-UX workshops enabling us to develop a detailed Brand Story and our project strategy

CHALLENGE: My Research and analysis for this project:

- Quantify customer survey data

- Usability ecology and analyzing usability gaps 

- Brand Story, user and persona research

- Heuristic evaluation of existing product designs

- Mapping friction points and establishing actionable goals

- User Scenarios and Core User Journey

- Card Sorting and tree tests for taxonomy / UI architecture 

DISCOVERY AND SOLUTIONS

From our early meetings and compiled research data, I uncovered patterns of user friction points in the existing UI ⎯ unidentified in prior designs. The quantitative data showed confusion in context and continuity throughout the functionality of the user experience, as well as, unmet user needs. After uncovering the specific requirements, we formed goals to implement these into the UX process and a strategy for MVP launch dates.  

 

Top-level actionable steps from aggregated data:

- Defined friction points to a strategy and project scope
- Goals documented for use during ideation workshops and design concepts

- Design discoveries through wireframe mockups and critical-fidelity prototypes

- Iterations for testing and validating UI flow explorations

INSIGHT & TAKE AWAY

During the discovery phase, I unlocked key User Experience metaphors and applied these to my Journey Map discovery and into the product designs. These added credibility and validation for the Design process. Thinking with user-empathy as our focus, I researched metaphors like: 'a safe bet' , 'safe and sound', 'you're in good hands', 'on top of the world', and 'breathe easily'.  The research revealed opportunities to help improve the UI designs moving forward and necessary for the brand voice.

UX Research and CX Analysis to understand customers and ways to design for optimal brand experience 

MENTAL MODELS & GUIDING PRINCIPLES

EMPATHY DESIGN

The user deserves to be in control and feel secure within and around their home without spending a fortune. The user wants to feel safe and the sense of security when protecting their family. Users feel most confident and happy when they have complete ability to find information easily and efficient means for purchasing.

 

Our digital product success will put the user in control and reduce their anxiety with clear and transparent information on making purchases. The UI will offer the right context and visuals at the right time and appropriately persuade users to make their purchases with confidence.

02

I used visualization methods to help uncover potential gaps in user flow, architecture structure and content strategies. From gathered user data and gap analysis, I formed Journey-Flow Maps, Context Scenarios, Cognitive Mapping, a Red Route map, and Project Priority Strategies.

DEFINE

Whiteboard-Build copy.jpg
Friction-Map.jpg
RedRoute.jpg
UI-FLow.jpg

03

I created new versions of wireframes and UI prototypes of the Calls-to-Action flow allowing users quickly navigate to products for purchasing. I also designed the digital product from MVP to final launch.

DESIGN

CHALLENGE: Through brainstorming, design Ideas, UI concepts, and applying a single-voice-of-truth, I iterated designs for the Mobile and Desktop UI as well as the Amazon Ecommerce Marketplace.

To Evaluate UX Heuristics and newly iterated Designs, I asked colleagues to test the usability of the Call-to-Actions buttons and features, highlighting the user flow from on-boarding to product discovery to purchasing.

As part of the solution focus, I referring back to our analysis to develop the UI designs, functions and interactivity. I focused mostly on hierarchy, user flow, clarity of navigation, accessibility, brand copy and on-Brand visuals.

RESULTS: the UI Designs were more useful, efficient and engaging for the user.

 

One thing that made our digital product more useable is the ability to quickly tell the brand story while engaging the user to form quick connections and seamless
Calls-to-Action for product purchases.

Homepage Design Iterative Stage - Before

screencapture-beamlabs-io-2019-10-31-10_

Iterative Solutions - After

BeamDesktop2.jpg

UI Consistencies-Continuity, Visuals & on-Brand Story

Making sure each digital product met the users needs, requirements and business specifications, I defined each design stage using UX strategies and the user experience framework.

 

The final results ensured we met Stakeholders expectations, user needs and goals.

MacBook-BeamLabs.png

04

I collaborated with marketing teams to design and develop the Amazon.com Ecommerce Marketplace experience, including on-Brand experience and visuals, and also working in tandem on all campaign projects.

DEVELOP

Amazon-ScreenShot-2.jpg
Beam-Website%20Banners4_edited.jpg

Auxiliary on-Brand Digital Marketing

Email UI Designs

Alexa-Email-Template-V2.jpg

App Store UI Visuals

BeamApp-Specs-v2.png

Challenges Summary

Our team didn't fully understand our current customers and potential users

No prior research was conducted to discover users pain points and the value proposition

There were unclear UI conventions and consistencies in all UI Layouts

We discovered undefined content strategies for visual designs and prototypes

Current Ecommerce site's visuals and experience were not fully defined nor developed 

My Solutions

  • I developed full-fledged products from scratch allowing users to quickly uncover their problems and provide them with quick solutions

  • Created unique experience designs for Amazon Ecommerce Marketplace

  • Created a Story Brand and UX Research. This helped us map the business model and define a unique value proposition

  • My in-depth research helped our team understand the core market and their key problems

  • Implemented content strategies to met business and user requirements

  • Created high-fidelity prototypes for digital products. These help us to examine the success of usability and analyze user behavior

05

During the end phases, I was tasked with evaluating the UX Design. I used A/B testing, validating and empathy-design to improve the UI.

EVALUATE

MY PROCESS

I created and implemented testing with team members to validate the products functionality, usability and efficiency.

 

Using a Lean UX paradigm, we implement the high-level wins and moved on to more sophisticated tasks to deliver the end product.

 

From evaluations, the following were the successful outcomes:

- Greater adoption of the products and ease of usability

- Customers were able to discover information and get to purchases quicker

- Using Customer Experience Design strategies (emotional, behavioral), the product was more engaging and persuaded users to take major actions towards purchasing products

- The on-Brand story was significant in generating Brand Equity and Brand Trust

- Met the key business objectives and project goals

- Lead generation and Product Sales increased by 60%

UI DESIGN ACCOMPLISHMENTS & GOALS ACHIEVED

 

Observations from A/B Tests and the user preferences:

- Context and content was easily accessible for user

- Gave necessary confirmation feedback to the user

- Hierarchy of elements gave more credibility to visuals 

- Content items kept simple and uncluttered

- Micro-consistency in text, visuals and color

- Reduced the burden for finding information and making purchases

- Clearly communicated the brand story, user location, actions and change of states

KEY TAKEAWAYS & RETROSPECTION

From the early stages, I discovered challenges to get UX Design buy-ins from the key Stakeholders. My goals were to help each member understand my design process, how empathy-design will improve the user satisfaction, and have members involved in the process as much as possible. It was critical through each phase to have our teams on the same page when talking about our target users and potential customers.

 

Throughout each phase of these projects, our team worked together to find a focused, user-centered truth and delivered high-end results. Once we uncovered and defined the UX Brand scope, many of our high-level phases began to fall into place and the results were exceptional.

Copyright © 2020 Rick Makoul All Rights Reserved