Leading companies in the retail, restaurant, and health care field use Sitewise Pro to plan their real estate strategy. From A&W Canada franchise owners, to market analysts at L’Oreal USA, users rely on Sitewise to generate demographic reports, track competitors, and produce presentation-ready maps.

I was contracted as the sole UX/UI designer for an ongoing platform-wide rebuild. This involved:

• Improving usability and visual appeal
• Interviewing users and the support team to prioritize impactful changes
• Creating Sitewise’s first dev-friendly pattern library

My role began part-way through the development of major rebuild of the tool. Several interface elements had been “translated” with a new look and feel and the process had been mostly contained within the dev team. While I was brought on as someone with prior experience on the Sitewise Support team, I wanted validate and ensure that the changes we made were genuine improvements based on the needs of real users.

Interviews and screenshare sessions with users and Support helped focus efforts toward making the tool easier to use, while hopefully reducing costs in training.

Users’ success with the Sitewise platform is reliant on a dedicated and easily accessible Support and Client Success team who manage onboarding, account customization, and regular training sessions. Users often participate in screen sharing calls and email threads that address the basics and beyond.

While that dedication is key to long-lasting client relationships my discussions with the team revealed how much friction is created by interface flaws that prevented a seamless and intuitive experience. Because these issues can easily turn into support tickets or meetings, I see my impact as a designer as benefiting users and the internal team at the same time.

For me, this means focusing on the interface’s discoverability as a primary lens. From the small (hovers, labels, tooltips!) to the more complex (a file manager UI, smarter default settings), the guiding principle was to prioritize improvements that help a range of users feel more capable and self-reliant while using Sitewise.

Prioritization: high impact changes go first

To make sure the most important work was addressed first, I hosted a discussion session on Miro with the CTO and members from Client Success/Support. We evaluated aspects of Sitewise from the perspective of perceived impact as well as effort in re-design and development.

A clear highlight stood out. Layout, Sitewise’s map annotation and exporting tool: essential for many users, but with several usability issues to be addressed.

Contextual inquiry:
learning directly from users

To prepare for the redesign, I hosted five sessions with experienced users of Layout, including a real estate director for a growing fast casual pizza chain and the real estate analysis team for a nation-wide veterinary clinic. In these semi-structured interviews I observed users’ real workflows in Layout, from project creation to export.

The exercise highlighted a need to relieve basic interaction pains (hotkeys, status visibility) and revealed surprising things, such as a gap between users’ actual usage of the “Template” feature and its intended use.

Session notes

After these sessions, I organized my notes into themes to present back to the team. For Layout, the “Presentation” and “Blindspots” themes jumped out to me most. They address users’ ultimate goals (eg. a meeting-ready PowerPoint) and the useful affordances we just haven’t made clear enough yet.

A few highlights

Rather than creating new projects from scratch every time, users demonstrated more of a “standardization” focused mindset, relying on former projects as templates, and needing tools that helped produce polished output every time.

Building Sitewise’s first pattern library

With the foundations of Sitewise “1.0” and the in-progress 2.0 Beta already in place, my approach was to balance the old design’s no-frills efficiency with a bit of breathing room and modern touches of the new designs.

An example of this is the Infobox, a frequently-seen pop-up summary of site’s data:

Because these prototypes are in production, the pattern library needs to be robust and ready to iterate upon. I want the work I’ve done so far to be easy to work with in the future, for any designers or developers to come. That means, keeping the CSS box-model in mind while using Figma’s Auto Layout as much as possible. Elements are componentized, ready to be swapped in and out, and reconfigured.

A growing reference, the pattern library also shows critical measurements for devs, to make sure we’re keeping interfaces uniform throughout the product. Where I can, I use real-world input values to try to “break” interfaces onto multiple lines, or plan how to truncate them. Brief interactive prototypes also demonstrate small interactions, like hover states.

Inspiration, ideation

I looked at easy-to-use visual whiteboarding tools like Miro and Whimsical for useful patterns when redesigning Layout. That “zero training required” style of design will be essential in helping more users learn the tool. For more complex form UIs, I referenced from Photoshop controls and the Google Suite in particular, noting how they separate and label distinct sections of content.

Sometimes paper sketches were the first step in UI ideation, but I just as often like using Whimsical to help make things look a bit more “real” for design reviews, without having to worry much about nailing alignment, icons, or spacing.

Having weekly UX/UI sessions with members from Development and Support were invaluable. They allowed me to get feedback and iterate on new concepts, while revisiting earlier work that was starting to come online. New patterns introduced later on would get retrofitted onto older UI elements, standardizing the look and feel over time.

As the sole UX/UI designer for this product, I’m excited about the potential impact that can be made by listening to user feedback and designing based around how people are using are product daily, and relying less on our assumptions. But because the platform rebuild process covers so many features, getting the beta to a “ready and fully testable” state is still a little ways off. User testing complex annotation tools like Layout is difficult with typical prototyping software – but much deeper iteration is in the near future!

Provided the opportunity, I think it would be valuable to:

• Deploy analytics tags to generate data on which interactions are hot, which aren’t, and explore from there.
• Host more observation sessions with users, so UX design can impact their overall workflow, rather than just the tools we’ve provided.