Where are the documents?
Our main design file can be found here on Figma.
Why did we choose this design?
Design System
Our design system philosophy combines Google's Material Design with our custom components. Google Material Design brings user-friendly principles and cross-platform compatibility, while our tailored components cater to our platform's needs. This blend ensures a consistent user experience and efficient development, resulting in a unified and effective design language.
Colors
We expanded Google's Material Design color palette by incorporating soothing light blues for surfaces and striking dark blues as accent colors. We also included shades of greys and whites for clarity. This custom palette respects Material Design principles while giving our platform a unique look that's visually engaging and user-friendly.
Design process
Our design approach revolves around the exclusive utilization of Figma's auto-layout feature. This process entails structuring elements within flexible containers that automatically adjust based on content, screen size, and orientation. By employing auto-layout, we achieve consistent alignment, spacing, and responsiveness across different devices and layouts without manual adjustments.
This approach enhances design efficiency and reduces the need for repetitive tasks, streamlining the workflow. This systematic use of auto-layout ensures our designs remain adaptable and coherent, catering to diverse user experiences while significantly expediting the design process.
Some general guidelines/standards for DataLab
Collaboration with devs
Figma's Dev Mode feature, combined with Jira integration, creates a seamless collaboration bridge between developers and designers. Dev Mode enables developers to inspect design elements and their specifications directly within Figma, eliminating the need for design handoff documents. Developers can access code snippets, measurements, and even export assets effortlessly. Simultaneously, the Jira integration streamlines the task management process. Design elements can be linked to Jira tickets, connecting design decisions directly to development tasks.
This collaboration begins with designers crafting designs in Figma. Developers can then enter Dev Mode to inspect and gather all necessary details. If adjustments are needed, designers make them in real time, and developers instantly see the changes. Once the design is approved, designers link elements to Jira tasks, automatically creating a structured workflow. Developers access design details right within Jira, fostering a smoother understanding of implementation requirements.
In essence, Figma's Dev Mode and Jira integration foster a continuous dialogue between designers and developers, mitigating miscommunication, reducing back-and-forth, and accelerating the entire design-to-development process.
Hand-off process
To collaborate effectively with developers using Figma's Dev Mode and Jira integration, you can employ Jira ticket-specific labeled sections and mark them as "ready for dev". Here's how the process unfolds:
Design and Validation: As a designer, you create and refine your designs in Figma. Once a design iteration is complete and validated by relevant stakeholders, it's time to indicate its readiness for development.
Labeled Sections: Within your Figma file, organize your designs into labeled sections that correspond to specific Jira tickets. For instance, you can create a green-labeled section named "Ready for Dev" within each relevant page of your Figma file.
Integration with Jira: Connect your labeled sections in Figma to their corresponding Jira tickets. This connection is established through Figma's integration with Jira. Link each labeled section to the relevant Jira ticket where the development task is documented.
Ready for dev: Once a design section is linked to a Jira ticket and is validated for development, mark it as ready for dev. This indicator can be a green-colored label or a specific visual element that signifies that the design is now ready to be implemented.
Developer Access: Developers can now access your designs using Figma's Dev Mode. They'll be able to see the green-marked sections that correspond to specific Jira tickets. These marked sections indicate that the design within them has been validated and is prepared for development.
File structure
As the date of writing (29/08/23), the Datalab Figma file is currently composed of 9 main pages.
📔 Cover
Figma project files should always include a cover and a thumbnail due to several reasons. These visual elements aid in swift project identification, fostering efficient organization, and presenting a professional image when sharing files. Consistent covers and thumbnails reflect branding and design cohesion, while also providing a quick preview of project content. By effectively utilizing these visuals, designers enhance communication, offer inspiration, and make their work more engaging and accessible to collaborators and stakeholders.
🧩 Components & Styles
The Components & Styles page houses a collection of reusable design components and stylistic elements. This includes buttons, forms, icons, typography styles, color palettes, and various UI elements essential for ensuring visual consistency throughout the design system. By centralizing these components and styles, it streamlines the design process, promotes cohesive aesthetics, and facilitates efficient collaboration among team members working on different aspects of the project.
🎨 Design
This Design page serves as the creative hub where user interfaces come to life. Here, the design process unfolds, and user-centric visuals take shape. This page is dedicated to crafting intuitive layouts, arranging elements, and refining visual details that define the user experience. From wireframes to high-fidelity mockups, the Design page encapsulates the evolution of ideas into tangible designs.
🖱️ Prototype
The Prototype Page is designed for creating interactive prototypes and user flows within your Figma project. This page serves as a platform to construct dynamic representations of your designs, allowing you to visualize and communicate user interactions effectively. By linking screens and incorporating interactive elements, you can simulate the user experience, demonstrating how users will navigate and engage with your design. This page is instrumental in crafting compelling presentations for stakeholders and users, offering a hands-on preview of the envisioned product's functionality and usability.
🎫 JIRA tickets preparation
This page is used to arrange and plan tasks for future Jira tickets. It helps you break down project steps, organize work, and clarify what needs to be done.
📢 Communication & logos
The Communication & Logos page is where you create logos and visuals for Datalab communication. It's the hub for designing graphics that represent the project's identity and message. This page ensures consistent and impactful visuals for effective communication with Datalab users.
🛣️ Value Proposition & Roadmap
The Value Proposition & Roadmap page is where we shape Datalab's unique value and outline our design plans.
🧑🏼🤝🧑🏼 Persona/Journey/feedback
The Persona/Journey/Feedback page is where we first created our user personas, plotted their journeys, and collected valuable insights from user interviews. This space ensures we deeply understand our users and use their perspectives to shape our design decisions effectively.
🗄️ Archives
The Archives page serves as a repository for outdated and no-longer-relevant content, acting as a cutoff point for such materials. Here, you can house old pages that have been retired from active use. Among these is the Drafts section, which holds older designs that have become obsolete but are still valuable for reference purposes. The archives page aids in maintaining a clutter-free and organized workspace while preserving historical design iterations and insights.