Brewlytics' high-fidelity mockups.

Brewlytics: A Data-Driven Ecommerce Dashboard

Designing an intuitive analytics dashboard to help online coffee sellers track and utilize essential business metrics.

Overview

Brewlytics is a data-driven analytics dashboard designed specifically for coffee businesses, helping them track business necessities such as sales, customer insights, and product performance with ease. The goal was to create a visually intuitive and customizable experience that allows users to make informed business decisions without getting lost in complex data.

My Role:

UX/UI Designer, UX Researcher

Tools Used:

Figma, Webflow

Duration:

4 weeks

Test Prototype

Concept screen for a high-fidelity login screen for Brewlytics.

Problem

Small to mid-sized businesses face challenges in tracking key metrics like online sales, customer behavior, and inventory trends. Existing analytics tools are often:

  • Fragmented – Data spread across multiple platforms
  • Overly Complex – Cluttered interfaces and overwhelming data
  • Non-Intuitive – Insights are difficult to interpret
  • Lack of Actionable Insights – Metrics are presented without clear takeaways

Without a clear, user-friendly solution, business owners may struggle to make informed decisions efficiently.

An Ideal Solution

Brewlytics aims to empower business owners with a streamlined, intuitive analytics platform that transforms complex data into actionable insights. It would enable users to:

Track real-time sales performance and identify top-selling and underperforming products.

Monitor inventory levels to prevent shortages and overstocking.

Understand customer behavior with insights into purchasing trends and preferences.

Make data-driven decisions with clear, digestible visualizations designed for ease of use.

Customize their dashboard to prioritize key metrics that matter most.

Research

User Interviews

To ensure Brewlytics would meet the needs and expectations of its users, user interviews were conducted to understand their challenges.

Interview Process

  • Participant Recruitment – I reached out to potential users through personal connections and LinkedIn, specifically targeting business owners.
  • Interview Structure – Through a mix of discussions and open-ended questions, I explored how participants navigate existing analytics tools, uncovering pain points and behavioral patterns.
  • Pain Point Identification – One of the biggest priorities was uncovering usability challenges, gaps in existing solutions, and opportunities to improve decision-making.
  • Organizing Findings – Insights were organized into recurring themes, which directly informed design decisions for Brewlytics’ layout, customization features, and data presentation.

Insights & Pain Points

Through the user interviews, I identified key insights and pain points that target users face in their daily life.

Complicated Dashboard

Users found existing analytics tools difficult to navigate, making it hard to extract meaningful insights.

Real-Time Tracking

Business owners need an intuitive way to monitor and track key business metrics such as stock levels to prevent shortages or overstocking.

Clear Data Visuals

Users prefer simplified, easy-to-read graphs over cluttered dashboards with excessive data.

Trend & Insight Identifier

Business owners expressed the desire to quickly spot trends or gain insights so they can adjust strategies proactively.

User Persona

Using the defined goals and key insights gathered, a user persona was crafted to represent the target audience, ensuring design decisions align with their needs and challenges.

A headshot for a user persona.

Zack Morris

Goals

  • Understand customer behavior to improve retention and engagement.
  • Monitor inventory levels to prevent overstocking or running out of popular blends.
  • Easily track sales trends to make better pricing and marketing decisions.

Frustrations

  • Struggles to identify the most critical insights at a glance with current analytics tool.
  • Most analytics platforms are too complex and appear cluttered.
  • Lacks an intuitive way to visualize customer retention trends.

Competitive Analysis

To better understand the market landscape, a competitor analysis was conducted to identify strengths, weaknesses, and opportunities.

  • What are competitors doing well?
  • Where do existing solutions fall short?
  • How can Brewlytics stand out?
A competitive analysis for Brewlytics.

Key Takeaways for Brewlytics

  • Customization & Simplicity Balance – Databox and Klipfolio offer deep customization but can be overwhelming. Brewlytics should aim for a balance between the two—customizable but intuitive.
  • Real-Time Data is Crucial – Most competitors provide real-time insights, so Brewlytics should prioritize including real-time metrics.
  • E-Commerce Specific Features – Most competitors have e-commerce integrations. Brewlytics should keep coffee business needs in mind in regard to integrations, like inventory forecasting and retention tracking.
  • User-Friendly Approach – Many tools require a learning curve. Brewlytics should prioritize clear, digestible insights for non-technical users.

Ideate

User Journey

Scenario: Sophia is responsible for tracking marketing campaign performance for her online coffee business. She needs to quickly assess which products are driving the most revenue so she can adjust her ad strategy accordingly.

Goal: Analyze campaign-driven sales data to optimize marketing spend and boost ROI.

A user journey for Brewlytics.

Information Architecture

An information architecture was created to provide a blueprint for the overall design structure. By organizing content logically and prioritizing key insights, Brewlytics aims for users to navigate effortlessly and access the data they need with ease.

Brewlytics' information architecture.

Design

Wireframes

  • Diving into the design phase, I first created a mood board to establish the visual direction and overall aesthetic of Brewlytics.
  • Next, I sketched low-fidelity wireframes to explore key layouts and user flows, ensuring the design prioritized intuitiveness and simplicity.
  • After selecting the most effective sketches, these sketches were then refined into the finalized wireframes as shown in the examples below. This iterative process allowed me to validate design decisions early and make adjustments based on user feedback.
The wireframes for Brewlytics' initial design.

User Feedback

After reviewing the wireframes with target users, I gathered feedback to refine and improve the design even further.

Key User Feedback

  • Clarity & Readability – Some text and labels were too small making them harder to read.
  • Data Context – Users wanted more context for certain metrics (e.g., explanations for things like “Purchase Frequency” or “Retention Rate”).
  • Navigation & Flow –  Some users found the sidebar navigation intuitive, but others suggested clearer visual cues.
  • Data Visualization Enhancements – Some users felt the graphs felt either cluttered or lacking in content or context.

Style Guide

To ensure consistency and a cohesive visual identity, a style guide was created. This guide defined Brewlytics’ typography, colors, buttons, iconography, and spacing. This foundation streamlined the high-fidelity design process, maintaining usability and brand cohesion across the platform.

Brewlytics' style guide featuring primary colors, a color palette, typography, and components.

High-Fidelity Designs

Incorporating the user feedback and the established style guide, the wireframes evolved into polished, user-friendly high-fidelity designs. This process involved:

  • Implementing the chosen color palette, typography, and UI components for consistency.
  • Refining layouts to enhance usability and visual appeal.
  • Experimenting and iterating on the design based on additional feedback to ensure an intuitive user experience.
Brewlytics' high-fidelity designs.

Prototype

With the high-fidelity designs finalized, the next step was to bring them to life by creating an interactive prototype. This allowed for realistic user interactions, enabling usability testing and refining the experience before development. This was achieved in Figma through:

  • Building reusable components to streamline prototyping and maintain consistency.
  • Designing intuitive user flows based on research insights.
  • Refining interactions through multiple iterations to enhance usability.

View Prototype

Prototype Demo

Test

Usability Testing

After creating the high-fidelity prototype, I conducted usability testing with five users to assess clarity, usability, and visual appeal. Participants completed tasks and answered open-ended questions, such as:

  • Does the design feel visually appealing and intuitive? Why or why not?
  • How would you customize your dashboard to prioritize the metrics that matter most to you?
  • You’re curious about which of your products is under-performing. Where would you go to identify your best-selling and worst-selling products?

These tests uncovered valuable insights, leading to design refinements that improved usability and user experience.

Usability Testing Key Insights

  • Visually Pleasing – Users appreciated the clean and visually appealing design but suggested minor tweaks to improve readability, such as increasing text size in certain areas.
  • Data Clarity – Some users had difficulty immediately finding certain metrics, suggesting a need for clearer data visualization or additional tooltips.
  • Customization Expectations –  Some users expected more flexibility in dashboard customization, such as drag-and-drop functionality for prioritizing key metrics or renaming data categories to better align with their business needs.
  • Highlighting Actionable Insights –  Some users wanted clearer emphasis on actionable insights, such as trend indicators or automatic alerts for significant sales drops. Enhancing visual cues (Ex: color-coded trends, tooltips) could improve decision-making efficiency.

Desired Business Impact

Enhanced Usability and Customization

Unlike standard analytics dashboards, Brewlytics is tailored specifically for e-commerce coffee businesses with industry-specific metrics an intuitive interface, and customizable dashboards, for a seamless user experience.

Improved Customer Retention

With customer insights metrics, businesses can track purchase patterns, loyalty trends, and engagement, enabling them to personalize promotions and enhance customer satisfaction.

Data-Driven Decision Making

Brewlytics empowers coffee business owners with real-time analytics, helping them make informed decisions on product sales, inventory, and customer trends without guesswork.

Increased Sales Through Insights

By identifying trends and insights, such as best-selling or under-performing products, businesses can adjust their offerings, optimize pricing, and improve marketing strategies to maximize revenue.

Key Takeaways

Creating and designing Brewlytics was a challenging but immensely rewarding experience that helped me to both learn and solidify key UX/UI principles. It taught me valuable lessons about designing for data-heavy products while keeping the user experience intuitive and engaging.

Biggest Lessons Learned

  • User research is the foundation of great design – Early insights from user interviews and usability testing were invaluable in shaping a user-friendly experience. Understanding real user needs and pain points ensured that design decisions were driven by data, not my assumptions or biases.
  • User feedback makes all the difference – Seeing how users interacted with Brewlytics gave me insights I never would’ve caught on my own. Something simple, like improving contrast and adjusting icon placement, can make a noticeable impact on usability.
  • Customization is essential for diverse user needs – Not every user wants the same data front and center. The feedback I received made it clear how highly users value customization and personalization.
  • Balancing aesthetics with functionality – A visually appealing dashboard is important, but not at the cost of usability. I found that refining spacing, typography, and color contrast made the data feel more digestible without losing the clean, professional look.

Next Steps

Products and designs should be continuously improved and updated to reflect user's needs and wants. To improve Brewlytics even further, here are a few key enhancements and features I would like to implement next:

  • Creating a mobile-friendly version – Arguably the most obvious and impactful next step is adapting Brewlytics for mobile so users can check key metrics on the go without losing clarity or functionality.
  • Adding drag-and-drop customization – Giving users more control over their dashboard by letting them rearrange widgets and prioritize the metrics that matter most to them.
  • Expanding data visualization options – Introducing more graph types and filters to help users tailor how they view their data.
  • Improving onboarding – Adding a guided walkthrough and tooltips to help new users get familiar with the platform quickly and easily.

Thank you for viewing!

I truly appreciate your time and interest in my work and the opportunity to share my design process, challenges, and learnings. I hope this project gave you a more clear image of my approach to UX/UI design, problem-solving, and user-centered thinking.

If you have any questions at all or just want to chat, I’d love to connect. 😃

Let’s Work Together