I worked with eQ Technologic during my summer internship with a dedicated team which was mentored by Bhakti Khandekar, our senior lead UX manager.
This was a large scale project as we were working on redesigning a design language system for the eQ products from scratch and a journey on how we validated those design decisions for the project.
About eQ Technologic
eQ Technologic, Inc. is a Pune-based software company which offers comprehensive software solutions for enterprise-wide visibility and for enterprise application integration, synchronization, and migration. eQ’s platform for enterprise information infrastructure establishes a digital backbone of integrated applications and provides enterprise-wide visibility leading to actionable Insight.
eQ’s product platform is flexible, robust, scalable, and secure with overall lower total cost of ownership. eQ’s offerings product’s in the market are eQube-BI for enterprise-wide Business Intelligence and eQube-MI for application migration, synchronization, and integration. Additionally, eQube-TM and eQube-DP provide core capabilities for rules-based transformations between disparate systems in support of application migration/integration, 'cube' migration, and for data quality assessment, correction/repair.
eQ Technologic has planned the complete redesign of their Design Language system across all the products in operation. The new Design language is set to release in upcoming december i.e. December 2021. As an intern I worked with the UX designers to identify the problems in current design language system & establish the guidelines for new Design language system by following the industry best practices but also keeping the eQ’s products user in mind.
Job role
-
Work with and support UX designers in thinking creatively to produce new ideas, and concepts and developing interactive design for eQ Design language system
-
Prepare rough drafts and present the ideas
-
Using innovation to redefine a design brief within constraints of time and cost
-
Amend final designs to comments and gain full approval
-
Working with a range of range of projects and keeping up to date with emerging trends & technologies
-
Proof-reading to produce accurate and high- quality work
-
Demonstrating prototyping skills with rough wireframes considering the feasibility from developing point of view
Project Plan
Nature of assignments that were given in this project was to understand the best practices by leading design language system in the industry such as Carbon (IBM) DLS, Material.io DLS , Atlassian DLS etc.
After learning from the leaders of the industry, Competitive analysis was done in order to understand the best practices that are being followed throughout the industry and what is the rationale behind it. Data from competitive analysis was used to perform the UI audit and later to find out the issues which were categorised in the form of Showstopper, Major & Irritant. Once the issues were identified our team started to work to generate the ideal state of grid, Icons, color, typography, component etc.
Introduction to DLS
“Design language system is a structure that assembles the set of reusable components, standards and documentation. It provides consistency in the products, process of design, development, and improves productivity for the organisation. The design language system also sets a standard for brand communication within & across organisations.”
eQ Technologic planned the complete redesign of there Design Language system across all the products in operation. The new Design language is set to release in upcoming december i.e. December 2021. As an intern I worked with the UX designers to identify the problems in current design language system & establish the guidelines for new Design language system by following the industry best practices but also keeping the eQ’s products user in mind.
Design system is a comprehensive library to aid in digital product design and development for a particular digital ecosystem. It includes reusable components, interconnected patterns, guided by rules, principles,constraints and best practices.
Principles of DLS
Efficiency
Design language system facilitates the design and development team to reuse the components thereby avoiding building similar components every time. This certainly improves the efficiency of the products.
Consistency
DLS shares a set of rules and principles to build components. This makes it easy to maintain consistency in experiences across various platforms.
Scale
Due to improved efficiency and consistency, an organization can develop faster products at scale.
Benefits of DLS
DLS is needed as much as efficiency, scale, and design consistency. It combines tools and systematic processes to develop digital products with a modular approach. DLS shares one design language due to which everyone in the design and development team is on the same page. DLS creates visual harmony, minimizes blockages, and improves the user experience.
Competitive Analysis
Visual Design and Component Audit
1. Visual Design Audit
Showstopper and major issues
-
Grid system: loosely defined & not followed in the ecosystem, Grid for different screen resolutions considering responsiveness is not defined which causes inconsistency.
-
Spacing & padding: Different components follow different spacing & padding. No standards are being followed which loses visual rhythm.
-
Colors: The usage of brand color is not defined. Data visualization colors are not defined. No particular color palette is defined for the further use cases, which brings inconsistency & confusion.
-
Typography: Irregular use of fonts. Accessibility is not considered. Legibility issues were noticed.
-
Iconography: Categorization of icons is not done. Different states for icons were not defined.
-
Interactions: Interaction states are not defined for many cases.
-
No common platform to access information about DLS.
-
Accessibility was not considered while defining the visual design specs.
-
Border size, corner radius & drop shadows are not defined in the current DLS.
2. Component Audit
Major issues
-
Font mismatch within specs ( Rubik & open sans for same component type )
-
Components are not following any layout & grid pattern.
-
Spacing & padding is not consistent across components. 8px or 4px spacing & padding is not being followed.
-
Legibility issues in the midnight theme as contrasts ratios were failing.
Minor issues
-
Column alignment is mismatched is some components e.g. Tables. ( some were left aligned & some are center aligned.
-
The dimensions mentioned in the design specs are not exactly matching.
-
Different sizes for the same kind of components.
-
Wrong naming conventions in components might cause confusion among users.
Proposed Design Language System
1. Grid
-
Highest breakpoint=1888px
-
Column no: 16
-
Column width: 96px
-
Gutter width:16px
-
Left offset: 72px
-
Right margin:40px
-
8px square grid for alignment
-
4px for fonts & icons alignment
2. Spacing
General Rules
-
Use multiples of 8px when defining dimensions of columns, rows, boxes & components.
-
Spacing is measured from the edge of the text boxes.
-
Keylines are determined by each element's distance from the edge of the screens and are measured in increments of basic grid units.
3. Colors
Observations
-
Colors were loosely followed in the products.
-
Primary & secondary colors were not defined.
-
No specific color pallet was being used for color usage.
-
Accessibility was not taken into consideration, especially in interaction.
-
Semantic colors were matching with the product colors.
-
Instead of refining the colors, there was a need of reinventing color from scratch.
Exercise for establishing colors
-
Primary
-
Secondary
-
Neutral
Exercise for establishing colors
-
Semantics
-
Interactions and states
Proposed color palette
Testing on page types
4. Typography
Observations
-
Font stack- open sans- Optimal for print, web & mobile interfaces and has excellent legibility characteristics in its letterforms. Good for websites and mobile apps for prolonged usage and legibility as it is easy on the eyes and can be good for regular consumption.
-
The difference in the hierarchy was not noticeable as consecutive font slides were used.
-
Fonts size less than 12px are being used for open sans which is against best practices.
-
Line spacing is not defined in current typography.
-
Font weight is not leveraged in order to main
Current product typography
-
Generated from the standard best practices across different Web UI.
-
Legibility is checked by following the WCAG guidelines considering the colors and font size with backgrounds.
-
Line spacing is defined for each category.
-
Multiple testing is done on different product page types to see how it fits eq product screens.
-
Iterations were done from the feedback to suit eq products typography while maintaining the best practices.
-
Consideration of slightly different typography for particular use cases e.g. data visualization.
Midnight and Snowflake
5. Canvas
Canvas Wireframes
Default screen
Left panel open
Left panel pinned
Right panel open
Bottom panel open
Hex code for canvas - Snowflake
Frame: #F4F4F4
Frame border: #393939
Primary working area: #F4F4F4
Secondary working area(panel): #E0E0E0
Secondary working area(panel border): #8D8D8D
Tab bar: #C6C6C6
Tab bar border: #A8A8A8
Toolbar: #F4F4F4
Toolbar border: #A8A8A8
Grid: #8D8D8D
Text: #393939
Icon: #393939
Hex code for canvas - Midnight
Frame: #161616
Frame border: NA
Primary working area: #262626
Secondary working area(panel): #393939
Secondary working area(panel border): #525252
Tab bar: #525252
Tab bar border: #6F6F6F
Toolbar: #262626
Toolbar border: #393939
Grid: #6F6F6F
Text: #F4F4F4
Icon: #F4F4F4
Hex code for tiles and connections - Snowflake
Size
Activities:
-
Circle (40x40) individual (24x24)
-
Rectangle (84x84) Canvas individual (24x24) Corner radius: 5px
-
Rhombus (32x32) individual (18x18)
-
Line stroke: 1px
Color
Tile: #F4F4F4
Tile text: #393939
Tile border: #393939
Disabled tile: #E0E0E0
Disabled tile text: #A8A8A8
Disabled tile border: #C6C6C6
Connection lines: #262626 (solid)
Interaction states - Snowflake
Hex code for tiles and connections - Midnight
Size
Activities:
-
Circle (40x40) individual (24x24)
-
Rectangle (84x84) Canvas individual (24x24) Corner radius: 5px
-
Rhombus (32x32) individual (18x18)
-
Line stroke: 1px
Color
Tile: #F4F4F4
Tile text: #393939
Tile border: #393939
Disabled tile: #E0E0E0
Disabled tile text: #A8A8A8
Disabled tile border: #C6C6C6
Connection lines: #262626 (solid)
Interaction states - Midnight
MI(Migration Integration)
Current product screen
MI(Migration Integration)
Proposed product screen
Hex code for tiles and connections - Snowflake
Size
Node (40x40)
Rotation (84x84) Canvas individual (20x20) Corner radius: 5px
Line stroke: 1px
Color
Node: #3ACBC1
Node text: #F4F4F4
Rotation: #F4F4F4
Rotation border: #ABDBDB
Rotation icon: #393939
Connection lines: #F4F4F4 (solid)
Interaction states - Snowflake
Hex code for tiles and connections - Midnight
Size
Node (40x40)
Rotation (84x84) Canvas individual (20x20) Corner radius: 5px
Line stroke: 1px
Color
Node: #3ACBC1
Node text: #F4F4F4
Rotation: #F4F4F4
Rotation border: #ABDBDB
Rotation icon: #393939
Connection lines: #F4F4F4 (solid)
Interaction states - Midnight
BI(Business Intelligence)
Current product screen
BI(Business Intelligence)
Proposed product screen
Screen UI following
16 column grid and 8px grid
Internship Learnings
-
Various principles, best practices, the importance of the design language system, and how it is being implemented by current industry leaders in the design domain.
-
How to conduct the design audit and generate the audit report to escalate the issues in the current design.
-
Improved understanding of Grid system for web UI & responsive UI for different screen breakpoints.
-
The role of colors & typography is the design language system considering the legibility, contrast ratios, hierarchy, accessibility, data visualization, WCAG guidelines, etc.
-
Best practices & usage of different components with respect to color, spacing, padding & usability. The behavior of different interaction states of components such as hover, focused, selected, etc.
-
Implementation of DLS specs to test the design decisions & analyze if it is working or breaking and then how to modify the specs to make it more suitable for the product.
-
Understanding how organizations work with a large team in a design project & how a structured/planned approach is very helpful for a design project. How to work with a large team including Product owners, Senior managers, UI Developers, UX designers, Software engineers, etc.
-
Decision-making is based on practical exercises and continuous iterations from the feedback we receive for the proposals.
-
Brainstorming & open discussion sessions helped a lot in creative thinking.
The industry training program provided me with an opportunity to have a detailed and practical study of the various process followed in the industry. Basic information about the industry was important and research on current trends led to enriching our knowledge. The process of UX research, wireframes, developing UI designs, Mockups & coordination with the development team was made aware during this internship.
All the design processes and best practices learned during my internship at eQ will be really helpful for me in my future work. Working under the senior design manager, covering the entire design system at eQ gave me an experience never to forget and provided me with lots of useful information that will be useful in my career ahead.
