OrCam Design system As a product designer at Orcam, I have spearheaded the development of the Orcam Design System, a comprehensive tool that brings structure and organization to our design processes. The Orcam Design System is essential for achieving scalability, efficiency, and consistency in our design efforts, serving as the guiding
force behind our product development.

Role Product Design

Timeline January- current 2023

Grid

In my project, I opted for a Stretch grid system, which includes a 12-column grid and an 1920 px baseline grid. Additionally, I implemented a spacing system based on the "rem" unit that aligns with the 1920 px grid. By establishing a solid spacing and grid system as the foundation of the design system, we can achieve consistency and efficiency in our design process. These elements act as guides, ensuring that our designs maintain proper alignment and proportion, ultimately enhancing the overall visual cohesiveness.

Typography

For the OrCam website and app, I have carefully selected a clean and versatile font to enhance the overall design. After thorough consideration,
I opted for Roboto a font that strikes the right balance with its geometric letter forms and well-spaced characters. Roboto brings a modern and polished aesthetic to our interface.

The chosen font combination, including Roboto as the primary font and native fonts for mobile platforms, contributes to a harmonious and consistent visual language across OrCam's digital presence. It enhances readability, reinforces the brand's identity, and ensures that users have a delightful experience while engaging with our website and app.

Color palette

While I appreciate the importance of aesthetically pleasing colors, my primary focus lies in clear communication. Colors play a vital role in supporting the purpose of the content, conveying information regarding the hierarchy of information, interactive states, and distinguishing between different elements. In my perspective, colors should possess meaning and be intentionally selected, rather than based solely on personal preferences or visual appeal.

Buttons

By incorporating these button types and states into the Orcam design system, we ensure a consistent and intuitive experience for users. The various button states cater to different user interactions and provide valuable visual feedback, effectively guiding users through their actions. This comprehensive approach to button design enhances usability and fosters engagement within the Orcam interface.

Form Fields

Another significant category of components I developed for the Orcam design system revolves around form fields. Similar to buttons, form fields require support for various states. When designing form fields, one of my primary focuses is accessibility. I ensure that the field title remains visible when selected and that error indicators extend beyond color alone, considering factors such as visual cues and alternative methods of conveying errors.

Pricing Components

Accessibility is a key consideration throughout the design process. I pay careful attention to ensure that the payment components are accessible to all users, regardless of their abilities or assistive technologies. This includes considerations such as clear and descriptive labels, appropriate error handling, and intuitive feedback to guide users through the payment process.

The payment components within the Orcam design system include fields for entering payment details, secure transaction indicators, verification mechanisms, and confirmation elements. By carefully crafting these components, Orcam ensures a seamless and reliable payment experience for its customers, fostering trust and satisfaction.

Check out & Payment Components

A crucial set of components I developed for the Orcam checkout process on their website revolves around payment-related elements. These components are designed to facilitate a seamless and secure payment experience for users. Similar to other components in the Orcam design system, these payment components accommodate various states to ensure a consistent and intuitive user journey.

Thanks