B2B Security

Industry

1 Month

From concept to handoff

+10%

Increase in sales

75 secs

Average time on task

Overview

RFID Interlock provides a solution for companies that use heavy machinery and equipment. Their product prevents unauthorized users, tracks usage, and manages user access via its web console.

My role

UX Researcher, UX/UI Designer, & Project Manager

I collaborated with business stakeholders through planning calls, research, interviews, whiteboarding sessions, and stakeholder review meetings.

Problem

Initial admin controls and data sets were confusing and burdensome, lacking efficient ways to manage users or view equipment usage statistics.

Pain points

• The interface needed a solution to prevent accidental user errors from untrained employees and enhance company equipment protection.

• RFID's clients expressed dissatisfaction with the appearance of the sign-in and account creation screens, which they perceived as untrustworthy.

Solution

1. Create a new dashboard that addresses many of the issues with the original design.

2. Give users a way to access equipment analytics and manage its users from a single screen with ease.

3. Develop new sign in and account creation screens to enhance trust in the product and brand.

Business impact

• Streamlined user experience by enhancing its unappealing and difficult-to-navigate interface, making it easier to close deals. Sales increased by over 10% by the following quarter.

• With improved information architecture, admins were able to navigate through tools and analytics more easily. The average task competition rate was reduced to 75 seconds.

Contextual inquiry and interviewing the subject matter experts. After conducting user testing and interviews, I found:

• Reviewing data collected from RFID Interlock's security device was challenging for admins; users navigated through multiple pages and filters to find what they were looking for

• Unique knowledge was required of the interface's nuances, which could take more than ten clicks; for example, finding out who last used a tool required a deep dive into filters and pages

Key insight: My first priority for this redesign was the most frequently used screen, the Equipment Dashboard.

Previous screen designs, flow, and pain points

Improving information architecture

After synthesizing the notes I collected from user testing and interviews, I analyzed the current layout and information architecture of the product, and compared it to my user research findings.

Based on this analysis, I began to restructure the site to create a more coherent and intuitive flow. Drawing on standard design patterns used in dashboards and consoles, I developed a new site map that better aligns with users' needs. The accompanying illustration presents the revised site map for the dashboard.

Equipment screen wireframes

While collaborating with the organization's subject matter experts to conceptualize the initial design of the new equipment dashboard screen, I rapidly generated low-fidelity wireframes using digital sketching techniques.

After finalizing the sketches and getting buy-in on the main information architecture, I worked independently to create medium-fidelity wireframes and arrange content to offer a more detailed view of the dashboard.

Low-fidelity wires

Medium-fidelity wires

Final equipment screen design

After finishing the wireframes, I developed the final UI with high fidelity by integrating branding elements such as logos, icons, typography, and color schemes. I also utilized UX writing to enhance the user's comprehension of sections and actions.

High-fidelity user interface

Improving sign in and account creation to establish initial product trust

Once the admins have granted access to assigned equipment for specific users, the assigned user must be able to create an account and sign in. In the previous version, a modal was displayed over a blank page. Upon entry to the dashboard, the client desired a more polished and professional appearance that conveyed trustworthiness.

Low-fidelity wires

Medium-fidelity wires

Final Sign in / Account creation designs

After completing the wireframes, I incorporated identical brand elements from the dashboard design, such as logo, icons, typography, and color schemes. Then, to facilitate quick comprehension of actions on the screen, I added clear input headers for the users.

High-fidelity user interface