A B2B analytics platform designed to simplify complex data sets, making them accessible and actionable for non-technical users.
QueryIt is an AI-driven data analytics platform that simplifies complex data sets for non-technical professionals, enabling users to make informed business decisions with clear, actionable insights.
overview
Discovery
Ideation
In our kickoff meeting, we focused on understanding the client’s needs for a website revamp aimed at non-technical users. We reviewed their brand, product prototype, and presentation, noting their priority on simplicity and accessibility. This meeting provided key insights, guiding our design approach to create a more user-friendly and intuitive platform.
Given the client’s partially developed product, we conducted a heuristic evaluation to identify key usability issues, forming the foundation for our redesign. We found unclear navigation, inconsistent visual hierarchy, confusing labels, insufficient instructions for QueryIt, and a UI that fluctuates between minimalism and clutter. This analysis refined our focus, ensuring targeted design improvements.
Heuristic Evaluation
User Stories
After thoroughly reviewing the client's input and synthesizing our research findings, we crafted five user stories to help the team understand and empathize with the users:
1.) As a non-technical user, I want to go through an onboarding process after I sign up, so I can learn to use the product effectively.
2.) As a non-technical user, I want to pick a data file to upload so that I can use it later to generate data insights.
3.) As a non-technical user, I want to type in a command/input a query so that I can customize my data insights results.
4.) As a non-technical user, I want to have a team workspace so that I can share my data insights/collaborate with team members.
5.) As a non-technical user, I want to update my data so that I can keep my insights relevant.
User Flows
I utilized our user stories to design user flow 5. This flow was instrumental in helping me concentrate my design efforts on the critical elements necessary to accurately represent the paths users will take through the product to fulfill their needs. By mapping out this journey, I was able to ensure that each interaction point was thoughtfully considered, ultimately enhancing the overall user experience and making the product more intuitive and user-friendly.
I created low-fidelity wireframes to lay a strong foundation for future development. Since the product was technically complex, I worked through several versions to improve the design and focused on making user flow 5 intuitive and easy to navigate.
To make the design clearer, I used different font sizes and weights to highlight key information, added consistent spacing to group related items, and used color contrasts to emphasize important actions and navigation points. This approach helped users understand what to do next and made the overall experience easier to follow.
Design
UI Iterations
The QueryIt Insights screen is a pivotal interface, housing the most data-rich content in the application. Throughout three design iterations, we meticulously refined its layout and functionality. I was responsible for developing iteration #1, with my primary goal being to streamline the information architecture. I aimed to ensure accessibility and clarity, preventing user overwhelm from visual noise.
Iteration #2 presented an excellent UI design, yet the client favored the overall look and functionality of iteration #1. However, they requested the incorporation of the color palette from iteration #3 to enhance visual appeal. This specific combination aimed to merge the structured information architecture of the first iteration with the aesthetic and vibrancy of the third iteration's color scheme.
Client Questions
Recognizing the intricate technical aspects of the product, we collectively identified the need for further insights from the client. We developed a list of pertinent questions to gather essential information. As the team lead, I took responsibility for delivering these questions and maintaining communication with the client. This engagement resulted in several critical insights that would help guide our development process:
1.) No design system for the brand existed. They wanted us to develop a light, minimal style.
2.) The front-end framework used for the product was NextJS.
3.) The main errors users encountered when trying to query their data had to do with large file sizes, wrong file types, and files with incompatible information.
Research
Our competitive analysis revealed that existing products in the market are visually and functionally complex, presenting challenges for novice users. Additionally, we noted a lack of version control features and limited sharing and collaborative capabilities across the board. This strategic approach provided valuable insights into the market landscape and enhanced our understanding of the competitive environment.
I moved on to developing mid-fidelity wireframes, continuing to focus on refining user flow 5 to improve its functionality and structure. I defined styles for text, cards, tables, fields, forms, and tooltip popups, which helped me better understand how users would interact with the product and ensured it remained intuitive and user-centric. Throughout the process, I thoroughly iterated on each wireframe to incorporate updates and enhancements, ensuring the design met user needs and expectations.
Style Guide
I developed guidelines to maintain QueryIt's clean, cohesive look, enhancing brand recognition and usability. Using Roboto for readability, I established a typographic hierarchy, intuitive icons, a grid system, and simple, functional graphs and tables. These efforts ensured a user-friendly interface that aligned with the client’s vision.
I proceeded to create high-fidelity wireframes, ensuring they aligned with the client’s vision and adhered to user-centered design principles. Specifically, I developed user flow 5, maintaining consistency across numerous screens in this flow and closely aligning them with those in user flow 2 due to significant functional overlap. The primary update focused on enhancing the "My Files" table to display relevant information and include version control options.
The project's final step saw a team member and I meticulously annotating the developer handoff file. These detailed annotations provided essential guidance for the development team, offering precise instructions and clarifying the intended functionality and design rationale. We also included crucial spacing and alignment notes to ensure accuracy. By thoroughly documenting each screen, we facilitated a seamless transition from design to development, laying a strong foundation for future design and development teams. This method promoted efficient collaboration and ensured fidelity to the envisioned user experience.
Reflection
Working on QueryIt was a rewarding journey that pushed our creativity and design skills. While navigating new challenges, we embraced innovation to develop effective, user-centered solutions.
Close collaboration with the company helped us deeply understand their vision and create a platform that blends cutting-edge features with intuitive design, catering to users of all skill levels.
The result is a product that transforms complex analytics into actionable insights, demonstrating the power of teamwork and innovation in delivering impactful user experiences.