Bays Tech Website

UI/UX, Website, Branding

Dec 2024 (2 weeks)


Program Used: Figma, Illustrator, Photoshop

This project involved the redesign of the website for Bays Technology, a Vancouver-based home security company specializing in AI and IoT solutions. The website’s primary objectives were to improve wayfinding for the target audience, showcase the company’s services, and highlight the brand identity. Despite a tight timeline, I handled UI/UX design, visual design, development coordination, and testing.

Role: UI/UX Design, Visual Design, Project Management


Background

As a startup company, Bays Tech offers home security solutions for both businesses (B2B) and individual customers (B2C). Its target audience includes several distinct segments, each with unique needs. While the old website was product-centric and distant, the new design focuses on creating a more customer-centric and user-friendly experience.

Challenges

  • 5 different groups are targeted: security companies, insurance companies, home owners, warehouse/retail owners, and builders/developers—with customized solutions and varied calls-to-action.
  • Communicating both packed solutions and individual products, which come in different priorities and sections
  • Visualization—how to use words and visual language to clearly depict user scenarios

User Flow

To present services and products progressively, the design follows a sequence: “Role Statement → Solutions → Products → Call-to-Action.”

  • For business partners (security companies, insurance companies, and builders), the call-to-action is “Become a Partner.”
  • For individual customers (homeowners, warehouse/retail owners), the call-to-action is “Find a Dealer” , which will guide the customers to find a BAYS dealer nearby.

Sitemap

The new design adopts a customer-focused approach by presenting services and products through storytelling. While step-by-step guidance ensures a logical progression for users, quick access to core solutions and the product catalog is integrated into the navigation for convenience. Considering the limited quantity of items, a search bar is not adopted.

Wireframes

Comparison

Navigation

The new design has a clearer hierarchy with the most-used buttons highlighted and secondary functions organized to reduce clicks and save space.

Home Page

The home aims to address key questions: who we are, what we offer and why us. this includes value proposition for potential business partners and provide easy access to customized solutions for specific groups.

Responsive Design

Visual Design

The website employs the brand colours grey and orange, creating a clean, warm aesthetic that aligns with the themes of technology and home. Mukta and Lexend Exa fonts were chosen for their readability and modern structures. Custom iconography and graphics were developed to reflect the characteristics of target audiences and user scenarios.

Summary

During this project, I was provided with the opportunity to conduct rapid company research, lead the design process, communicate with key decision-makers and present to the team. Feedback was gathered iteratively to refine ideas. Within the limited timeframe, I prioritized the website’s structure and overall user experience. If given more time, I would further explore the unique needs of each target group to enhance the customization of solution pages.