CoStar - UI Container Design Case Study

We need to update and unify the look of the summary and detail pages in CoStar Suite, in a modern, clean, flexible, and scalable way. Our summary pages are comprised of many unique styles and shapes of information, such as: charts, stats, notes, callouts, maps, logos, photos, etc. Having so many different types of elements on a page can present challenges when attempting to create a clean, organized design. A secondary challenge was also to make the design flexible enough to accommodate language translations, without breaking the integrity of the design. 

The solution is to containerize. Containerization is a way of implementing a unique, functional, design element that gives all the informational elements a consistent visual relationship to each other. Containers also help to easily organize information. The information is easily scannable in containers. Therefore, the viewer is able to quickly assess the usefulness of the information to his or her current task.