My Experience
My Responsibilities
Over the course of the internship, the Experience team was given three challenges to complete over the summer. The first challenge was completing a comprehensive audit of Pekin’s design elements. Our next to make a design system based on the elements we audited. Lastly, we were to create a Figma File Template for the Pekin Designers.
The Result
The Audit
The summer began with a UI element audit of all of the front and inward-facing webpages that Pekin Insurance operates. This includes their main website, customer portal, and two agent portals. We used the Atomic Design System to classify the UI elements into three groups.
Atoms: The smallest building blocks of a design system. Atoms are simple, single-purpose elements such as buttons, input fields, or icons.
Molecules: A group of atoms that work together to form a more complex UI element with a specific function, such as a search form or a navigation bar.
Organisms: A combination of molecules that work together to form a distinct section of a UI, such as a header, footer, or card.
The audit focused on various UI elements such as the navigation menu, buttons, forms, typography, color scheme, images, and icons. The purpose is to ensure that the UI elements are consistent, easy to use, visually appealing, and aligned with the brand guidelines.
The N.E.S.T
After completing our audit of Pekin’s web pages the next challenge for us was to create a custom design system incorporating Atomic design for Pekin.
Prior to beginning our work on the design system, my colleague and I conducted thorough research into the key components and best practices of effective design systems. Through a combination of articles, podcasts, and videos we gained valuable insights that informed our approach to building the system.
Our solution was the N.E.S.T or the Native Elements Styling Tool. A comprehensive design system organized through Atomic design. Each page is a different element making it easy for the design system to be expanded on.
Unfortunately do to company policy I am not allowed to share the file.
The Template
The last challenge that our team faced was to create a standardized figma file layout for the designers. Our team faced a challenge in communicating design details to developers during the handoff process.
In order to solve this problem the other intern and I observed the design process and separated it into individual pages, which allowed designers to easily place content ready for developers in the designated section of the file. This solution helped streamline the handoff process and improve communication between designers and developers.
Unfortunately do to company policy I am not allowed to share the file.
