I led a team of designers in creating a scalable design system. This system allowed us to push strategies live to the users quickly and accurately. In addition, our design system has also been used in our product innovation incubator. Allowing us to create rapid prototypes for the market in a fast and efficient way.
Top 5 Benefits of a Design System:
Consistency: A design system helps maintain a consistent look and feel across different parts of a product, which enhances the overall user experience and makes the product feel more polished.
Efficiency: Design systems streamline the design and development process by providing reusable components, styles, and guidelines. This reduces redundancy, saves time, and lowers development costs.
Scalability: As a product grows and evolves, a design system allows for easy scalability. New features, modules, or pages can be designed and developed using existing components and guidelines.
Faster Development: By providing pre-built UI components and design patterns, a design system accelerates the development process, making it faster to bring new features or updates to the product.
Better User Experience: A consistent and well-thought-out design system leads to a better user experience, as users can easily understand and navigate the product. This can result in higher user satisfaction and retention.
Wireframes and skeleton components that we repurpose throughout the app
Our team conducted user research to understand the target users, their needs, pain points, and goals when using the app. Methods could include surveys, interviews, usability testing etc. From that information we then analyzed the research findings to identify key user flows, major features, and functionality required in the app. We then created an IA to structure the content and features based in a way that was scalable.
Color, typography and interactive elements
Next, my team defined the visual language and style guide including color palette, typography, iconography, imagery, illustrations, and UI elements like buttons, inputs, lists etc. In addition, we also set this language as variables and tokens, allowing us to change the themes quickly and in a scalable way.
Within Figma, creating tokens and variables for themes
Once the visual language was defined we transferred that onto our core UI components such as cards, navigations, notifications, and CTAs across the user flows.
By now having all our screens in one system we were able to conduct usability testing and identify issues throughout the UX.
Examples of the final screens
The Design System consisted of:
On-Screen annotations (how we document and layout each component within the library)
Julie truly epitomizes what it means to be a team player. While self-starting and capable of working independently, she is always looking to incorporate feedback from others to ensure the best product goes forward. She is a true professional, and the quality of her work speaks volumes of her character. Julie is a pleasure to work with and will instantly add value to any team she is on.
Anthony Calamito: Chief Geospatial Officer, Boundless
I worked with Julie at Excelacom and really enjoyed her creativity, combined with her ability to get things done, on time and with great quality.She is a great graphic designer, continuously bringing to the table new ideas and helps transform storytelling of technology and data into visual and graphical interfaces.I highly recommend working with Julie!
Yossi AbrahamCMO, Excelacom
Julie is an absolute pleasure to work with. She is extremely talented and her work ethic is second to none. Her ability to gather customer requirements and ideas and distill them into a presentable, compelling media is truly impressive. It would be a privilege to work with Julie again in the future and I hope I have the opportunity to do so.
Elliott FergusonVP, Professional Services, Boundless
.svg)
