Design System
Overview
Role and Responsibility
Product Designer
Tools
JIRA software
Confluence
Figma
Pain Ponits
Design Inconsistency
The in-house design system consists of major inconsistencies in terms of sizing, colors, typography, and alignment.
Scaling challenges
The scaling of components was a problem because all the elements were static designs and were not adaptable to responsiveness.
Atomic System
Because of the static nature of the designs, the design system did not contain Atomic Designs connections.
Ideation
.png)
After identifying the pain points of this project, I collaborated with the subject matter experts (SMEs), who had more in-depth information on the problems. This allowed me to gather all the requirements and analyze them. It was found that the component library consisted of a lot of inconsistency because of the lack of communication between the engineers and designers, which needed to be addressed as soon as possible in order to plan efficient sprints and handoffs.
In the past, the designers who worked on it were juniors and did not consider the responsiveness of the product, which ended up creating scaling issues that will either require refinement or designing it from scratch. Because static designs, by definition, do not create any atomic connections between elements,
An atomic design system is a great practice to implement in a design system to apply new refinements easily throughout the entire user interface. This is useful not only for designers but also for developers when making changes to the UI.
The scope of the project was to identify typography, inspect icons, inspect states, and apply atomic system principles. The next important part was to identify Design Identities like typography, iconography, and color pallet. Helvetica and Roboto were utilized in their prior internal design. I was able to switch it to Helvetica Neue throughout with the PO's approval and get rid of Roboto, which was no longer used in the designs. In-house designs include glyphs (solid fill) and outlined icons. I utilized anatomy to align icons for consistent sizing. In terms of UX, some of the lighter gray shades looked identical, which could be confusing. To avoid this, I devised a number of alternatives that would alleviate the problem of interactive status.
Research
I conducted research on design system trends and utilized information from sites like medium.com, Uxplanet, and designsystems.com. Since it was my first time working on a project related to the refinement of a design system, I wanted to educate myself in the area in order to solve the issues.
I found out I can resolve the issue of inconsistency in the library by using standard universal sizing. This allowed me to introduce the team to the keyline/anatomy grid to size all the icons. This will help the designers duplicate the keyline and mask it on the icons to refine it.
I also conducted a competitive analysis to identify the missing elements that I would need to include and strategies for using those features in the product.
Since the design system was introduced, Figma has had interactive components. I made sure to implement that during the sprints. In-house components had interactive states; the only issue was that they were static and none of them interacted. This also caused issues with the design handoffs because the development team did not understand the flow. I constructed an information architecture to provide the information that the current designs were not able to provide until we could successfully implement interactive components.
Lastly, I had to figure out how to train the junior designers about constraints, properties, variants, instances, and more that they have not worked with. I created training guides on confluence, which was supposed to be one source of truth but did not work at first because confluence was not being used often by the team. So I started writing it down specifically on their tickets, which helped them understand the task at hand.
Best practices for UI and UX must also be incorporated into the designs. Therefore, as it is a mobile-first design, I introduce Mobile UI Principles, which include finger-operated UI elements. Second, one of the best practices for interactive states was to include different states for all of an element's interactivity. because users will find it attractive visually. Try out the elements to validate their hypotheses before testing icon usability.
Information Architecture
A functional and technical document with a solid structure was required by Minklist Digital. I generated site maps and user flow diagrams while collaborating with the product owner to understand some of the functionalists that were lacking.
Iteration
I quickly transitioned from UI/UX designer to product/project manager after joining the team during the design sprints. That expanded my responsibility along with the designing; I was now in charge of reviewing, overseeing, and allocating the tasks. I developed user stories for the team using all the research materials and the project's scope.
.png)
I started taking over all the complex designs and high-priority requirements in order to deliver them to the development team before the end of the week. This helped me assign a repetitive design task to the juniors to train and finalize the delivery of the designs by the deadlines.
The designs were presented to the product owner to get final approval before handing them off to the development team. I made sure to create several additional options to present, which will help the product team make a decision on the element's design. If there are any new requirements or changes, then use them to refine the designs once again depending on their priority.
Design Refinement
I began by utilizing Keyline to adapt older works for a mobile user interface while lining them up with the layout grid using a 24-by-32-pixel grid. Once the PO approves, I transform the pieces into variations of various states. In contrast, depending on the icon and its prominence, the Active state's icon sizes fluctuated from 32 to 42 pixels.
Prototype
I made each component become an interactive part by using an interactive component technique. This lessened the amount of work designers had to put into making a prototype. It is simpler to concentrate on the overall design during prototyping rather than the individual parts. I was able to increase the internal design system's efficiency in this way.
Test
Throughout the process, the prototype was tested to find the right balance of animation for each interaction. By doing so, I was able to satisfy the requirements for the product while also making it simple for designers and developers to use and comprehend the current design.
Final Design
After the Atomic system was finalized, it was easy to update changes to the UI of in-house. Then, along with the designs and requirements for implementation of the design system on the development side, they were sent to the development team's manager.
Continued project: Style Guide & Pattern Library.
