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, Journeys removes the hassle of jumping between different 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 skills.
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 draw inspirations from the websites built by other teams at JLL.
Challenge
The first version of Journeys was built with limited resources and very little “design love”.
It was built on Retool, a tech stack that helps companies build internal tools quickly. Instead of coding everything from scratch, developers can use out-of-the-box components like tables, buttons, and forms. While Retool granted development speed, its design limitation was impacting the user experience. Journeys was due for an upgrade, and I was brought on to redefine the user experience.
Approach
Understanding the full picture
Instead of jumping directly to the redesign, I worked with the product team to understand the ins and outs 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 are users struggling with? Which of the features are utilized and which aren’t? Why? What’s missing from the user’s perspective? Does the tool offer the capabilities that users need to achieve 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 or 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 falling into the trap, I collected information around user goals, motivations, pain points, and their work process by:
Conducting user interviews with brokers
Auditing client meetings (Field research)
Study materials that 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 on one page, from the functionalities to the 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.Poor navigation
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 find or access a feature. This approach of stacking blocks of functionalities on top of each other soon became unscalable in this case. We needed a structure that would allow the users to quickly access what they need.Lack of UI consistency and visual hierarchy
The existing visual elements, such as text styles, colors, and other UI components, were used arbitrarily. This added workload to the brain when trying to make sense of the content on the pages. In the redesign, we made sure to adopt JLL’s new design system to bring consistency and structure to the UI.
Defining design principles
Simple - Made for the average Joe
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. We wanted the simplicity of Google Docs as opposed to Microsoft Word. We wanted to enable users with no tech or design skills to build a professional website on their own with ease.Fast - Designed for speed
For brokers, time is money. So, we need to design the flow in such a way that allows them to build a site and make modifications in a snap.Scalable - Architected for tomorrow
We wanted a clean and structured UI that could handle a growing list of functionalities at least in the foreseeable future, so we wouldn’t fall into the rabbit hole of stacking new content or features on one single page.
Setting a direction
I surveyed tools out there that were trying to solve similar problems, such as Canva, Squarespace, PowerPoint, Google Slides, and more. I shared some high-level design concepts by showing particular features or aspects of these tools. Together with the product manager 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. Interactive prototypes helped us get a sense of the user experience before implementation:
I built a master prototype of the entire app to help with the design process, collect feedback from the users, product team, and stakeholders.
Exploring visual treatments
Once we nailed down the functionalities, user flows, and wireframes, I moved on to the visual design exploration. 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.
Click on the image above to enlarge
Measuring Success
Since I moved on to another project, I didn’t get to see the impact of the redesign when it was released. I would measure the following metrics to see if the redesign was successful:
Adoption
Number of websites created
Number of users signed up for the tool
Feature utilization
Usability
Task success rate
Time on task
Time spent on building a Journey
Discoverability & findability of features
Systems Usability Scale
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.
To succeed, it’s crucial that you bring your team along with you through the thought process and make sure there is consensus on the problem to solve before moving forward.