.png)
- Integrate with HASURA's innovative Data Delivery Network architecture seamlessly, enhancing the overall performance and scalability
- Improve the user journey within the HASURA ecosystem, ensuring a more intuitive and frictionless interaction for users across the platform.
GET API consumers/maintainers WHO are overwhelmed by the volume of complex HASURA backend architecture TO easily view and manage their metadata BY providing a web console application that allows metadata visualization, version control, and team collaboration
We implemented a nested folder structure (right figure) within VSCode to represent HASURA metadata. However, converting this structure directly to the console is not feasible, not only because it involves additional configuration files but also because the nested folder structure itself does not adequately convey the full hierarchy of the metadata.
The feasibility of the design is crucial. The metadata structure for each user can vary significantly, often being complex and extensive. Therefore, the scalability of the visualization and its impact on website loading times were key considerations in our design challenge.
We've been collecting many graph visualizations to analyze the pros & cons in different scenarios.
- Complex schema, like the Graphql Voyager: to avoid crazy line network
- Detailed information under each subgraph: how to present the internal / external relationship about the selected table/view
We've been experimenting many different visualization tools / presentations. For each one, we customized the details to match our needs and iterated based on the internal /external feedback.
We decided to present the entire metadata in two forms of visualization： Graph & ERD (Entity Relationship Diagram)
I implemented multiple live demos with different data visualization tools to provide more design specs
I collaborated with multi-functional teams to ensure the feasibility of the design solutions and iterated
- Provide a Sample Database option to alleviate users' prerequisites
- Automatically showcase the entire onboarding process to help users grasp new concepts.
- Prioritize presenting the existing connection flow
- Provide decent descriptions and documentation links
- Modularize layout design
- Plan/test the interface based on the product roadmap to enhance the design scalability
Integrate different data connection flows into onboarding
Designing the design system was a continuous effort throughout the console redesign timeline, involving countless iterations and enhancements. This process ensured alignment with the brand's tone and close collaboration with the development team to maintain consistency with the front-end UI kit. Simultaneously, I refined design patterns by categorizing the use cases of six major components and summarizing UI components to aid the internal team in quickly selecting the appropriate components for specific scenarios. We also conduct regular design critiques of the design system/patterns, enabling reasoned adjustments to ensure the system's consistency and maintainability.
Since the rollout of the alpha version in November 2023, Hasura Console has garnered significant love and attention from the developer community. Within just one week of its launch, we witnessed 1000+ new signups.
Leveraging my technical acumen, I was able to bridge the gap between complex backend functionalities and user-friendly interfaces, ensuring the console's seamless integration within the HASURA ecosystem. This process of rapid prototyping, testing, and refining, underpinned by a deep understanding of both the technology stack and user experience principles, significantly contributed to the project's success.
