top of page

Officer Web Portal

Project Overview

The project involves designing a desktop version of the RollKall mobile app. The goal of this project is to include all mobile app features in the officer web portal. The design should meet usability standards, maintain brand consistency, and optimize page layouts for easy access to schedules and job details.


  • UX Research (interviews, personas, competitor analysis)

  • UX Design (user flow and usability testing)

  • UI Design (high fidelity mockups)

Role: Lead Designer

Length of project: 10 months

Company: RollKall

Top of Page


Project Brief

RollKall was negotiating with Honolulu PD, who were using one of our competitors for off-duty job scheduling. Their contract was about to expire, and we didn't yet support desktop functionality. However, they were willing to switch to RollKall after their contract ended if we developed a desktop version of our mobile app.


I began my research by interviewing Honolulu PD and other law enforcement agencies that had requested a desktop portal in the past. From these user interviews, persona identification, and a competitor analysis, I gained valuable insights into the following research objectives.

  1. Why do LEAs initially choose our competitor over us?

  2. Why do officers want a desktop portal?

  3. What problem does a desktop portal solve that the mobile app can't?

Group 538.png
Screen Shot 2024-06-13 at 2.10.16 PM.png
Group 539.png

Key Findings

  • Competitive Advantage: Our biggest competitor (CYA) has less features than the RollKall platform but has a desktop version which officers strongly value.

  • Inflexibility: Many officers are aged between 40-55 and prefer to use desktop over mobile because that's what they're use to and don't want to change. 

  • Problem vs Nice to a have: A desktop portal doesn't solve any issues that our mobile app can't, but officers prefer it. They find value in seeing more content on a larger screen rather than on a mobile phone.

Problem vs Nice to have

My research data concluded that there wasn't any alarming problems that needed to be solved for LEAs however, it did conclude that RollKall leadership needed to make a business decision. Were we going to invest our resources in addressing a "nice to have"?

The Decision

RollKall's senior leadership decided it was in our best interest to invest in our product. This will help prevent competitors from converting our clients to their platforms and close any feature gaps they may have over us, ultimately giving us a stronger position in the off-duty job scheduling market.


Vision Board and Flow Chart

Since officers requested to see more content per page, I focused on brainstorming ideas to make better use of space and enhance the UI. I created a vision board and collected mock-ups of content-heavy platforms to help establish my design structure.

Group 278.png
Group 15_edited.png


Low-fidelity wireframes

I started the prototype phase by creating low-fidelity wireframes to establish page layouts for mobile, tablet, and desktop. I worked closely with engineers to ensure there wouldn't be any issues with responsive page layouts in the future.

Group 542.png

Mid-fidelity mockups

Group 547.jpg

As I progressed to mid-fidelity mockups, I used components from my design library and the mobile app as my guide. This ensured design and brand consistency and made sure that all features from the mobile app were included.

Group 544.png

High-fidelity mockups

To differentiate the interface of the mobile app and the officer web portal, I focused on the small details that would enhance the UI.

Color scheme: I used a darker blue as the primary color and a more vibrant blue as a secondary color. 

Font size: I increased the font size from 14px to 16px to make content easier to read. 

Contrast: To increase contrast for the important content, I made the front-facing content brighter and the background colors darker.

Racing stripe: Below the primary header, I included a vibrant blue bar. I like it because it reminds me of a racing stripe on a sports car.

Group 553.png
Group 555.png
Group 554.png
Group 552.png


Testing the prototype

I conducted usability tests with officers to ensure the core features met their needs. All six officers were able to complete every task without assistance and were very happy with the design. While I was pleased with this feedback, I collaborated with the engineering team to iterate areas that could use improvements.

Major Iterations

  • Location copy: Include the ability to copy the job location from the job card.

  • Increased job card width: Expanded job card's width to increase the readability of the job card's content.

  • Hover color: Increase the visibility of the hover color in dark mode. 

  • Settings Page: Condense the settings features onto one page. 

  • Side panel: Restructure and relocate side panel.

  • Calendar View: Redesign the monthly calendar view to prevent performance issue. 

Group 624.png
Group 625.png
Group 623.png

Final Design

The final design of the RollKall Officer web portal incorporates all the features of the RollKall mobile app. The new UI uses vibrant colors and enhanced color contrast to improve content visibility and highlight important items. Officers benefit from a larger page layout, allowing them to view and interact with more content during browsing sessions.

Project Conclusion

After completing all my design iterations, I scheduled a demo session with the Honolulu Police Department and RollKall's senior leadership. During the session, I walked them through the portal and gathered their feedback. Both Honolulu PD and RollKall senior leadership were very pleased with the project. The officer web portal was successfully developed and deployed and is being used daily by Honolulu police department.

What I learned

Designing the entire officer portal within such a tight timeframe was very challenging. However, it allowed me to improve my project management skills, gain valuable cross-functional experience, and learn to handle high levels of stress. One thing I will always remember about this project is the jokes and laughter shared with the engineering team throughout our journey.

bottom of page