top of page

BEAM LABS

Transforming UI redesign for an E-commerce website and Amazon Marketplace user experience

BeamLabs-Mobile.png

Overview

Beam Labs, a technology start-up company in Los Angeles, CA, helps homeowners gain more safety, security and peace of mind for their families while adding value to their homes.

The Goal

Evaluate existing UX.UI and identify experience friction points and create a future-proof designs. Create and build Website pages with clear calls-to-action and end-to-end customer journey for website—journey flow; including links to online E-commerce seller-pages within the Amazon.com Marketplace.

  • Create a responsive website structure and UI webpages for a MVP Product Design.

  • Keeping user experience and brand story at the heart of the early design stages and throughout the lifecycle of this product.

The Outcome

The redesigned website structure improved information architecture and streamlined pathways to the Sellers Amazon Marketplace pages. The site structure and UI helped to eliminated nonessential tasks enhancing the overall user experience. The optimized structure aligned with business objectives by driving improvement in lead generation and facilitating seamless scalability for future content and Amazon Marketplace store expansion.

Key Results

Since launching the BeamLabs website and Amazon Marketplace,  the designed website structure resulted in a 35% decrease in navigation time, significantly improving user efficiency. Additionally, the streamlined structure contributed to a 25% boost in lead generation and provided a scalable foundation for future product growth, aligning the design with long-term business objectives.

Responsibilities

  • Desk Research

  • UX Design

  • Visual Design

  • User Interface Design

  • Product Design, Testing, QC

  • Wireframes, Prototypes


Tools: Figma, Adobe Photoshop-Illustrator, Squarespace, Jira, 

Beam-Iphone-Depth-v2.jpg

Requirements and Constraints

Evaluate, ideate, create, managed and developed a fully functional, MVP website experience from the initiation research to product launch.

  • Create engaging and easy to use MVP UI webpage experience.

  • Focus initial efforts on a responsive-mobile homepage design first with an efficient website ecosystem.

  • Users know 'where' they are on website with  navigation and where they need to go to complete tasks.

  • Design experience to keep the user on-task, deliver useful information and direct traffic to the Amazon Marketplace.

Evaluative Research & Discovery

The global IoT market size in terms of revenue was reasonably estimated at $300.3 billion in 2021 and is anticipated to rise to $650.5 billion by 2026. BeamsLabs aims to capitalize on this growing business trend with physical products and digital Apps.

Pain Points:

  • Tech-startup and time to market.

  • Usability issues: Journey-Level and Interaction-Level.

  • High cost of implementing smart home and Internet of Things.

  • User confusion with tech ecosystems.

  • Intimidated by technology.

Research analysis and maps

To uncover key touch-points and "Must Haves" priorities. This analysis was used to help inform the interface architecture, navigation and page hierarchies. This involved organizing the content, UX research, exploration, taxonomy, layout, accessibility and UI design to ensure optimal responsive user experience.

RedRoute.jpg
Friction-Map.jpg

Desk Research to uncover pain points and gathered evidence to support future design strategies and actionable plans. I evaluated customer feedback and online surveys, conducted card sorts and tree tests for navigation and UI architecture.

Defined pain points:

  • Users had friction points finding purchase information quickly-

  • Issues with obtaining, keeping and nurturing customers in the purchase journey. 

  • Not intuitive and unclear navigation for purchases.

  • Interface website experience was not aesthetically pleasing-lacked modern appeal. 

  • Users wanted and trustworthy company with clear data and stats, brand story and info they can easily locate and find,

  • Users didn't feel connected with the brand - lack of that have professionalism.

Challenges and Mockup Audits

UX.UI Heuristic Evaluation

One of my tasks was to evaluated the existing UI website.  I uncovered some key insights and friction points from the first set of heuristic evaluations:
 

  • Inconsistency UI layout structure and visual aesthetics

  • Didn't speak the same language of the users- not matching UI system to real-world.

  • Flexibility with hierarchy and issues with minimalistic design solutions.—Signal-to-noise ratio was very cluttered and hard to read.

  • Flow, navigation and architecture structure was confusing and unclear system status: purchases

  • Unclear branding and design system voice.

  • Issues with content discoverability and user flow: Journey-Level pain points: Issues with CTA and Error Prevention.

  • Lacked Error Prevention and Information Recognition-Documentation: Redundancies in structure, forms and content.

beamlabs-UI-Before-1.jpg

Design Process: Ideation and Conceptualization

After design brainstorming sessions we developed a plan for a UI Structure Design Strategy and created Low- Fidelity Wireframes and actionable plan for a MVP home-landing page.

beamlabs-UI-BONES.jpg
beamlabs-UI-GREYSCALE.jpg
beamlabs-UI-REDLINE.jpg
BeamLabs-Website.jpg

Design Process: Wireframe, Mockup and Prototype

UI Product Design Solution-Results:
MVP: Main Homepage UI Design

  • Cohesive, user-centered, consistent and engaging homepage design.

  • Clear calls-to-action, visual hierarchy-ratio, easy to use and an appealing user experience. 

Targeted brand micro-copy and visuals

Beam-Iconography-1.jpg

UI Design: Repsonsive Mobile

UI.UX Process: Mobile Customer Journey/Use Flow for the Beamlabs Website. User experience and tasks direct from business website to the Amazon Marketplace Seller Pages.

UI-FLow.jpg
BeamLabs-Mobile.png
Beam_Mobile.jpg

UI Design Process: Secondary requirements for additional navigation pages on the BeamLabs  website.

High-fidelity UI Designs for product pages within website structure.

Once our team established and met business needs and goals for the main homepage for the website we moved onto additional architecture in the UI system. 

These website pages included: products pages, Log-in flow, FAQ-information pages, warranty and support pages, as well as, building the Amazon Marketplace CMS structure.

BeamDesktop-ProductsPage.jpg
BeamDesktop-ProductsPage.jpg
BeamDesktop-ProductsPage.jpg

Visual Design Process for UI Content

Supporting Visual Designs

Product Design: As part of the marketing campaign, I designed, managed visuals and created digital content assets for the Amazon Marketplace customer experience.

Amazon-ScreenShot-2.jpg
Beam-iMac-Hiker.png

Supporting Visual Content created using Adobe Photoshop-Illustrator

Key Takeaways

As a team of 1 to 2 people at a start-up, I found the experience incredibly valuable because I learned a lot-  so many 'a-ha moments' ! I had to wear multiple hats—UX design, UI design, project management, and quality control—which allowed me to grow at an exponential rate. I realized I didn’t always need to take on big tasks; there were always small things I could do daily that would later have a significant impact on the project.

Working on this project taught me how important it is to create designs that not only look great but also drive results, reflect the brand, and feel intuitive to users. I built reusable components and put together a lightweight design system to keep things consistent and scalable. I also got better at presenting ideas to stakeholders, taking in their feedback, and finding the right balance without losing sight of the user experience. Along the way, I sharpened my skills in tools like Figma, Adobe Creative Suite, and even some basic HTML/CSS, which made working with development much smoother.

On top of that, I learned how to juggle deadlines, prioritize tasks, and communicate effectively in a fast-paced environment, all while improving my problem-solving and critical-thinking skills to tackle design challenges head-on.

bottom of page