© 2023 Yugesh Ralli
yugeshr16@gmail.com
Let’s connect!
Send me a message or connect on LinkedIn, and let’s discuss how I can help you.
Crafting a next gen visual experience to a legacy platform application
Zenex systems is a B2B platform that offers cloud, mobile, ERP, HR, Global payroll management softwares.
Roles
Visual Experience | User Interface | Design System
Duration
26 Weeks
Overview
The platform being a legacy application serving them for more than thirteen years and the application is built with the help of automation code. The application involves high data entry and form field structure with few call to actions to guide the user.
Problem Statement
The application is purely built on automation code depending on the mental model of the user with high learning curve. There was no clear information hierarchy or visual structure being used the application. The users wanted a more modern way of information representation with a clean interface.
Who are the users?
Based on the intial user interviews from the product owners we could gather expectations about the applciation. The users are acustomed to applications like MS Excel, MS Teams and MS Outlook which also have a heavy data entry dependency on the user. They were looking for a more refreshing and modern way of information representation with a clean interface.
Introducing Design System
A Design System is a set of interconnected patterns and shared practices coherently organized. Design Systems aid in digital product design and development of products such as apps or websites.
The system can be broken down into different types based on the need of the product
Atomic
Molecular
Organism
Template
Building the Design System
We choose atomic & molecular design systems as they act as an independent lego blocks which can be used and also provides us full control over the visual treatment of the platform we are building.
Atomic
Molecular
The first step of building a design system involves in creating a checklist of all the components that might be used in the platform.
An Atomic-level component is the smallest component in the design system followed my Molecular-level component which can be used to create dynamic and scaleable screen designs.
Design system components
General
Button
Typography
Iconography
Colour pallette
Composition
Grid
Layout
Space
Divider
Navigation
Bread crumbs
Dropdowns
Menu drawer
Page header
Grid header
Pagination
Steps
Pills/ Tabs
Data entry
Textbox
Textarea
Auto complete
Cascade
Check box
Date picker
Timepicker
Date-Time picker
Radio button
Slider
Switch
Combo - Multi select
Attachment
Link
Numeric
Password
Rating
List edit
Feedback
Drawer - Menu | Right-side
System update message
Alert system
Modal / Bubble Modal
Notification
Result - Confirmation screen
Data View
Avatar
Badges
Card
Accordian/ Collapse
Display text/ Non editable text
Pop over
Tool tip
Table(Grid)
Tags
Tree
Tree(Grid)
Pivot
Timeline
Loading
Circle loading
Component Skeleton
Atomic Components
Layout
A layout consits of three main components that allow users to recognise any design. Setting up layout in the first step helps us in creating wireframes for respective products.
This process helped the client tp visualize their product and the outcome of how the design system would impact the visual layout.
Improved balance
Clear visibility
Clean visuals
Cont.
Spacing
We followed free-flowing 8 point grid system which provides us the freedom to align elements adjacent to each other in terms of eight pixels even on an atomic level. The spacing system gives the application a more balanced structure.
Grid
We used Twelve column grid structure similar to Bootstrap with 16 pixels gutter in ordinance with the eight point grid system we defined earlier for natural spacing between each components.
Apart from above mentioned atomic components we have Typography, Iconography and Color palette which are used to form molecular components.
Typography
We wanted to go for an open-source typeface that provides premium look and feel to the application, here information is weighed more than the aesthetic preference.
Heebo was considered as the choice of font as it not only similar to Helvetica but also has some essence of Roboto to it.
By using Modular Scale, we were able to structure the respective heading tags and other font sizes that are required based on the needs of the application.
Heebo
Headline 1
Headline 2
Flexible Template for your business
Flexible Template for your business
Heebo Bold, 31px / 49
Heebo Bold, 25px / 36
Subtitle 1
Flexible Template for your business
Heebo Bold, 20px / 29
Subtitle 2
Flexible Template for your business
Heebo Bold, 16px / 23
Paragraph
Flexible Template for your business
Heebo Regular, 16px / 20
Caption
Flexible Template for your business
Heebo Regular, 13px / 19
Overline
Flexible Template for your business
Heebo Regular, 10px / 16
Cont.
Color Palette
The brand wanted to create a fresh look to the application although they have primary brand colors which were outdated and old compared to the new visual style we were building.
A total of Forty-eight different colors were introduced for various purposes and each color defined for specific purpose.
Primary colour
Usage : Call to actions / Iconography
Secondary/ Text colour
Usage : Typography/ design elements/Iconography
Accent colours
Usage : Typography/ System alert
#E01E37
Colour name
Specifics : Delete, Error
#AACC00
Colour name
Specifics : Success
#F2730A
Colour name
Specifics : Warning
#0073E6
Bright Navy Blue
Specifics : CTA, Icons, Sidebar
#FFA800
Chrome Yellow
Specifics : CTA, Icons
#FF5C00
Pantone Orange
Specifics : CTA, Icons
#00DA64
Malachite Green
Specifics : CTA, Icons
#33415C
Grey - 1
Specifics : Heading
#5C677D
Grey - 2
Specifics : Heading
#7D8597
Grey - 3
Specifics : Paragraph
#979DAC
Grey - 4
Specifics : Paragraph
#C9CDD6
Grey - 5
Specifics : Divider
#F0F0F0
Cultured White
Specifics : Background, Cards
Molecular Components
Molecular components are created with several combinations of atomic components that we defined earlier. These components can also be considered atomic level based on how small it is compared to a large molecular component.
Buttons
A button is an action element that allows a user to decide at a crucial point of the navigation or a flow. The color contrast of the button follows WCAG guidelines for accessibility to support users with different accessibility issues.
Textbox
Textboxes are the most essential components when it comes to data entry and forms, the component is composed of Textarea, Title label, Underline caption, Iconography
Large Input label
Input caption message
Input Label
8px
8px
8px
The spacing between the elements is measured at 8px in order to create a uniform structure with respect to free flowing eight point grid system.
Large Input label
Input caption message
Input Label
Default
Large Input label
Input caption message
Input Label
Active
Large Input label
Input caption message
Input Label
Error
Different states of the textbox were defined with clear indication of color and background fills.
Wireframes
With the visual layout and components defined we were able to create low fidelity wireframes for the application with minor tweaks to the flow and navigation to adapt to the newer visual design.
Visual Design
The idea of the design system is to structure the forms in a clean structure that follows a modern way of reducing the content provided to the user, in terms of visual language and provide better legibility to the user.
Visual design is so much more than making an application look pretty. In a technology driven world, first impression is everything -and a bad first impression is a lasting impression.
With the design system defined and built, we were able to translate user experiences to beautifully aligned, clean and aesthetic visual designs.
My experience
I got a clear idea how a design system is very important and an intergral part of any product and how it could impact the scalability and visual design of the platform in the future.
Reuseablity
Scalability
Consistency
Accessibility