City of Norwalk City Service Portal @ Saira Solutions

Context

Business Permit Portal

A business permit portal is an online permitting and licensing software system that provides essential tools for efficiently managing and overseeing permit processes. City officers can use the portal to inspect, approve, and access all business permits within the city, with comprehensive details such as status, type, date, and valuation. The portal also allows officers to edit, update, and bookmark permits as needed.

The City of Norwalk aimed to redesign its business portal to enhance usability.

The Problem

🤷 “Font size is too small, and everything is too complex."

- Norwalk City Officer

Some of the images have been edited or covered to comply with the NDA.

The Original screen has a problem with overall usability.

User Research

User interviews were conducted with four Norwalk City officers to gain insights into their workflow and identify pain points in their current processes. These interviews uncovered key challenges, such as complex workflows, which informed and guided subsequent design decisions

Design Process

Ideation

Where and how should the filter be placed? While discussing content adjustments—such as decreasing, increasing, removing, or adding information—the primary focus was on the location of the filter. Considering the users' goals and the information presented, the filter's placement should be based on logical and user-centered reasoning.

Filter placed on the left

Pros
👍Aligns with users’ natural left-to-right scanning.
👍Accessible without interfering with content.
👍Familiar placement in many interfaces.

Cons
👎May be skipped when scanning primary actions.
👎Can create a left-heavy layout.

Pros
👍Highly visible and easy to access.
👍Intuitive placement for filtering results.



Cons
👎Uses vertical space, pushing content down.
👎Extensive filters may clutter the interface.

Filter placed above the list

Filter placed on the right

Pros
👍Keeps focus on content or results.
👍Less intrusive for users prioritizing results.
👍Accessible without disrupting content.

Cons
👎Less intuitive as users expect filters on the left.
👎Filters on the right may be overlooked.

Filter overlaps in the list

Pros
👍Compact design, saving screen space.
👍Improves content focus by appearing as needed.
👍Ideal for space-constrained interfaces.



Cons
👎Can block content, affecting user experience.
👎Reopening filters for comparisons may be tedious.
👎May confuse users on how to access or dismiss it.

Overall Considerations:

  • Left placements are more stable for persistent filters and when users need constant access to filter options.

  • Right Ideal for keeping the focus on results, allowing users to adjust filters after reviewing content.

  • Above the List is ideal for immediate discoverability but should be carefully designed to avoid taking too much vertical space.

  • Overlapping the List offers a clean, space-saving option but could cause frustration if it obscures key information.

Iteration

The initial filter designs were proposed in a way that maintained consistency with the existing website structure while prioritizing readability and usability.

An expandable filter design was created to avoid endless scrolling, but it was put on hold due to the issue of increased number of clicks.

To address the issue of an increasing number of clicks, a solution was proposed to display selected options as filter chips after selection. However, displaying too many options as chips could increase the user's workload, presenting a potential usability concern.

Following a stakeholder meeting, the design was adjusted to retain only the most essential visible filters, while the remaining options were placed under 'Filter.' Clear grouping was implemented to enhance user understanding of the options.

Validation

Usability testing was conducted with 8 participants using both the original screen and the redesigned demo, yielding significant results.

Solution

Micro Interactions

The prioritized filter options are positioned above the main filter section and display the number of selected options when applied by users.

All date-related categories are consolidated under 'Date,' allowing users to view and access all date options in one place.

All categories are integrated under 'All Filters,' with each category organized by its specific functionality. For instance, categories that allow multiple selections use checkboxes, while those permitting only one option use radio buttons. The 'Amount' section allows users to input a numeric range manually, rather than using sliders, as the range can vary significantly from very small to extremely large.

Final product

The final screen showcases the updated Saira branding. As this is an internal site for the City of Norwalk, the dominant opinion from the stakeholder meeting was to replace the city's logo with the Saira logo. The color scheme was also updated to reflect Saira's new branding. In line with the company’s goals, I developed a new design system to incorporate the updated theme into the UI. Additionally, I increased the use of white space to prevent users from feeling overwhelmed.

Outcomes

🙋‍♀️ “This update saves me so much time compared to the old version."

- 43, female, Norwalk City Officer

🙆‍♂️ “I wish we’d had this version from the start—it’s so much better!"

- 52, male, Norwalk City Officer

Takeaways

  • Consider the real-world context users are in when making design decisions, as an option that seems perfect in theory may not work well in practice.

  • Explore various design alternatives and iterate to ensure the product works well for users in different scenarios.

  • Bridge the perspectives of users, stakeholders, and the company to create a balanced and effective solution.