Journeys
UI, UX | 2021
A website builder that empowers brokers to win
What is Journeys?
Journeys is a website builder that helps our real estate brokers pitch their proposals in one simple website.
Before Journeys, in client meetings, brokers had to constantly jump around between pitch decks, images, files, and multiple browser tabs to tell the story. This can be challenging for the presenter as well as the audience.
For brokers, it removes the hassle of jumping between various files and tabs For clients, everything they need to know is bundled into one simple link for easy access. Best of all, anyone can build a tailored website in minutes without any technical skill.
Project Page: Users can manage site content in one simple view
Tutorial: First-time user gets a prompt on the drag & drop capability
Team: Users can manage team access to the project
Library: Users can get inspired by websites built by other teams at JLL
Challenge
The first version of Journeys was built with limited resources with little “design love”. It was built on Retool, a technology that allows you to build internal software quickly with a set of building blocks. While Retool granted development speed, it came with a cost - it was difficult to customize, which led to a compromise in user experience. Journeys was due for an upgrade on user experience. I was brought on to lead the redesign effort to improve the user experience.
Approach
Understanding how we got here
Instead of jumping directly to the redesign, I worked with the product team to get the full picture of the product. Having a solid knowledge of how we arrived at where we are is critical for proposing any change as it reduces resistance and increases the chances of success.
I gathered insights in the following areas:
Business: What is the history behind this product? What is the vision, goal, challenge, and roadmap? What is the business model? What does success look like?
User: What areas do users struggle with? Which of the features are utilized and which aren’t? Why? What’s missing from the user’s perspective? Does the tool have features that users need to accomplish their goals?
Technicality: Why do certain functions work that way? Was there any technical constraint? What was the intention behind the technical approach? Can we change certain features/user flows in the redesign?
Seeing the world through the eyes of the users
We’ve all experienced application updates at some point in life. But let’s be honest. Not all changes are an improvement. Sometimes, they can be worse. Why is that? One common explanation is that people don’t like changes. Or perhaps the new design is just - not there yet.
As designers, we sometimes lose sight of the users and make decisions based on our “expert experience.” This can be dangerous as we could fall into the trap of making too many assumptions that aren’t true. To avoid this, I set out to see the world through the lense of our users by talking to brokers, auditing client meetings, and gathering the materials brokers use to win deals.
Identifying UX problems
To get to the solution, we first need to understand the problem. We’ve identified the following issues that were hurting the user experience:
Heavy cognitive load - There’s too much going on in one page, from the functionalities to visual elements. It’s hard for the users to figure out what to do upon landing. For example, multiple primary buttons were displayed in the same view “screaming” at the users, fighting for attention. This added extra thinking workload and confusion for the users.
Unscalable UI - While it’s a good idea to have all the functionalities on one single page, it also creates a problem where users have to scroll all the way down to the bottom of the page to access a certain feature. This approach of stacking blocks of functionalities on top of each other soon became unscalable in this case. We needed a structure that allows users to quickly access what they need.
Defining UX principles
Simple - There are lots of benefits that come with keeping things simple. We wanted the experience to be simple in terms of navigation, user flow, and interaction. Canva vs. Photoshop was an example of what we were trying to achieve. We were not aiming for a tool for a web designer. Instead, we wanted to enable a broker, with no design skills, to be able to build a professional website on their own for the purpose of closing the deals.
Fast - For the brokers, time is money. So, we need to design the flow in such a way that allows our brokers to build a site and make modifications in a snap.
Scalable - We wanted a clean UI that could hold access to a growing list of functionalities so we wouldn’t have to worry about “running out of space” or having to force users into long scrolls just to access certain features.
Setting a direction
I surveyed tools out there that were trying to solve similar problems such as Canva, SquareSpace, PowerPoint, Google Slides, and more. Together with the PM and engineers, we discussed what was feasible and decided on a path forward.
Building prototypes
I built multiple iterations of design prototypes and collaborated with the product team to arrive at the final design solution.
This Figma prototype helped us get a sense of how the app would work:
Exploring visual treatments
Once we nailed down the high-level user flows, I moved on to the visual design phase. I experimented with different visual treatments such as color, typography, shadows, spacing, and layout to optimize the user experience.
Experimenting with different visual treatment from color, typography, shadow, spacing, to layout
Outcome
The redesign successfully reduced the cognitive load imposed on the users by improving the navigation and page layout, adopting a systematic approach to UI design, and removing visual distractions. With usability hiccups removed, we lowered the learning curve, which would increase user adoption.
Click on the image above to enlarge
Measuring Success
Since I moved on to another project, I didn’t get to see the release of the final product when it was released. I would measure the following metrics to see if the redesign was successful:
Adoption
Number of Journeys created
Feature utilization
Usability
Task success rate
Time on task
Systems Usability Scale
Time spent on building a Journey
Discoverability of features
Team collaboration
Lesson Learned
The importance of aligning on the problem before diving into the solutions
I've learned a valuable lesson from this project that changed my approach to any projects from then on.
After spending days exploring, researching, and crafting the solutions to improve the user experience, my solution was turned down by our product manager because he preferred how "simple" the current design was. I was astonished by this comment because, in my mind, the current design was overly complicated and confusing. This experience taught me the importance of aligning with the team on the problems we are solving before rushing to solutions. This approach would save time and ensure everyone is on the same page.