Negative space and visual hierarchy
To achieve an uncomplicated workspace where users could easily and immediately locate key informations on a busy page, negative space and visual hierarchy was paramount.
I ensured each section was clearly signposted with a slightly larger, bolder subheading text, and each section and column of the page had consistent padding rules applied between them. I also added a thin grey divider line between each column and the breadcrumbs to clearly define chunks of information; this helped the multiple contents to be simpler, more logical and pleasant to digest.
Empty Inspections Page
Full/Active Inspections Page
With the results of the exercise, I began building the design layout of the page.
We made the choice to keep the layout reminiscent of the old design, to keep some ease in familiarity for the older customers who had gotten comfortable with the previous interface.
I noticed a pattern of three columns of information from the older design, so riffed off of this layout to create a revitalised version.
Aligning with usability best practices of employing an F-shaped reading pattern where people’s eyes go to the left for the the most essential information, I placed important details like property, keys and billing information on the left-hand column. For the middle and widest column, I included the conduct date
and time in Heading caps to draw attention to the actual inspection deadline, its template, relevant notes, assigned Clerk, reference ID and messaging feature. Lastly, additional details like contact and client details sat in the right hand column.
Sketching it out
WIREFRAMING
The Problem:
The Inspections page on Property Inspect served as the main workspace for an Inspection job to be completed. It housed all the information, contacts and correspondence needed.
However, when carrying out screen observations on newer users to test how straightforward and easy it was to navigate, they took longer periods of time than customers who has been using the page for several years to find certain sections and perform actions.
When following up to gather accompanying qualitative data, they expressed that they found the layout of information confusing; the sent messages appeared at the bottom instead of at the top of the message fields, and finding key informations like location of keys, custom notes, and billing details was harder to pull out.
All in all, the design and information architecture of the page was not properly organised for important information and correspondence to be as effortlessly located and processed as possible.
The Approach:
The target for this project was to deliver an uncomplicated, streamlined workspace for both newer and older users to easily operate and manage an information-heavy page.
Building the architecture
As a final activity, I also asked the group to sort these categories of information into a most to least important hierarchy.
The most crucial parts at the top were property and key information, conduct date and inspection reference, and client and contacts, billing and correspondence in the middle, and least important (who the job was created by and assigned to) landed at the bottom.
Streamlining Inspection Management
Product Design
Role: Product Design
Tools: Figma, Miro, Notion
Industry: SaaS, B2B
About the Brand: Property Inspect is a SaaS enterprise product designed for property clerks and managers to complete and deliver inspection
and inventory reports for their clients and property portfolios.
To solve the issue of poorly organised information, I conducted a card sorting exercise with a focus group of older and newer users to discover which pieces of Inspection information they considered to be related to one another. This helped in defining the design and information architecture on the page to be as intuitive and simple to read for our users as possible.
This exercise resulted in the informations of the Inspections page being sorted into these categories:
What would work for the users?
USER RESEARCH
Creating scannable breadcrumbs
The status breadcrumbs served as an anchoring element of the previous Inspections page design; it was bold, defined and allowed for the inspection’s status to be immediately scanned. We of course wanted to bring this into Property Inspect’s new design.
Initially, I devised a pillbox breadcrumb using the new branding colours, arrow icons and a filled variation to show the current status.
From stakeholder and user feedback, the breadcrumbs felt on-brand, but lacked the strong visual presence and urgency on the page that users found helpful in the previous design.
Therefore, we experimented with creating a palette of bright, scannable colours to represent each status.
Starting with the primary green in our branding, we developed distinct colours which felt aligned and related to Property Inspect’s brand world.
Using WCAG accessibility checkers, we ensured these colours were up to at least 2.1 WCAG standards, so that the status was instantly clear.
We chose to go with these arrow graphics over pillboxes to represent each breadcrumb. Our users and stakeholders alike found the arrows I designed to be a more explicit visual language to symbolise a progressing breadcrumb.
Pillbox breadcrumbs
Arrow breadcrumbs
#FFD304
#69A0C1
#4FC7F7
#2DADAD
#FFA501
#7BC14D
#B996C5
DESIGN
Modals for easy editing
With a page that was already populated with multiple key informations, we did not want editing to further complicate or add more details
to the design and experience.
As a result, I employed simple pop-up modals to house actions like adding contacts, or editing and creating custom fields.
This interface decision allowed for users to focus on one task at a time, making their use of the page less overwhelming and more guided.
Empty Inspections Page
Full/Active Inspections Page