Data Visualization Dashboard for Company in the Food & Beverage Industry


In spring 2022, my company, Focus21, teamed up with a food and beverage business to design and develop a custom web app for internal use. This app needed to display both live and historical data, allow for data customization and manipulation, and enable report generation. I worked closely with key stakeholders such as project managers, data architects, and developers by facilitating discovery workshops and leading the product design process.

Note: Unfortunately, I can't show the bulk of the work on this project. Therefore, this case study will be a high-level overview of the methodology that I took during the 6 months of discovery, design, and development.

Primary Role

Lead Product Designer

The Team

Client team

1 PM

1 Frontend Dev

1 Backend Dev

1 Designer


April 2022 - April 2023

By succeeding to prepare, you're preparing to succeed

After our initial discussions with the customer about their issues, project objectives, and vision, I formulated a plan for the Discovery phase. Specifically, at Focus21, we refer to the "Discovery" phase as the stage in the product development cycle where we aim to understand the current situation, identify project requirements, create initial designs, compile a backlog of user stories, and draft a proposal for the design and development phases.

UX Discovery Phase Plan

1. Empathize


Understand the user and business needs


  • Survey: Questionnaire asking the users what their main responsibilities  and current pain points.

  • Personas: Personas inform design by capturing user tasks, pain points, and needs for comprehensive insights, driving optimal solutions for all users.

2. Define


Clearly articulate the problem based on insights gathered from empathizing with users.


  • UX Analysis: Offers a thorough overview, identifying primary and secondary users, goals, product objectives, KPIs, distinguishing features, and usage scenarios.

3. Ideate


Understand the user and business needs


  • User Stories: Detailed narratives that articulate a user's specific needs, tasks, or goals within a product, often framed as "As a [type of user], I want [goal] so that [reason]."

  • MoSCoW Analysis: prioritizes features into "Must-Haves," "Should-Haves," "Could-Haves," and "Won’t Haves (This Time)."

  • Features Mapping: Organizes ideal product features spatially, aiding in scope estimation, identifying existing solutions, and generating new ideas.

Get to know the users

The project began with a survey to understand the roles and tasks of seven user groups, how often they use the data, their current challenges, and what improvements they need. This information was compiled to create personas for the primary and secondary users. I found this very helpful determining the different levels of functionality each user group required, the ways the data should be able to be manipulated, and what reports to generate.

The UX Analysis

The UX Analysis tool is one of my favourites because it helps align project goals, especially when numerous stakeholders are involved on both the client's and our end. It originates from "The User Experience Team of One," a book I highly regard. This document was created as a collaboration amongst the stakeholders and serves as a valuable reference throughout the project, covering the following points:

People involved in the problem

The business/project goals and KPIs to measure success

The assumed user goals

Value proposition for the product

The primary user tasks and scenarios that the product should support

The users determine the product

The features of the product define what it is, but they are determined by the users' needs and, therefore, the users themselves. The visual below represented the vision I wanted my team to embrace. With a clear alignment of what the user groups needed, I facilitated a series of workshops with stakeholders. In these workshops, we created user stories for real scenarios, identified features that could address each situation, and prioritized them as "Must-Haves," "Could-Haves," and "Won't-Haves" (for now).

User Need

User Story


Next Level, Achieved

At the end of the Discovery Phase, we presented the client with the deliverables, including the research findings, UX artifacts, backlog of development tickets, and proposal for the design and development stage. The client decided to continue with the project, and we got to work!

Let The Designs Begin!

My Design Approach

Information Architecture

Utilizing the research collected during the Discovery Phase, I compiled an inventory list of the content and features slated for inclusion in the final product, then organized it into a sitemap.


I begin by translating user stories into wireframes, outlining the basic structure and functionality of the product.

Feedback from users and clients

I collaborate with clients and developers to gather feedback on the wireframes, ensuring alignment with project goals and technical feasibility.

More Wireframes

Based on the feedback received, I refine and adjust the wireframes to address any identified issues or suggestions for improvement.

Medium-Fidelity Prototypes

With the wireframes finalized, I move on to designing medium-fidelity prototypes, adding more detail and interactivity to the design.

Black Hat Activity w/ Devs

I organize a Black Hat UX activity with stakeholders to elicit critical feedback on the medium-fidelity prototypes, focusing on identifying potential weaknesses or areas for improvement. Another awesome tool from The user Experience Team of One.


Taking into account the feedback gathered, I iterate on the medium-fidelity prototypes, making necessary adjustments to enhance usability and address stakeholder concerns.

High-Fidelity Mockups

Finally, I develop high-fidelity prototypes of the product, incorporating detailed visual elements, interactions, and branding to create a polished representation of the final product.

Creating intuitive documentation for my dev team

For the developer handoff, I created detailed Figma documentation covering all user flows, component states, and specifications. An example of a different project's handoff is shown below. Thorough documentation is important because my involvement in this project will decrease significantly post-handoff to work on other projects, and it is crucial that developers can easily comprehend the designs. As expected with a project of this size, questions came up, and we addressed any needed adjustments to the flows.

Project wrap-up

The project finished development in spring of 2023, resulting in a reduction in task time and an improvement in user satisfaction. The final product is now more user-friendly, and business stakeholders expressed satisfaction with the changes made.

Check out these other case studies!


Long-Term Care Home Bedsore Tracking