OpenAsk may not be the first Q&A platform, but its founders are confident that with their close relationships with many influencers in Web3, they can make a significant impact. To align with the preferences of the average Web3 user, who tends to be more adoptive to new trends and styles, we have opted for a bold and playful brand identity. This distinctive and lively visual identity not only enhances the product's design, but also contributes to a more enjoyable user experience.

The team's objective is to release the MVP within 2 months and onboard as many customers as possible. With limited eng power, it wasn't feasible to create both a web and iOS app. Consequently, designing a responsive product was critical to ensure a seamless cross-platform user experience.

For maximum efficiency, all components were designed with responsiveness in mind. By utilizing Flexbox CSS, most components don't even require additional configuration across breakpoints.

✦ Adopting the playful look & feel

In terms of visual design, we introduced more playful styles and elements to create a more engaging and seamless user experience, as well as infuse more personality into the product.

I strongly believe that a design toolkit is essential for achieving consistency in user experience and creating a shared vocabulary between designers and engineers. Given OpenAsk's limited engineering resources, it is critical to make the best use of their time by providing a systematic and reusable design toolkit so that we can save them from repetitive, manual work.

To begin building the toolkit, I focused on designing the tokens, including the font and colors. Instead of using a traditional, sequential naming system, I used a "use-case-based" naming convention. Each color and font type is named after its specific use case, making it easy to follow and reuse throughout the design system.

‍

✦ Tokens → Components → Views

The established design tokens were assembled into each individual component, and the components are composed into views that users browse and interact with.

‍

✦ Ensuring consistency in components for a cohesive experience

As the product evolved, we had to incorporate new views. During the process, we carefully assess whether exiting components can be reused or introduce new ones were necessary. We also reviewed and modified components of the same type to ensure uniformity and consistency in their structure and layout, which is critical to a cohesive user experience.