Style Guide & Pattern Library
Overview
in-House is a product of Minklist Digital inc that allows users to post anonymously and gives a syntactic ESG rating of an organization. The organization needed to implement some branding rules in order to maintain design consistency.
I was responsible for evaluating the problem areas aside from the given requirements from the Product Owner and creating a plan to execute the project.
Role and Responsibility
Product Design Manager
Tools
JIRA software
Confluence
Figma
Pain Ponits
Anomaly Designs
New design elements were discovered, along with numerous design flaws.
Directing Design Team
Designers had to no clear directions to follow while working on the new elements.
Branding Rules
The rules always been changing with the change in the management.
Ideation
Working with a start-up can be difficult at times, but once you figure out how to deal with fast-paced teams or unexpected urgent requirements, it becomes a lot easier. It becomes a usual day for you.
When I was working on this project, it took me several days to figure out where all the previous guides were located and then bring them to one place for review and refinement. Some of the branding rules were on Figma in some different files with visual and text formats and some were on Google docs in text format. This led to a number of anomalies in designs for in-house.
The team or previous managers had no fault in it either. The issue was there was a lack of communication, global teams, and no set of documentation to track the issues.
I was initially working with only the Product Owner to make it easier to review and refine the rules. I created a scope to identify how to document the rules which will be easier for the designers and organization. Secondly, to identify how to resolve the communication issue with the team. Lastly, form a schedule around each designer's availability to resolve any urgent issues.
Aside from the scope for Product Management. I was able to create OKRs for this project which will require the team and I to conduct some research and brainstorming sessions to identify what will best work for the product and document on confluence.
Research
I conducted research on Style Guides and Patten libraries of other companies and trends related to recent UI/UX trends. References like - Glassdoor Brand Guideline, Facebook Brand Asset, Fuselab Creative, and medium.muz.li
Using Keyline in Desing System helped maintain icons and logo consistency but it had come with default Figma constraints which would create a problem during the responsiveness. Making changes to the constraints will be one of the next steps but not a priority until the branding guidelines are finalized.
Text spacing for UI of in-house was the main issue here. None of the vertical and horizontal spacing were the same. At least with Mobile UI principles we used for the Desing System could be applied for Beta mobile versions. I worked with my Certive Director Henry to identify what will work best for mobile and responsive. I went over all the resources I had at hand and how we can achieve the best visual experience for the users with those alingments with his feedbacks I was able to brinstorn more ideas with him and the team.
Elements hierarchy also needed to be addressed. Eventhough in-house had its typography in their design system which were missing hierarchy specifications. That is when I started inspecting all the existing texts in the UI that are consistent or not. Then in terms of visual balance I was able to create text components with details to resolve this issue.
Padding and Margins were another issue which was inconsistent in majority of the components. I found applying a correct padding on the main component will help resolve future anomalies and make it easier for the designers to deliver more quality results. Another thing with any recent UIs are using the white space in smarter way.
There should not be too much white space or too little that will make the users board or overwhelmed with the amount of components on screen.
Grid system implementation was missing from the practice. Since, it is important to implement the use to grids in the designs which helps during the responsive stage later. I needed to identify the columns and gutter values for the pages for different screens. Refereing to vaiours resources online and brainstorming with the creative director. I was able to identify few values which will consider white space balance and readability of the text and elements.
Review
While researching and reviewing the resources with the Creative Director and Product Owner. I was going back and forth between the three R's which are shown below.
Final approval
I was able to get the final approval from all the members involved which will help the team, brand, and users.
.png)
Implementation
Once everything was finalized then it was time for the implementation of the new style guide and patterns. This will include applying the necessary changes to the current UI in order to mitigate anomalies and update developers to include new guidelines on the development side.
In retrospect, this project was educational since it taught me how to recognize dependent problems that are connected to your projects and how to schedule future work on them. In addition to the specified requirements, I will also examine a comprehensive design system in greater detail. This will not only liberate my time but also speed up problem-solving within the company.
