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
RESEARCH, PLANNING, ANALYSIS & EMPATHY – Competitive and Qualitative, Customer Journey Map Analysis, Problem Space Mapping, User Flow Maps
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.
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:
-
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.
-
Excessive 'Number of Steps' to get to Users Goal
-
Cluttered UI complexities, unclear and inconsistency in User Flow
-
Content discoverability issues
-
Redundant use of content and content structure
USER INTERFACE BEFORE: Design Iterations failing to meet user needs and goals.
USER INTERFACE AFTER: Design Analysis to Hi-Fi Mockups
UI.UX HEURISTIC ANALYSIS: informed decisions based on the gathered data and audits.
-
Meets user needs through UX Utility: More appealing and useful UI with reduced options and clear visual hierarchy.
-
Organized UI patterns with emphasis on minimalism in design and aesthetics while aligning with the brand story.
-
A positive first impressions carried throughout the website and user flow: producing the 'Halo effect'.
-
Less noise in the UI: following a less complex grid system for structure, scan-ability and readability.
-
Efficiency, convenient and consistent standards: allowing familiarity for novice users to more advanced users.
-
Stronger visuals and use of Gestalt design principles: unifying elements, categorizing, laws of proximity-groupings and consistent content strategy.
-
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.
-
Consistency in: design guidelines, typography, visuals, content strategy, UX writing, and brand story.
-
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
LOW FIDELITY UI GREYSCALE WIREFRAMING
HIGH FIDELITY UI REDLINES
CREATIVE DIRECTION & CONTENT STRATEGY: Iconography, UX Micro-Copy, Brand Message
CREATIVE DIRECTION & STRATEGY FOR DIGITAL CONTENT: Look-Feel, Brand Message-Tone, Visual Design
Project 2: Amazon Marketplace
UI Layouts using Amazon Marketplace CMS.
Graphics, iconography, illustrations, and hand-off visuals.
Amazon Marketplace Info. Page: UI content layouts for Products using Amazon's CMS.
Brand Consistency for all Content: Icons, Illustrations, Image Composites, Social Graphics
Project 3: Social Content Campaigns
Email Form: Low-Fi Wireframed-Greyscale to Medium-Fidelity Mockup
