Transforming Legacy SaaS
into Unified Communication,
Saving 30,000 Hours Annually

🎯 Project Goals

Build a unified digital platform to streamline all property contract workflows, with success measured against pre-set KPIs.

Expected Impact

• Enable remote, paperless operations.
• Reduce repetitive administrative tasks.
• Ensure regulatory compliance with updated legal requirements.

Qualitative Outcomes

• Improve customer service by freeing teams from repetitive and manual processes.
• Simplify communication with external partners (legal and financial teams).

Quantitative Targets (KPIs)

• Reduce administrative work by 30,000 hours.
• Achieve regulatory compliance with legal requirements.
• Reduce paper usage by 90% by digitising 90% of operations.

🧱 Issues with the Legacy Platform

After 10 years of use, major issues existed:

• Cluttered, inefficient interface, partly due to unused features left in place.
• Outdated IA and visually inconsistent UI.
• Repetitive manual tasks such as data entry and approvals.

Issues beyond the platform itself:

• Complex procedures due to a large volume of documents.
• Unclear and time-consuming workflows with legal and financial teams.

These issues led to frequent human errors, communication breakdowns, and additional effort to meet compliance and coordination needs.

👫 Our Users

Approximately 500-1,000 users, aged 20s to 70s

• The property management teams: This project's client.
• The customer support teams: This project's client.
• External partners: Such as financial and legal professionals.

🤝 Key Stakeholders

The project began as a three-company collaboration led by the engineering team. At first, my design team worked mostly with them, not directly with the client, but that changed as the project went on.

• Client (users): Real estate company’s contract department.
• The engineering team: Led implementation, and project management.
• The UI/UX design team: Myself and 2–3 designers. I initially led the UI design direction and eventually took on stakeholder communication through UX interviews.

We followed these key design priorities:

• Consistency: Ensured consistent use of colours, typography, and layout across all pages.
• Comprehensive: Anticipated and included common UI components used in SaaS platforms.
• Scalability: Designed a flexible platform that could be easily extended to future pages.
• Inclusivity: Considered the needs of a wide age range of users—including those in their 70s.
• Accessibility: WCAG 2.0 AA standards, which was the latest version at the time in Japan.

The goal in this phase was to design 20 additional high-fidelity wireframes, but we faced several challenges.

We conducted workshops to organise and prioritise information, user needs, and flows. During these sessions, I focused on:

• Visualise all possible use cases (e.g., creating a UX state outline) to enable clearer discussions and more effective prioritisation.
• Identify areas requiring alignment with the new legal framework, documenting the rationale and approach.
• Reframe business-focused discussions into user voice, since the client was also the primary user, to ensure design decisions stayed grounded in real needs.
• Evaluate use cases by "frequency" and "importance".
• Distinguish between common and edge cases to clarify priorities.

Participants

Approximately five active users directly involved with the relevant pages and workflows took part in the workshop.

To address the issues uncovered in the workshops, we looked to familiar, high-usage platforms for proven design patterns. For example, Backlog—a popular project management platform in Japan similar to Asana—was already familiar to our users and inspired our approach to table layouts and filters. Since the client’s environment was Windows- and Microsoft-based due to strict security policies, we also studied Microsoft’s interface and microcopy to ensure a consistent, user-friendly experience.

Iterations & Proposals

At this stage, we engaged in repeated interviews, prototyping, task-based quick tests with clients (users), and continuous iteration. Based on the gathered insights, I created several design proposals.

As the UX evolved through each iteration, I continually adapted and refined the UI to match, sharing improvements and securing client approval at every step toward implementation.

Design Solutions

Ultimately, I created over 100 high-fidelity wireframes in Adobe XD. The following is an example of one design solution.

❶ Intuitive property search filter

User pain point: The property filter requires precise keywords, limiting flexibility and causing anxiety.

Solution: Introduced more flexible search options on a dedicated filter page placed before the property details. This improved search efficiency, supported comprehensive management, and reduced user frustration.

❷ Reduced hero height by 30%

User pain point: Excessive information causes cognitive fatigue. Long scrolling on large screens increases fatigue. Users prioritise viewing the checkout status over in-store appointment details.

Solution: Reorganised the hero section to surface essential information first, enhancing clarity and reducing the section height by 30%.

❸ Prioritised key information for easier scanning

User pain point: Excessive information causes cognitive fatigue. Users prioritise viewing the checkout status over in-store appointment details.

Solution: Transformed the layout from a task-based structure to a content-based one by decluttering and grouping related information, enabling quicker scanning and more confident decision-making.

❹❺❻ Reduced navigation by 43%

User pain point: Excessive information causes cognitive fatigue.

Solution: Streamlined the entire navigation by reducing 10 tabs, 11 side-navigation items, and 4 global navigation items. Combined with clearer copy, this improved clarity and operational efficiency.

Clear & Consistent Microcopy

User pain point: If someone makes changes to the same project in the cloud, users want to know what changed and get clear guidance on next steps.
Solution: If there are errors, users want the exact location of the mistakes and immediate instructions to resolve them.

To create a consistent, user-friendly experience—based on Microsoft’s design benchmarking—we applied several approaches, such as standardising action buttons with concise, consistent labels (e.g., Edit, History) to maintain clarity and platform-wide consistency.

When multiple users edit the same project in the cloud, they should quickly see what changed and what to do next. For errors, they need the exact location and clear instructions to fix them. Toast notifications were used to communicate key platform states, with explanations to avoid confusion:
❶↓ Status bar: Highlights the impact of an action (e.g., “Now reflected across the system”).
❷↓ Error bar: Gives clear next steps (e.g., “You can resume from ‘Resume’”).

Interaction Design

Defined the smooth interactions.

Built on the initial design system by adding and updating components to support new pages and workflows created during the final design stage. Partnered with the engineering team to implement these in Storybook, providing a central reference for 20+ engineers and ensuring faster, more consistent implementation across all features and releases.

Results & KPIs

We achieved these results by streamlining multi-step workflows, reducing navigation complexity, and introducing a unified digital contract process—direct responses to pain points uncovered during user interviews and workshops.

• Increased productivity: by minimising repetitive tasks such as data entry and approvals.
• Enhanced accuracy and security: by automating processes to reduce errors.
• Simplified communication: by enabling smooth information sharing among stakeholders.
• Increased support remote work: with flexible, paperless operations and streamlined workflows.
• Improved customer service: by reducing administrative burdens, letting teams focus on client needs.

Measured Impact

• 30,000+ hours saved annually: by reducing hero height by 30% and cutting navigation steps by 43%.
• 90% paper usage reduction: through full digitisation of contract workflows.
• Regulatory compliance: achieved by aligning UX flows with updated e-contract regulations.

Key Takeaway

This project gave me the chance to collaborate with diverse stakeholders.

We faced several challenges during the project. The client insisted on a waterfall format, and high security blocked access to the old platform. We also had to revisit UX multiple times, and frequent team restructuring added further complexity. However, these difficulties made this a valuable experience to improve planning, flexibility, and communication with stakeholders.

For the design, I incorporated user feedback while ensuring readability and usability. I aimed to create a UI design that was as simple and visually clear as possible.
I also had the opportunity to hear directly from users about their issues and needs. This direct communication helped accelerate the project, allowing us to complete one workflow per week, which was a significant achievement.

⭐️ The client also shared positive feedback:

• "Your participation made the project run more smoothly than before."
• "You provided suggestions that not only achieved paperless processes but also improved the overall efficiency of our workflows."

⭐️ The development team also shared their thoughts:

• "The introduction of Storybook made collaboration with the design team smoother and improved efficiency."
• "The UI is simple and well-organised, which should make it much more user-friendly than before."

Through this project, I gained a deeper understanding of the user's perspective and strengthened collaboration within the team. It was a truly valuable experience.