top of page
Website Experience Project
Creating seamless and consistent digital, customer experience solutions for a Minimum Viable Product.
Competitive research
Customer surveys
Evaluative research
Persona & journey
Flow diagrams
Wireframes
Low fidelity mockups
Prototype
High-fidelity UI
UI Accessibility
Company/When
What
Why
BeamLabs, Los Angeles, CA
Aug 2019-Jan2020
Website, Mobile App (iOS),
Amazing Marketplace.
Start-up company projects.
Role
Category
UI.UX Designer
Tech-space. IoT. Home Security.
Software
Figma, Photoshop, Illustrator, Squarespace
Project overview
BeamLabs, a start-up company in IoT technologies/B2C sector, helps homeowners gain more safety, peace of mind and security for their homes and families.
Project included: MVP UI Designs for responsive desktop-mobile and the customer experience: CTA task and action guides user to Amazon Marketplace.
Project goals: identify user pain points, create a brand story guide, and map a customer journey flow for the website experience.
Main project focus:
-
Create a useful and engaging MVP experience and visuals.
-
Focus on responsive homepage first, then website ecosystem.
-
Design UX to keep the user on task and drive traffic to Amazon Marketplace.
-
Meet business goals and project metrics.
-
Raise the quality bar and value of the product designs.
Research and discovery
I did research to uncover pain points and gathered evidence to support all of my design decisions. To add real value to the user, we evaluated customer feedback and online surveys, card sorting, and tree tests.
The claim
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.
From 2023 to 2030 the global smart home market size is expected to grow at a compound annual growth rate (CAGR) of 27.07%
The problem
-
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.
The ask
Identify archetypes needs, wants and goals to create an useful and enjoyable customer experience–create a Brand Story Guide to help identify persona sets and business needs-requirements.
Build trust and confidence with customers.
Journey map, MoSCow-Red Route analysis.
This research helped to uncover key touch-points and MoSCow "Must Haves" priorities. This analysis was used to inform my interface design decisions.
Product Evaluation (Heuristics) : CURRENT DESIGN
One of my tasks was to evaluated the UI and experience of website pages. I uncovered some key insights from the first set of heuristic evals:
-
Inconsistency UI layout structure and visual aesthetics.
-
Hierarchy and signal-to-noise ratio was very cluttered and hard to read.
-
Unclear branding and design system voice.
-
Issues with content discoverability and user flow: Journey-Level pain points.
-
Redundancies in structure, form and content.
UI Design
For redesign, I planned out the Homepage UI structure and wireframes with mockups for experience.
UI STRUCTURE & PLANNING
LOW-FIDELITY UI GREYSCALE WIREFRAMING
High-fidelity Homepage MVP
AFTER: MVP Interface Design
Design Anaylsis
I made informed decisions based on comparative design heuristics and UX research. The new designs were highlighted by these improvements:
-
A more appealing and useful UI with reduced options and a clearer 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.
-
Less noise in the UI for scannability and readability.
-
Designs helped user stay on task and prompt them to take action.
-
Consistency in: design system, typography, visuals, content strategy, UX writing, and brand story.
Moving past the Homepage: High-fidelity UI structure for product pages.
Once our team established and met business needs and goals for an MVP, we moved onto the other pages within the navigation structure. These webpages included the products pages, Login flow, FAQ-information pages, warranty and support.
Website CTA links to Amazon Marketplace
Our team created the UI layout for content, brand copy and the visuals using Amazon's Content Management System.
Project Assets: Digital Visuals
Iconography, UX Micro-Copy, Illustrations, Brand Voice and Story
Illustrative digital content for this project
Below: My work process shows Photobashed-breakdown for digital imagery and assets.
Key Takeaways
I learned to be bold and brave with my UI design methods and act upon them. My design focus helped the UI by embracing simplicity, harnessing whitespace as a design element and prioritizing the UI functionality.
When these worked best, it lead to new ways of thinking and innovation.
bottom of page