top of page
BEAM LABS
Transforming UI redesign for an E-commerce website and Amazon Marketplace user experience
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.
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,
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.
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.
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.
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
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 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.
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.
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.
Projects you might also like...
bottom of page