Google
Cloud Demo
Scroll to learn more
Client
Google
Market
United States
Main objective
Google Cloud / SaaS
As the UX/UI Designer and Director of Design for the Looker Embedded Starter Kit, I led the effort to create a seamless and user-friendly framework for building data-driven web applications. My role focused on showcasing the harmony between Google AI tools like Looker, Gemini, and Apigee, ensuring intuitive navigation and advanced features like AI-assisted data exploration.
Serving a Purpose
The purpose of this Google Cloud demo is to showcase the capabilities of the Looker Embedded Starter Kit, a framework designed to accelerate the development of web and data applications. This demo aims to illustrate how businesses can leverage Looker, Gemini, Apigee, and BigQuery to create high-performance, customizable applications with advanced data visualization and AI-assisted data exploration. The goal is to provide a seamless transition from traditional Business Intelligence tools to more flexible and powerful web applications that can be tailored to specific business needs.
Problem Statement
The primary problem addressed by this demo is the complexity and time-consuming nature of developing custom web applications that integrate advanced data analytics and visualization capabilities. Many businesses struggle to move beyond traditional BI tools and offer more flexible, user-friendly applications to their customers and internal teams. The Looker Embedded Starter Kit aims to simplify this process by providing a pre-integrated framework that reduces development time and technical barriers.
Integrating Gemini
As a team, we were challenged to find ways to integrate Gemini into this dashboard to facilitate more insightful data exploration and visualization. By integrating Gemini's AI capabilities, the dashboard can offer more intuitive and intelligent data analysis features. For instance, the Looker Explore Assistant powered by Gemini can help users navigate complex datasets, generate insights, and create visualizations with minimal effort. This integration not only improves the user experience but also empowers users to make data-driven decisions more efficiently.
Design Process
The design process for Wealth Wizard (formerly Looker Embedded Starter Kit) began by identifying key pain points, such as the complexity of integrating technologies, the need for customizable UI/UX, and challenges in delivering advanced data visualization and AI capabilities. User personas were created for stakeholders like data analysts, developers, and business leaders, each with unique goals. A user journey map outlined steps from discovery to deployment, highlighting critical touchpoints like setup, customization, and system integration. This approach ensured a smooth, efficient development process, addressing user needs at every stage. The Wealth Wizard logo reflects this vision, combining sleek, modern design with elements symbolizing data flow, intelligence, and user empowerment.
Architecture to Design
The information architecture of Wealth Wizard is designed to offer a clear, intuitive structure, organized into key sections like security, data visualization, AI-assisted exploration, and performance tuning. A well-defined navigation system ensures users can easily access and utilize these features. The architecture supports customization, with fully customizable CSS for personalized UI/UX designs and responsive design for cross-device compatibility. This balance of structure and flexibility allows users to build applications tailored to their unique needs without sacrificing functionality. Wireframes were crafted to match user stories, such as a data analyst exploring AI-driven insights or a developer integrating APIs, ensuring the design aligns with real-world workflows and enhances usability.
Wireframes, Prototypes, Design
During the prototyping phase, wireframes were developed to outline the layout and functionality of the Starter Kit, visually representing the integration of key components like data visualizations, AI-assisted tools powered by Gemini, and robust security features. The goal was to create a user-friendly interface that simplifies complex data interactions while maintaining a professional aesthetic. Stakeholder feedback played a critical role in refining the design, leading to adjustments such as optimizing the placement of the Looker Explore Assistant for better accessibility and enhancing the market analysis dashboard with intuitive navigation and filtering options. The final result is a fully customizable layout, offering both light and dark modes to cater to user preferences and environments, with color-blind testing ensuring inclusivity and accessibility for all users. This iterative process resulted in a functional, visually appealing prototype that aligns with user needs and business goals.
The Final Step
Usability testing was conducted to evaluate the effectiveness of the Starter Kit in real-world scenarios, with participants including developers and data analysts completing tasks such as setting up applications, customizing the UI, and exploring data with AI assistance. Feedback from these sessions highlighted areas for improvement, such as the need for clearer documentation and more intuitive navigation. Based on these insights, adjustments were made, including adding detailed tooltips and reorganizing the navigation menu to enhance usability. These refinements ensured the framework is both easy to use and highly effective, delivering a seamless user experience that meets the needs of diverse stakeholders.
