Designing a Digital Future for HSB

DESIGN CONCEPTS

Three Areas 
of Transformation

A Fragmented and Manual Process

Creating an annual report for a housing association is a complex, multi-step process involving:

• Board members
• BRF Economists
• Internal and external auditors

Historically, the process was document-based, email-driven, and fragmented across tools. Users relied on PDFs, Excel files, and external platforms to complete their work. The system did not support the process — users had to work around it.

A High-Pace, Iterative Design Process

The pace of this project demanded a lean and adaptive design process. With multiple products shipping in parallel, there was no room for lengthy discovery phases — we had to move fast while maintaining quality and usability.

I established a repeatable design cycle that kept momentum high and feedback loops tight:

From Documents to a Product

The annual report is not just a document. It is a governance process with multiple stakeholders, dependencies, and deadlines.

A Living, Editable Product

I redesigned the experience from static documents into a fully editable interface with structured sections, autosave, and dynamic content. The annual report became a living product, not a document.

The Management Report is a core part of the annual report, covering the association’s operations, financial development, and key events over time. It includes sections such as business overview, significant events, financial performance, and a multi-year overview of key metrics.

To make this structured content easier to manage, I designed the interface as a tab-based system. Each section became a dedicated, editable view, allowing users to navigate, review, and update information efficiently.

The tabs included:

• Housing Association Overview (Bostadsrättskollen)
• Business Overview (Verksamheten)
• Financial Year (Räkenskapsåret) 
• Member Information (Medlemsinformation)
• Multi-year Overview (Flerårsöversikt)
• Equity (Eget kapital)
• Proposed Distribution of Earnings (Resultatdipostion)

Predefined templates ensured consistency and completeness, while flexible editing allowed users to add custom values, tables, and content beyond the standard structure.

Floating Action Button (FAB) as a Control Layer

To manage the growing number of actions across the workflow, I introduced a floating action button (FAB) as a central interaction pattern. This was initially a point of discussion, as the pattern was relatively unfamiliar to many users and stakeholders, requiring a strong design rationale to move forward.

The goal was to reduce interface clutter and shift secondary actions away from the primary content. Instead of exposing all available actions directly in the UI, the FAB acted as a contextual control layer, surfacing only relevant actions based on the current state and user role.

Each state controls access, actions, and transitions. Actions like “Complete step” move the process forward and unlock the next phase.

By consolidating actions into the FAB, we were able to:

• Introduce state-based actions without overwhelming the interface
• Support contextual notifications and prompts
• Guide users toward the next logical step in the process
• Reduce cognitive load by removing unnecessary UI elements

Over time, the pattern proved highly effective. It not only simplified the interface, but also strengthened the overall flow by combining actions, guidance, and feedback into a single, consistent interaction point.

Guiding Users Through the Entire Process

The Annual Report experience was designed to guide users step by step through a complex, multi-stakeholder process. Instead of relying on manual coordination, the system structured the workflow into clear phases with defined roles, statuses, and actions.

Each step in the process was connected to a specific state, making progress visible and reducing uncertainty. Users could always see what had been completed, what was in progress, and what actions were required next.

Role-based notifications

To ensure momentum, the system introduced role-based notifications. Each stakeholder was prompted only when their input was needed:

• Administrators initiated the process and managed structure
• Board members reviewed and contributed content
• Auditors validated financial and compliance-related sections

Notifications were triggered based on status changes, removing the need for manual follow-ups and email coordination.

Status-driven workflow

The report moved through a set of clearly defined states:

• Not Started
• In Progress
• Ready for Review
• Sent for Approval
• Signed / Completed

These statuses acted as both control mechanisms and communication tools, aligning all participants around a shared understanding of progress.

Step-by-step navigation

The interface provided a structured overview of the entire report, divided into sections that could be accessed and edited individually. A progress-based navigation system allowed users to:

• Move between sections without losing context
• See completion status per section
• Identify missing or incomplete data

Rather than working in isolation, users operated within a guided flow where each step built on the previous one.

Different Users, One System

The system supports multiple stakeholders within the same workflow, adapting the experience based on role. Board members, accountants, and external auditors all work in the same system, but with tailored views, actions, and responsibilities.

Each user is presented with relevant information, clear ownership, and defined next steps. At any point, it is visible who is responsible and what needs to happen next, reducing ambiguity and manual coordination.

To maintain progress, the system triggers notifications both in-platform and via email when delays occur. This helps prevent bottlenecks and keeps the process moving.

External auditors work across multiple clients and are given a consolidated overview of all ongoing reports. A step-based interface allows them to track status, review content, and manage sign-offs efficiently.

The result is a shared system with role-specific clarity, where each user understands their responsibility and how to move the process forward.

One Product, Multiple Use Cases

From System to Final Report

The system generates structured, print-ready outputs and stores all documents securely in HSB’s cloud service.

A key feature was the ability to preview the final annual report as a fully formatted PDF while working within the digital interface. Users could continuously see how their input translated into the final printed document, creating confidence and reducing the gap between drafting and delivery.

Previously, compiling the annual report was often outsourced, requiring manual coordination across multiple stakeholders and formats. With the new solution, the entire process was handled within one system, where data was structured and automatically exported into predefined PDF templates.

These templates ensured consistency, compliance, and high-quality output, making the report ready for print or distribution without additional formatting. The result was a seamless transition from digital workflow to final document, significantly reducing time, cost, and dependency on external production.