top of page
Beam-Website%20Banners6_edited.jpg
BeamLabs

Creating a seamless responsive website and Amazon Marketplace experience.

Overview
BeamLabs, a start-up company in IoT technologies/B2C sector, helps homeowners gain more safety, peace fo mind and security for their homes and families. Projects included: UI.UX Designs for Responsive Desktop-Mobile and the customer experience for Amazon Marketplace.

Role
Visual Designer, UX.UI and creative direction. 

 

Objectives & Goals
Through research, analysis, iterative designing and testing, our team created a MVP before the product went live. Our team executed the business vision using strategic planning and aligned milestones. Our goals included: create great product with useful and engaging UX.UI, drive traffic to Amazon Marketplace, meet business and UX strategic goals, and raise the quality bar and value of the product designs.

Contribution and Methods
Collaborations with web content and marketing teams. Handoffs include: Web-landing page and responsive mobile designs, as well as content for paid graphics and social media. 

Project 1: Responsive Website

DEFINE – Stakeholder Meetings and UX Needs Discovery
What were we researching? Evaluative method of existing product and understanding of target audience to add real value to the customer journey. Brand Strategy and Product Definition Documents
BrandStoryboard-Strategy.jpg
RESEARCH, PLANNING, ANALYSIS & EMPATHY – Competitive and Qualitative, Customer Journey Map Analysis, Problem Space Mapping, User Flow Maps
Whiteboard-Build copy.jpg
RedRoute.jpg
Friction-Map.jpg

To create new ideas you have to be willing to go into uncharted and uncomfortable territory. My design process followed a constant cycle of validating the team's output – it required walking into the unknown and be fearless with ideas.

BeamLabs-Website-Desktop-v2.jpg

Creating MVP for the core-webpages first:
Mental Models --> Conceptual Models --> High Level Plans

DESIGN EXPLORATIONS, SOLUTIONS & OPPORTUNITIES – UI Taxonomy, Architecture, Webpages layouts, and visuals.

UI Heuristic Evaluation and Analysis: 
  1. Content grouping issues and hierarchy – UI noise and cognitive overload:Usability issues with: imagery overload, misalignment-proportions, inconsistency with objects, UI aesthetics, unclear brand dialog, and feedback-loops for users.
  2. Excessive 'Number of Steps' to get to Users Goal
  3. Cluttered UI complexities, unclear and inconsistency in User Flow
  4. Content discoverability issues
  5. Redundant use of content and content structure
USER INTERFACE BEFORE:  Design Iterations failing to meet user needs and goals.
Usability-Icons-01.png
beamlabs-UI-Before-1.jpg
Beam-Website 1.jpg
Beam-Website 1.jpg
USER INTERFACE AFTER: Design Analysis to Hi-Fi Mockups
Usability-Icons-02.png
UI.UX HEURISTIC ANALYSIS:  informed decisions based on the gathered data and audits.
  1. Meets user needs through UX Utility: More appealing and useful UI with reduced options and clear visual hierarchy.
  2. Organized UI patterns with emphasis on minimalism in design and aesthetics while aligning with the brand story.
  3. A positive first impressions carried throughout the website and user flow: producing the 'Halo effect'. 
  4. Less noise in the UI: following a less complex grid system for structure, scan-ability and readability.
  5. Efficiency, convenient and consistent standards: allowing familiarity for novice users to more advanced users.
  6. Stronger visuals and use of Gestalt design principles: unifying elements, categorizing, laws of proximity-groupings and consistent content strategy.
  7. These designs provide users with information when needed and guide them along their journey: from finding essential data to purchase a product: Customer Journey and User Flow.
  8. Consistency in: design guidelines, typography, visuals, content strategy, UX writing, and brand story. 
  9. Design was not a one-size-fits-all solution: instead we used "Hook Methods" for a cohesive, user experiences journey with actionable and findable calls-to-action.
UI BUILD PROCESS – Consistency in UI hierarchy, layout grid, visual design, brand tone and user flow.
UI STRUCTURE MAP
beamlabs-UI-BONES.jpg
LOW FIDELITY UI GREYSCALE WIREFRAMING
beamlabs-UI-GREYSCALE.jpg
HIGH FIDELITY UI REDLINES
beamlabs-UI-REDLINE.jpg
CREATIVE DIRECTION & CONTENT STRATEGY: Iconography, UX Micro-Copy, Brand Message
Beam-Iconography-1.jpg
Beam-Iconography-2.jpg
CREATIVE DIRECTION & STRATEGY FOR DIGITAL CONTENT: Look-Feel, Brand Message-Tone, Visual Design
Beam_Mobile.jpg

Project 2: Amazon Marketplace 

UI Layouts using Amazon Marketplace CMS.
Graphics, iconography, illustrations, and hand-off visuals. 
Amazon-ScreenShot.png
Amazon-beamUP-BU800.jpg
Amazon-beamUP-BU800.jpg
Amazon Marketplace Info. Page: UI content layouts for Products using Amazon's CMS.
BeamDesktop1.jpg
BeamDesktop1.jpg
 Brand Consistency for all Content:  Icons, Illustrations, Image Composites, Social Graphics
800 Hero_Amazon.jpg
BeamApp-Specs-v2.png
Amazon-CallOuts-PBuild.jpg
Compare-All-Models.jpg

Project 3: Social Content Campaigns

Email Form: Low-Fi Wireframed-Greyscale to Medium-Fidelity Mockup
Alexa-Email-Template-V2.jpg
Alexa-Email-Template-V2.jpg
Alexa-Email-Template-V2.jpg

You may also like...

YMAL-Analog-1.jpg

Visual Design/UI

YMAL-Limeade.jpg

Visual Design/UI

YMAL-Diawa.jpg

Visual Design/UI

bottom of page