view project
☞
COMING SOON
Industry
Web3, Social Media
Duration
02/2023-04/2023 (2 months)
Role
Product Design, Design System, Brand Identity
Team
1 Designer, 2 Founders, 1 Software Engineer
OpenAsk is a Web3 Q&A community where users can ask and answer questions, eavesdrop conversations, as well as earn income from engagements. I collaborated closely with the founders to brainstorm product strategy, and designed the brand identity and the product accordingly to create a fun, vibrant, and engaging community.
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.
Check the ↳ Hifi Prototype for Desktop
Check the ↳ Hifi Prototype for Mobile Web
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 system 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 system so that we can save them from repetitive, manual work.
To begin building the system, 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.
The established design tokens were assembled into each individual component, and the components are composed into views that users browse and interact with.
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.
Want to see all projects?
Check the ↳project index .