Valueguard

• Transformed complex property valuation tool into an intuitive, customizable interface
• Created adaptive layouts for both novice users and real estate professionals
• Validated design improvements through extensive user testing and analytics

Overview

Valueguard is a Swedish company that's been shaking up the real estate world since 2005 with their quality-adjusted price index (HOX®) for properties across Sweden. They've become the go-to source for real estate pros looking to make smart, data-driven decisions.

Their valuation service, Värderingstjänst, has been a game-changer, offering crucial insights that have made it an essential tool in the Swedish real estate market. But even the best tools need an upgrade now and then.

That's where we came in. With Valueguard's platform running on outdated tech, it was time for a major redesign to keep it at the top of its game. We were excited to take on the challenge of modernizing this indispensable tool while making it even more user-friendly and effective.

Unveiling Valueguard's potential

Valueguard's valuation service is like a treasure trove of real estate data. It offers detailed information on every property sold or listed in Sweden, complete with powerful search and filtering tools. Plus, it keeps agents in the loop with the latest market trends, helping them give spot-on advice to their clients.

Working alongside Stefan Walet, Valueguard's Chief Production Officer, and Caroline Gard, a Senior Developer at Mpya Digital, I dove into the world of UX and product design to give this powerful tool the interface it deserved.

Tackling the tough stuff

The existing Valueguard platform was a bit like a fighter jet cockpit - incredibly powerful, but overwhelming to use. It had been built up over the years by brilliant engineers who, understandably, weren't UX experts. Our job was to make all that power accessible and user-friendly.

We kicked things off by chatting with Valueguard's top clients to understand what was working and what wasn't. Here's what we discovered:

• Simplification & usability: The platform was information-rich but navigation-poor. Users felt lost, especially when using the map. Simple tasks often involved too many steps.
• Data presentation & layout: Users wanted more control over how they viewed data. The one-size-fits-all approach wasn't cutting it anymore.
• Reports & analytics: Creating valuation reports, a key feature, was more complex than solving a Rubik's cube. We needed to streamline this process.
• Mobile & tablet usability: The platform's poor performance on mobile devices was a big pain point, especially for agents out in the field or meeting clients.

We also noticed that users had varying levels of expertise. Some were power users who leveraged every feature, while others stuck to the basics. Our challenge was to cater to both groups without alienating either.

To tackle this, we focused on three key areas:

• Personalization: Tailoring content and functionality to individual users.
• Customization: Giving users the power to adjust how the product works for them.
• Efficiency boosters: Adding keyboard shortcuts and touch gestures to speed things up for power users.

Crafting the solution

Stefan Walet, Caroline Gard, and I rolled up our sleeves and dove into a series of workshops and meetings. We mapped out every aspect of the platform, from screen layouts to map filters. We also fine-tuned the main user flows, including:

• Quick address searches
• Advanced search capabilities
• Refining search results with smart filters
• Customizing and selecting search results
• Generating tailor-made reports
• Managing saved searches
• User profile and settings updates
• Easy access to documentation and resources
• And more!

These insights helped us develop and refine our layout proposals, guided by some key principles:

1. Real estate agents often juggle multiple clients, so we designed the platform to handle numerous projects efficiently.
2. We made the interface customizable, allowing users to show/hide panels and expand/collapse sections based on their preference for map or list views.
3. Filters were designed to be compact yet easily accessible and interactive.
4. We ensured that report generation was just a click away from any part of a project.
5. For mobile users, we made the map the star of the show.

Bringing ideas to life

Once we were happy with our UX design and visual direction, we built a functional prototype in React. This allowed us to test the interface in real-world scenarios and fine-tune its usability.

Before letting Valueguard's team loose on the prototype, we integrated Hotjar to track and analyze user interactions across all devices. This setup allowed us to quickly refine the interface based on real user feedback.

We made some interesting discoveries. For instance, placing the filter button in the top right didn't hinder its use at all. We also found that most users had no trouble finding and using the interactive slider to expand and collapse the side menu.

After several rounds of tweaks and improvements, we were ready to move onto the next exciting phase: full-scale development! 🚀

Looking back and moving forward

As we progress through this project, I'm finding it incredibly rewarding to enhance an existing product. Diving into user feedback, analyzing pain points, and crafting innovative solutions is a truly inspiring process.

The opportunity to refine and evolve a product that will be genuinely appreciated by its users fuels my passion for design. This project has reinforced my commitment to creating user-centric solutions that make a real difference. It's a powerful reminder of why I love this profession: the ability to make a tangible impact through thoughtful, user-focused design.