#wix-ad-footer { display: none !important; }
top of page
Screenshot 2025-04-08 at 22.41_edited.jp

KEY FEATURES:

  • Dashboard with quick actions

  • Lock and unlock every door

  • Customizable templates

  • Register users from miles away

  • Copy user profiles between locks

  • Critical alerts and notifications

  • Bulk import users/residents

  • History logs and export reports

ROLE: Senior UX & UI Designer

OVERVIEW:

A dedicated initiative aimed at continually enhancing the user experience of the LocklyOS portal, providing efficient remote access management for properties.  

I joined Lockly as a Senior UX & UI designer in 2023 as one of 2 in-house designers in a company of over 30 engineers and 5 product managers. I supported product design across every aspect of our business and was responsible for leading UX and UI across key parts of the application side of the platform.

After joining PIN Genie, I made key contributions to enhance the LocklyOS™ (Lockly Access Portal) user experience and core features by redesigning the landing page and optimizing key feature interactions. The following screenshots demonstrate the design changes I independently implemented, highlighting a more streamlined, user-friendly, and engaging interface.

Screenshot 2025-04-04 at 11.49.43.png

Landing screen redesign

Left (version 1.7.7.8):

Previous landing page of the Portal before I joined the team:

Right (version 1.7.7.9):
The current landing page of the Portal launched with my design:

Design screens were created using Figma.

Screenshot 2024-09-13 at 22.18.29.png

Some design issues in 1.7.7.8 (shown in screenshots below):

  • The portal's main navigation sidebar design lacked simplicity due to the use of many colors and inconsistent fonts

  • Information hierarchy was unclear

  • Inconsistent texts

  • Lack of uniformity in icon use and sizes

  • Alert Signals: the low battery symbol is relatively small and easy to miss

  • Methods of interactions for device control were ambiguous. Users were unsure what they were supposed to do on this screen (e.g. misleading visual cues on which icons are clickable and no visible feedback of interaction)

  • Hard for users to quickly understand what is interactive or important

Below are three screenshots the 'Dashboard' page, 'Door Lock' page, and 'Access Details' view before I joined the team (version 1.7.7.8) in 2023:

位图.png

Key improvements in 1.7.7.9 & onwards:

In version 1.7.7.9 and each iteration of updates after I joined the team in 2024, I led a series of design changes and improvements to this software system.

 

For example, here shows a screenshot of the re-designed dashboard:​

dashboard_1.png

1. Improved Sidebar

The portal's main navigation sidebar is replaced with  new icons, colors​, and clearer information hierarchy and visual feedback on users' current 'location' in the portal system​. Expanded Sidebar Text: The left-side navigation has clearer and fully expanded labels ("Device Management", "Air Transfer Task List"), which resolves the truncation problem from the previous design. This makes navigation more user-friendly and less ambiguous.​

2. More Logical Grouping

The items in the sidebar are better grouped, and the icons are clear and simple, helping users navigate without getting lost or overwhelmed.

Screenshot 2024-01-16 at 12.19.55.png

​​​​​3. Enhanced Button Design and Interactivity:

  • Added visual cues on mouse hover to help guide actions ('Slide to lock' or 'Slide to unlock').

  • Interactive Feedback: e.g. the "Home Office" card shows clear interactive feedback (highlighted icon and action button). This helps users immediately understand the current status of the lock and the slider button makes it easier to understand what action users can take

  • Device status is easily readable: gray-ed out cards indicate offline devices without intractable buttons or icons.​

4. Reduced Cognitive Load:

  • Minimalist Design: The second design feels more minimalist, with fewer distracting elements. For instance, unnecessary details have been removed, and only relevant information (e.g., lock status, model number) is shown, making it easier for users to focus on the important information.

  • Offline Locks Grouping: The locks that are offline (e.g., "7swhk", "Front Door") are clearly grouped together, which simplifies understanding which devices are functioning or not.​​

Screenshot 2024-09-13 at 23.04.04.png
Screenshot 2024-09-13 at 23.35.23.png

A hint 'Slide to unlock' is shown when user hovers the mouse over the slider bar.

Screenshot 2024-09-13 at 23.55.39.png

Demonstration video of performing some key actions on the 'Door Lock' page (live capture). 

4. Visual Hierarchy:Improved Visual Hierarchy:

The design now emphasizes the most important information, such as lock status and the visual cues to interact with the lock.

 

The title of each card (e.g., "Home Office") and the lock status ("Locked") are now more visually prominent, making it easier for users to quickly scan the interface and understand the current state of each lock.

 

Notification and Alerts Visibility: The alert icons on the "Home Office" lock card (e.g., the exclamation marks) are well-placed and more visible than in the previous design. These draw attention to potential issues in a more structured and noticeable way.

User can also switch between Grid View and List View by clicking the icons.

5. More Accessible Controls:

  • Refined Controls Area: The buttons in the top-right corner for switching views or refreshing the page are now more compact and grouped logically. The refresh icon and settings button are intuitively placed, and the interface looks cleaner compared to the previous design.

6. Lock Status Timestamp:

  • The "Last updated" timestamp in the upper-right corner adds useful context to the interface without being intrusive. This is a subtle yet effective way to inform users of when the information was last refreshed.

Result & Takeaway:

The Lockly OS portal now delivers a cohesive, user-centered design system that streamlines the experience across Lockly’s diverse product line and user group. The comprehensive redesign improved usability for both first-time and returning users by simplifying navigation, enhancing visual consistency, and integrating clear onboarding flows. The updated design system laid the groundwork for efficient scalability, enabling Lockly to accelerate future product development while maintaining a unified brand experience.

This project demonstrates the critical role of a well-defined design system in driving both user satisfaction and operational efficiency. By aligning stakeholder priorities with rigorous UX research and iterative prototyping, the team and I were able to transform a fragmented experience into a cohesive platform. The process underscored the importance of establishing clear design foundations, particularly when supporting a hardware-driven ecosystem, and highlighted the impact of collaborative cross-functional workflows in delivering consistent, high-quality user experiences at scale.

From Our Customers:
Screenshot 2025-04-04 at 11.51.46.png

Want to know more, connect for further details.

bottom of page