WMcommand WMSensehub

Role

UX/UI Designer & Front End Dev

Worked with a team

CTO, Product Manager & 4 Software Engr

Tools

Figma, Adobe, Jira, Miro, HTML/CSS Bootstrap(Responsive) basic JS

The Problem

Willowmore needed to bring three fragmented products — WMCommand (web dashboard), WMSenshub (mobile app), and WMIntercom — into one coherent access-control ecosystem. Existing users (facility managers, users, security teams) were dealing with inconsistent flows across platforms, slow onboarding for new sites, and confusion during handoff between admin and end-user apps.

Constraints I was working within:

Small design team of 1, tight sprint cycles, engineering team already mid-build on some flows

Needed to work across NFC/existing hardware (Willowmore Pass), not just new proprietary hardware like competitors Kisi/HID

WM Product
WMcommand WMSensehub

Mobile-First Access Control

Smartphone-based credentials replace traditional keys and cards, surveil offering cloud-provisioned access with real-time updates. AI-powered surveillance with advanced video analytics for remote monitoring and can range from basic control to complex, AI-powered automation.

WMCommand

A cloud-based access control platform designed to modernise security management for critical infrastructure, shared workspaces, and enterprises.

Dashboard

Dashboard

User List

Add User

Do you want to check the flows/prototype in figma and the the HTML/CSS prototype?

Figma Flows HTML/CSS

WMsenshub Mobile App

log-in
devices
ac
Lock
profile
setting

WMsenshub Mobile App Version 2

WMIntercom

setting

Attendance Mobile app

Attendance Tablet app

Multi-Functional Devices ​​

The Comprehensive System For Your Facility Management And Cleaning Robots Also Serves As Security Enablers​

User Cases Overview​​

UX Design Process

Competitor Analysis

Part of the UX/Ui Design Process was to research similar on our App in the market. This will allow us to identify their STRENGTH and OPPORTUNITIES for our App. I did an analysis of two competitors: 

Kisi Mobile Access Control

User Experience & Hardware

Kisi is built for ease of use, offering a cloud-based mobile access control solution that’s paired with Kisi’s proprietary hardware. This includes Kisi door readers and cloud management software, designed to work together seamlessly

Key Features:
  • Mobile-based access using a smartphone app.
  • Mobile-based access using a smartphone app.Cloud-managed identity and access control system.
  • High-level encryption and compliance with global security standards.

HID Mobile Access

User Experience & Hardware

HID, one of the largest players in the access control market, offers a robust mobile access control system that integrates seamlessly with their widely-adopted HID readers. HID’s solution appeals to enterprise-level clients, particularly those who may already have significant investments in HID’s physical security products.

Key Features:
  • Cloud-based management for remote administration.
  • Mobile unlock via smartphone (app-based).
  • No physical cards required (though they offer this as an option).
  • Integrated visitor management systems.
  • Multiple authentication methods, including touchless entry.

Willowmore Pass

User Experience & Hardware

Unlike Kisi and HID, Willowmore Pass is a mobile access control solution that everages existing NFC readersl, minimizing the need for new hardware investments. It also introduces the Card Management as a Service model, allowing organizations to design custom cards and check-in experiences while relying on Willowmore to maintain the software and infrastructure.

Key Features:
  • Mobile-based employee badges for access via NFC.
  • Custom card designs and check-in experiences tailored to business needs.
  • Offline functionality, ensuring access even during network outages.
  • Low setup and maintenance costs, as Willowmore handles software updates and troubleshooting.

User Research and Analysys

After Completing a competitive analysis, My PM(Product manager) and I recruited and Interviewed people including the stakeholders in order to better understand their needs and goals. We prepare a questionairs for them. Then I created a user persona based on my user research that helped me to paint a clear and realistic picture of user’s goals, need and behaviors. 

User Presonas

Pun Kai Wen

Marketing Manager (Hybrid Work Model)

About

33 Yo

Gislason Way Lane SINGAPORE

Married with two school-aged children

Female

Frustrations

  • Devices that randomly disconnect, leading to manual troubleshooting .
  • Overly technical setup processes or confusing app interfaces that make basic actions difficult.
  • Worrying about temporary codes being misused or whether the system is vulnerable to hacking.

Goals and Motivation

  • Needs peace of mind that her family and home are secure, especially when she or her husband are away on business trips.
  • Wants to eliminate the hassle of physical keys for herself, her children, and service providers.
  • Wants to know exactly when the children arrive home from school and who enters the house.
  • Smooth, automated routines and low technical friction directly shaped. The simplified one-tap unlock flow / removing advanced settings from the default view

Quotes

“I bought this to make my life simpler, not harder. I need to be sure that the kids are safe and that I never have to worry about digging for keys again, but if the app is slow or confusing, it defeats the whole purpose.”

Kang Kang Min

Software Developer

About

31 Years old

Jalan Kayu Road SINGAPORE

Single, lives alone

Male

Frustrations

  • Devices that only work within a specific ecosystem. He prefers open standards.
  • An app that hides advanced settings or limits automation capabilities to basic "If This, Then That" rules.
  • Installation manuals or help files that lack technical specifications or deep-dive troubleshooting steps.
  • Any delay between tapping a button in the app and the lock engaging is unacceptable.

Goals and Motivation

  • Any delay between tapping a button in the app and the lock engaging is unacceptable.
  • Build complex, custom routines and scripts that go beyond basic app functionality. He wants the system to be predictive.
  • Focuses on speed, reliability, and security certifications (e.g., encryption protocols, fast response time).
  • Wants to handle the physical installation and troubleshooting himself and expects clear, technical documentation.
  • Demand for technical control and zero-lag response shaped. The advanced settings panel / real-time status indicators.

Quotes

"If I can't integrate it into my existing home automation server and write custom scripts for it, then it's just a digital deadbolt, not a smart device. I expect it to perform reliably and offer full technical control."

Feedback from Stakeholders

  • Specialised task flow for proof of "lock”
  • Sometimes an issue because some users don't have proper training / knowledge on how to access this data
  • Onboarding / off-boarding new users onto platform, tasks VS users

Michelle Liman

Willowmore Account Manager / Sales representative.

+2 years experience

  • On Channel 0 -> which is a combination of all 8 channels streamed. CCTV is running - NVR is running - internet connectivity - playback via VLC works, but still fails?
  • Seen across most of the RC centres that have been deployed. switch has a delay of about 5-6 seconds before lighting goes on / off.

Eugene Yeo

Willowmore
Project Director

+1 year experience

User Stories

In close collaboration with the Product Manager, I spearheaded the definition and documentation of user stories and comprehensive user flows across three distinct applications: WM Command, WMSenshub, and WM Intercom. This critical effort was foundational to aligning product development across multiple platforms, ensuring a consistent and cohesive user journey for all key functional areas. This example represents a segment of the extensive documentation produced for the multi-app ecosystem.

User Stories:

As a PA staff member, I want to automatically create OTPs for visitors at local centres (either auto-generated or matching their mobile numbers), so that they can easily access the RC sites.

Expected Outcome
  • Saves Time & Reduces Work: Visitors register themselves, freeing up staff to focus on other tasks.
  • Instant Access & Convenience: Visitors receive immediate OTPs for quick entry to sites.
  • Fewer Errors & Up-to-Date Records: Visitors enter their own information, ensuring accuracy and keeping records current.

User Flow Diagram

Low to High Fidelity

The process of creating wireframes from low to high fidelity moves from basic structure to a detailed, near-final product. It begins with low-fidelity sketches or wireframes to focus on core functionality and user flow, progresses to high-fidelity wireframes that include more detail and visual style, and ends with high-fidelity prototypes that add interactivity  

Sketch

Wireframe/Low fidelity

High Fidelity

Design System

integrated throughout the entire product development and UX design process to ensure consistency, efficiency, and scalability. It acts as a single source of truth for design guidelines, reusable components, and patterns that are shared across multidisciplinary teams.  

Prototyping

Prototyping is the process of creating a model of a product to test its design and functionality early in the development cycle, while usability testing is the formal evaluation of a prototype or finished product with users to assess how easy and effective it is to use. Prototyping helps visualize and iterate on a product's look and feel, and usability testing provides crucial user feedback to improve the design before full development.   

Usability Testing

The prototype is live and distributed to users, stakeholders, and the team for testing, with all critiques and opinions being collected directly in Figma. Responsiveness is fully confirmed across all device breakpoints to ensure valid and high-quality usability feedback

Dev Hands off

Key steps include establishing an early alignment with developers, using a design system for consistency, and providing detailed documentation through prototypes, user flows, annotations, and assets in a shared tool. The goal is to provide developers with all necessary context to build the design accurately and efficiently, bridging the gap between the design vision and the final product. 

Launch and Evaluation

After the app is launched, user engagement, conversion rates, and customer satisfaction are continuously monitored using analytics tools. A comprehensive evaluation is conducted to assess key performance indicators, usability, and customer feedback. The results are analysed, and the impact of the app's design on user behaviour, business goals, and overall success is determined. The case study concludes with an overview of the achieved objectives and recommendations for further enhancements and optimisations based on the findings.

Other Works

WMFacility CMMS

WMCommand & WMSensehub

Web Mobile

Is an all-in-one platform for facility management, serving various sectors from commercial hubs to industrial sites. Software seamlessly adapts to meet the unique challenges of any property type.

SHOWCASE >
PUB

PUB Sludge Truck

Web

A sludge truck, often called a vacuum truck or tanker, is a specialized vehicle used to collect, transport, and dispose of liquid and semi-solid waste from municipal and industrial applications

SHOWCASE >