Data Visualization Dashboard for Company in the Food & Beverage Industry

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

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:

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

Feature

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!

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.

Wireframes

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.

Redesign

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.