Facility Solutions Canada logo mark

Website, portal and field app. One design system.

UI/UX design for Facility Solutions Canada: the live website on desktop and mobile, plus a service request flow, client portal and technician app designed on the same system for the next phase.
SERVICES
UI/UX
INDUSTRY
Professional Services
COUNTRY
Canada
Facility Solutions Canada UI cover with the client portal and technician app, the live website pages, and the component library

About the project.

Facility Solutions Canada Limited serves homes and commercial buildings across Calgary and the surrounding communities. Their customers range from a homeowner booking a gutter clean to a property manager running several sites.

BeeTcore designed the website customers use today, then carried the same design system into the screens that come after the quote: a service request flow, a client portal and a technician app, ready for when the business needs them.

Products on one design system: website, service request, client portal and technician app

4

Steps to request a service: property, details, schedule and review

4

Custom icons in the shared system, 12 of them for facility services

38

Building something with the same shape?

Challenge.

A facility services brand is judged twice. Once on the website, and again on every visit, update and invoice after it. If those look like different companies, the trust earned at the quote is gone by the first work order.

The interface had to make every service easy to scan on a phone, keep a quote one click away, and set rules that still hold when the business adds a portal and a field app.

Request a service flow in four steps, the client portal with work orders, and the technician app in light and dark

Our process.

Start from the brand

The Facility Solutions design system came first. Facility Teal for actions, Facility Charcoal for depth, Bebas Neue for headings and Poppins for reading. Every colour, size and space is a named token. See the brand and design system.

Website screens

Service cards with a photo, one line and a Get a Quote button. Dark sections for the value and How We Work blocks, light sections for services and clients, and a teal credentials ribbon that repeats on every page. Every screen laid out for desktop, tablet and mobile.

After the quote

The same parts were used to design what comes next: a four-step service request, a client portal for work orders and upcoming visits, and a technician app for the day’s jobs with checklists and photos. These screens are designed and ready for a later build phase.

Handoff

Components, states and tokens went to BeeTcore’s development team, who built the website. See the website case study.

Solution.

One design language across four products. A customer who asks for a quote on the website sees the same colours and type in the request flow, the client portal and the technician’s app.

  • Website: homepage, About, Clients We Serve, Careers and job pages, on desktop and mobile
  • Request a service in four steps: property, service details, schedule and review
  • Client portal with open work orders, visits, completed jobs and plan coverage
  • Technician app with today’s jobs, job checklists and photos, in light and dark
  • Components drawn with every state: default, hover, focus, error and disabled
  • Colour pairs that meet WCAG 2.1 contrast
Status badges shared across components, portal and app, a wall of every product screen, and the live website with the app

Results.

The website went live in 2025 on this system and is still maintained by BeeTcore. The request flow, portal and technician app are designed from the same parts, so the next build phase starts from agreed screens, not a blank page.

Other projects.

Zeechops and Snacks

Developing a visually appealing website for a foods and pastries brand

9 to Thrive Conference/Event

Landing page & event registration website development for an annual impactful virtual summit

MeetTheOGs24 | Wedding

Creating a Digital Celebration of Love and Togetherness

We’re BeeTcore.

At BeeTcore we design, build and grow websites, platforms and digital products that keep working long after launch. Over a decade in, 550+ projects delivered.