Drooms products & Design system
A data room is a digital document repository where all Asset's selling documentation can be stored and shared progressively with the interested buying parties. Along 5 years of work, as part of a 5-10 designers team, I worked on several value iterations that where included in the development of Drooms as a next generation Real Estate digital technology. This is a recount of some of the improvements I was involved with.
System designer . Product designer . Frontend icon migration
Design system
As is common on small design teams, when the first Drooms NXG version went live, Design's priority was to make sure all functionality developed was easy to use. On the long run, consistency took a toll and some time later the Product team realized that the lack of design structure was causing the users to get lost, information to have double representations, hierarchy to be unclear. The lack of structure made developing times and taking design decisions cumbersome.
Challenges
1
Create a base design system and clear rules for visual components enabling the designers to contribute to a decentralized design system.
2
Define a migration plan to cover progressively the design debt created by the pass of several designers.
3
Define a working model so that the design system can be easily adapted by frontend, production managers and other stakeholders.
Migration packages defined
Iconography
Information architecture
Upscaling key components
Iconography
A set of +80 icons was created in SVG format to standardize Drooms visual communication.
Style Guidelines
Preference for monotone outlined - filled icons can be created depending on functionality and visibility.
Pixel perfect.
Visual weight equal to 2px border. If the icon is too heavy visually, use 1.75px border.
Straight ends.
Preference for 90° and 45° angles.
Icons should be legible on 24x24px, 20x20px and 16x16px sizes.
Level of detail kept to a low medium complexity.
Anchoring the main figure for the family allowed to include addendums that would expand the visual meaning of the icon.
Icon Families
Code implementation done by design
Implementation of the migration set of icons was done by the Design team using GitLab, ensuring good design standards.
A working model was aligned and agreed with the Frontend department to source and reuse only approved iconography. A design system communication channel was also created and managed by the Design team, to keep all involved stakeholders up to date with latest changes.
Working model
Information Architecture
A visual interaction analysis was done to understand how information was being grouped and which pieces of information were not correctly grouped. After understanding the current state, a migration plan was created to progressively improve accessibility and grouping of key pieces of information.
Information grouping awareness
Tree information architecture
Migration plan to upscale key components
Phase 1: Discovery
Stakeholders: Design, PM and Research
Run a research study with users using grouping cards to create a hierarchy of the pieces of information by several parameters: Relevance to the user, frequency of use, and dependency complexity.
Phase 2: Ideate
Stakeholders: Front end, Back end and Design
With the previously identified key components, work along Front end and Back end to modularize them into reusable “Plug and Play” components that can serve any flow where they are needed in the product.
Phase 3: Implement and iterate
Stakeholders: Front end, Back end and Design, QA
Design to work on proposals and to align with Frontend and Backend on implementation and testing.
Product features
Over the years, I worked on the development of several Drooms features. All of the features were in some of the following design phases, and I used the following methodologies to bring them from concept to final development.
Design process
Research
Internal knowledge workshops
Wireframes
User interviews
Competitor analysis
Ideate
Wireframes
High fidelity Prototyping
Technical and business feasibility studies
Integrate
Information architecture study
Alignment with other features
Usability testing
Deliver
Final Design specs
Final Prototype
Feature requirements
Support implementation roadmap
Exposé
The Asset managers were interested in a Portfolio data room solution that would help them showcase a rich first layer of information on each Asset to their potential customers before disclosing any documentation on a first step.
Challenge
With a limited space, we needed to offer the user an interface where the Asset managers could compile important first layer of information about each Asset whilst at the same time create an attractive front face to their potential customers.
User story
What As a user I want to be able to increase the perceived value of my Portfolio.
How Showcase all assets in the portfolio in an impactful way.
Solution
An Asset staging component with two states:
The display state, in which the prospective buyers can navigate through a gallery of pictures and an extensive description of the asset selected.
The managing state, in which the asset's manager can upload all of the descriptive content and cross check the final display state.
