Analog Folk

Otomo web design & design system

Goal

Otomo's project was divided into two stages. The first stage focused on studying existing elements and product identity to define branding that gives the brand presence and elegance. This involved competitive analysis and researching the product name and its meaning, resulting in a simple, visible, and scalable logo. The color palette was determined based on initial explorations by the executive team, with slight adjustments for uniformity.

Challenge

In the second stage, we defined the foundations of the branding, including spacing, color palette, and typography. A design sample was created to refine usage and make adjustments. We then worked on information architecture and coordinated with the Writing team on content for each page, which was reviewed with the client. Low-fidelity prototypes were created to identify main components and start the design system.

Results

Once sections and components were defined, designs were created for compatibility between desktop and mobile versions. Testing determined final changes to components and validated their scalability. A functional and easy-to-use system was developed, requiring minimal future changes. The final file, including business and marketing rules, was delivered with documentation within 3 months, leading to the design of the official website.

How we did it

Conducted a study of existing elements and product identity.
Performed competitive analysis and researched the product name and its meaning.
Generated a simple, visible, and scalable logo
Determined the color palette based on initial explorations by the executive team, with slight adjustments for uniformity.
Defined foundational elements: spacing, color palette, typography, etc.
Created design samples to define usage and make adjustments.
Developed information architecture and coordinated with the Writing team to finalize content for each page, reviewing it with the client.
Created low-fidelity prototypes to identify main components and began developing the design system.
Developed designs ensuring compatibility between desktop and mobile versions.
Conducted testing to determine final changes and validate component scalability.
Created a functional, easy-to-use system with minimal future changes needed.
Delivered the final file, including business and marketing rules, along with documentation.