Skip to content

RightSpend

Evolving a complex UI for a web-app heavily focused on data

Evolving a complex UI for a web-app heavily focused on data

Blurred close-up of US dollar bills tinted blue

Year completed

2024

Project length

5 months

Services

  • Consukltancy
  • UI deisgn
  • Front-end development

Results

  • Much improved UI developed in stages
  • Library of static UI components
  • Full static views developed for various sections
  • Tailwind CSS & Alpine JS

Overview

RightSpend is a data-driven platform that helps marketing and procurement teams maximize the value of their agency partnerships. By applying rigorous, analytics-based insights to procurement strategies and campaign planning, RightSpend empowers brands to ensure every dollar of their marketing budget delivers a measurable return.

Having been brought on to initially create some concepts for their UI, we quickly moved on to developing an overhaul for the entire app. The challenge with this was having to improve the current UI and views—both aesthetically and functionally—without straying too far from what was already there.

The end result (which is still ongoing) was a much-needed refresh that improved the appeal of the product and visually simplified previously dense and complex pages of information.

Note: All images feature dummy data.

Thanks to everyone involved

Dominic, Ian, Andrew, Daniel, Richard, Diganta, Stuart


Project images

Previously

A snapshot of a range of views from the app.

Grid of RightSpend web app screens showing data tables and charts

Initial concept work exploring how we could improve the wrapper and navigation

RightSpend web app screens showing spending plans and account settings

Now

A selection of views and components we improved, showing the comparison in some cases. (screenshots not scaled relatively)

Grid of RightSpend web app screens showing forms and settings
RightSpend data table redesigned into a clearer spending plans list
RightSpend form redesigned from a dense layout into a clearer step-by-step form
RightSpend report builder redesigned with clearer filters and options
RightSpend comparison report table before and after the redesign

Illustration of a pink and a purple character with speech-bubble mouths talking on a dark background

Ready to talk about your project?

Start a project together