Online Dashboard

This client began rebuilding their proprietary online fundraising platform several years ago, and was dissatisfied with several aspects of the interface design. I created detailed, fully-realized wireframes and concepts for their developer to implement to make the web app more user-friendly.

2024

myfruitsale.com

The Brief

To create a more streamlined experience running a product fundraiser, the client developed a web application to provide a dashboard to each fundraiser's administrator and salesperson, allowing them to view and manage their sales and track their progress towards their goals.

The "dashboard" was originally designed by a member of the development team, and I was asked to propose a series of adjustments and refinements to solve two primary problems: (1) users complained that the "panels" on the dashboard blended into the background and (2) the client noticed various inconsistencies between the design of various components and their visual branding guidelines.

Users cited readability issues with these panels blending into the background.

The client wanted a distinction between the primary and secondary buttons in the upper-right corner, as well as clearer action items on each row of the table.

The placement and visual style of the Students/Teams picker did not match the rest of the dashboard.

This page lacked space for relevant information and actions for each available report.

Colors & Components

Because there would be relatively few UX changes made during this project, we opted to skip a wire framing process, instead focusing on defining the color variations used across the dashboard and re-stylizing the various UI components that would appear throughout.

Most of the users of this dashboard are teachers and students, therefore it was important to preserve the bright accent colors and rounded elements to ensure a design that communicates important information in a playful, approachable style.

The new style of the dashboard panels. The white background creates more distinction from the background and gives more contrast to the text.

One of the most comprehensive changes was a standardization of the buttons and text fields used across the dashboard's pages.

The half-dozen light boxes used in the dashboard were also styled to match the new panel design.

Final Thoughts

The final designs for the changes to this dashboard, as depicted in the samples below, provided the client with a dashboard that was functionally the same as the system their clients were familiar with, but vastly improved in its readability and more consistent in its style.

This project highlights my design philosophy of careful attention to detail, particularly to ensure consistency across components, resulting in a user experience that is vastly more satisfying and desirable on both a conscious and subconscious level. The small details matter.