Hit ME UP - nishakrish1501@gmail.coM
Built and maintained the design system for Eostar and its line of products consisting color palette, typography, iconography, badges, components, accessibility criteria, banners, empty states and graphical interface assets.
Style Guide | Annotation and Documentation
Since the inception of eoStar, the company lacked any formalized design system. Products(ERP, mobile and eCommerce platform) existed as separate identities with their own source of standards for UI elements, components thereby lacking consistency and a cohesive brand experience.
Each brand has a component library, a collection of reusable interface elements themed by their foundations file. Throughout the design system we reference different component types such as global, structural, content, data, and utility. It was critical to define the differences between component classes so that design decisions are efficient and accurate based on the context of the page.
I place high importance on colors used and selected with intention. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.
In Eostar every color has an assigned role, which hold a specific meaning based on how they function within the interface. By defining the color roles it makes things easy to modify and customize later. They also extend the color system so it works across multiple touchpoints.
Icons act as visual aids to help users complete tasks. In the Eostar design system I went with the material icon library because it’s simple, informative, and complements the overall visual language of the design system. I went with a simple icon set because detailed icons increase cognitive load. I focused on simplicity to help users understand the concept the icon represents and recognize icons on smaller screens.
I chose Roboto as the main font because the geometric shape of the letters and the spacing between characters are clean. It’s also super versatile having several variations in weight which make it look great as a heading font and as body text. Since the various products are very huge and have multiple levels of hierarchy, I have different sets of font styles that define certain roles and functions across the products. I always try to pair these styles with examples from the usage of the app on our design system as it helps to give context and reference to the decisions.
State management and status are very important features of our products. There are many different statuses for various aspects across the apps. I laid down some basic color and word associations with these badges and finally defined the sizes in which they can be used. These sizes were established after a lot of back and forth iterations and ensuring they all fit and look appropriate on the screens in various user flows.
Due to the number of mandatory processes across the products and to also give importance to some information based on the use case and user journey, I established the construct of a banner on our apps, which helps to give immediate notice to important information.
The top app bar became an important part of our system, as it gave the first context to the content on the screen. It also offered quick navigation paths and buttons for various actions. There were many different functions and requirements for various features and modules and hence I came up with a few styles of the top app bar that can be adopted across all use cases.
With the mammoth of products that Eostar has, it was very tricky to come up with standard card design styles which were flexible enough to be used for all functional purposes hence many different card styles were established for the diverse functional requirements. I made them flexible with the auto layout so that these card styles can be used in varying instances, like with or without an icon, with or without secondary text, with or without horizontal rule, and so on.
Each component received stepped interaction examples so that expected interactive states are clearly communicated. These are paired with detailed specifications around tab stops, keyboard control requirements, spacing, atom and molecular elements.
Eostar apps are hand-on apps which requires the users to be active on the app with order entry, making changes to order status, making payments making and editing lists and locations, making changes to route across dates, and lots more. For all input-related tasks, I used bottom sheets. I came up with radical yet flexible designs which helped to make tasks easy by making important actions more accessible within finger reach within the bottom sheet itself.
This was a very important part of the app as there are a lot of instances when the user starts performing tasks from scratch, which means an empty state is the first thing they see. So it was important to make it simple, useful, and actionable even though it’s an empty state. So I made sure that the content is precise and useful and also paired with action buttons for the tasks.
Design Systems are like living organisms in that are they complex and ever evolving. What I showed here is just scratching the surface of what a system could look which is being used by more than 5 apps, an ERP system and an eCommerce and satisfying its very diverse needs.
Hit ME UP - nishakrish1501@gmail.coM