CoStar Suite - UI Design Case Study
CoStar stands as a global frontrunner in real estate data. The CoStar Suite encompasses a range of Software as a Service (SAAS) offerings including Property Records, Listings, Public Records, Fund Data, Loans, Market Analytics, Lease Analysis, Custom Reporting, Risk Analysis, Lease Accounting, and Lease Management.
My Role
- UI/UX design
- Visual design
- Data stress testing
- Data organizing
- Prototyping
- Wireframing
Problem
We needed a modern, sleek, flexible, and scalable update to unify the appearance of both summary and detail pages within CoStar Suite. Our summary pages consist of a variety of distinct styles and formats of information, including charts, notes, callouts, maps, logos, photos, and more. Managing such diverse elements on a single page poses challenges in achieving a clean and organized design.
Solution
Cardizing is a method for incorporating a distinctive, practical design element that ensures all informational components maintain a uniform visual connection with each other.
Added bennefits of cards
Cards help to easily organize information.
The information is easily scannable in cards; therefore, the viewer is able to quickly assess the usefulness of the information for his or her current task.
Terms for understanding this guide
Grid Column: The pink bars will always represent “grid columns.” There will always be 16 “grid columns” on a page, and they will always be the same size.
Text Column: The grey boxes with dotted blue lines will always represent “text columns.” Text columns sizes and quantities will change based on needs or designer discretion.
Prepping your page to design/dhink in 16 column grid
Quick Stat card treatment example:
Column Limit
a. The recommendation is to use up to 6 text columns max per card. Each text column will occupy 2 grid columns. If there is “no” image alley, there can be up to 8 text columns max per card. Each text column will occupy 2 grid.
*Consideration “a” should be made for cards with tables but not required.
Quick Stat card example after appling grids:
Quick Stat spec reference
I established consistent specifications for spacing, line weight, typography, and colors this is crucial for creating a cohesive and professional design. Once I had these specifications in place, building reusable components becomes much more efficient and helps maintain design consistency across all projects and teams. Reusable components not only save time but also ensure that your designs are coherent and user-friendly.
Quick reference for a simple paragraph
Problem
How do we make it scalable across language translations?
During the initial phase of defining cards, a significant challenge emerged: how would the the cards handle language translations? This issue became apparent when a separate team within CoStar, operating in the traditional CoStar environment, launched CoStar French Canadian. It highlighted a major obstacle we would encounter going forward. The problem lies in the fact that English typically requires fewer characters to convey words or phrases compared to most other languages. This begs the question: are the containers sufficiently adaptable to accommodate translations across different languages while preserving the integrity of the design?
For instance, when translating the current CoStar USA format into French Canadian, a notable adjustment was made. Instead of presenting the title and its corresponding value side by side, we opted to stack them. This alteration was necessary due to the differing lengths of content between languages.Yet, sustaining that approach wouldn't be viable in the long run given the new card design.
I felt that if I could alter the design based on the characters needed in the title column, it would lead to a great solution that maintains the integrity of the design and experience. After speaking with development engineers about my theory, limitations and possibilities, I got the green light.
I then created a 3-tier solution to accommodate language conversions in Quick Stat cards.
Short Scalable Quick Stats Extended Scalable Quick Stats Super Extended Quick Stats a. The recommendation is to use up to 6 text columns max per card. Each text column will occupy 2 grid columns. If there is “no” image alley, there can be up to 8 text columns max per card. Each text column will occupy 2 grid.
*Consideration “a” should be made for cards with tables but not required. 18 characters max per quick stat item in the first and last text columns 20 characters max per quick stat item in the middle text columns If through language conversion the characters per title increase beyond the prescribed character limits, your information will adopt the “Extended Quick Stat” format. a. My recommendation is to use up to 4 text columns max per card. Each text column will occupy 3 grid columns. If there is “no” image alley, 4 text columns are still recommended, but each text column will occupy 4 grid columns. *Consideration “a” should be made for cards with tables but not required. 32 characters per Quick Stat item in the first and last text columns
Language scalable cards treatment solutions
Short scalable Quick Stat card treatment
Character Limit
Example
Extended scalable quick stats treatment
4 Text Column “with” Image Character Limit
34 characters per Quick Stat item in the middle text columns
4 Text Column with “no” Image Alley Character Limit
44 characters per quick stat item in the first and last text columns
46 characters per quick stat item in the middle text columns
Example
If through language conversion the characters per title increase beyond the prescribed character limits, your information will adopt the “Extended Quick Stat” format.
Super Extended Quick Stats treatment
a. I recommend 4 text columns max per card. Each title text column will occupy a maximum of 4 grid columns. If there is “no” image alley please refer to the suggestion for “extended” quick stats.
Note: If through language conversion the characters per title increase beyond the prescribed character limits, your information will be truncated and trigger an audit of the item.
*Consideration “a” should be made for cards with tables but not required.
2 Title Columns “with” Image Alley Character Limit
44 max characters per quick stat item in the first column occupying 4 grid columns
The variable column will occupy 2 grid columns. Therefore, the text will wrap.
Example
Super Extended Quick Stats treatment with hidden stats
Note: If there are more than five rows of title stats in this format, there will be a “more” option so the user can elect to reveal all suppressed stats. Therefore, the first 10 stats will be shown by default.
Super Extended Quick Stats treatment with hidden stats revealed
Note: Example of more stats revealed
