Chedar

Streamlining the Film Budgeting Process

OVERVIEW

Chedar is a SaaS app used to manage the budgets of film and production companies of all types. Through a redesign, they wanted a more cohesive experience for users that is inline with Chedar’s corporate identity and to simplify the process of creating budgets and quotes from start to finish.

MY ROLE

UX research, usability test of initial site, synthesis, ideation, execution strategy and visual design.
  • Industry Design Project for Springboard UX Bootcamp
  • Team of 3 UX Designers for a UI Redesign 
  • Timeline: Aug-Sept 2022 – 4 weeks (dedicating 10 hours/week)
PROBLEM
Production professionals currently struggle with navigating screens when using Chedar to manage their budgets. The visual language of the existing site did not match the company’s current branding.
SOLUTION
Redesign the application to align with the company’s branding initiative. Increase the user’s sense of control by keeping them informed of where they are within the context of the app. Clarify the steps of creating a budget.
Chedar-Dashboard

Dashboard

The financial overview of all of the user’s projects. The colorful pallette introduced some levity to the fairly rigid concept of budgeting.

Chedar-Project Manager

Project Manager

The file management section of the software. Projects or quotes can easily be added or removed.

Chedar-Budget Spreadsheet

Budget Spreadsheet

The core action of the app is heavily referenced by users with inputs and outputs such as generating invoices. It’s preloaded with common calculations that are unique to the production industry.

RESEARCH

We referenced resources from the previous UX design team.

User stories outlined the steps taken to establish a budget. A competitive analysis revealed that the style of similar apps was ‘practical over modern’ in most cases, often at the expense of appearing dated. Branded colors were provided by Chedar. We understood the value proposition as highly collaborative and meant to streamline accounting duties. The founder wanted to convey the experience  as easy, concise, modern and minimalist.

IDEATION

Part of the sprint process was used to decide the initial design direction.

01. Art Musem

We each mocked up a redesign idea for the Dashboard screen and pasted them into one shared Figma document to review/critique anonymously.

02. Heat Map

We each reviewed the sketches silently and placed colored circles to mark interesting parts.

03. Speed Critique

Reviewed and wrote questions/concerns on sticky notes. This helped identify the best elements of each to make into one cohesive redesign.

04. Straw Poll

Each person voted on their favorite idea with a large sticker.

05. Supervote

We presented an update of our progress to the client and he made final suggestions as to what became the end result.
Dashboard Original
Dashboard Original
Ideation Initial concepts
Dashboard Ideation Concepts
Dashboard Final Redesign
Dashboard Final Redesign
USER TESTING

We realized we did not have a clear understanding of the user's process. More testing would be needed.

While we were successful at redesigning the dashboard, it was not part of the user’s main route to access their budget spreadsheet. I tested 2 more participants due to time constraints, in addition to the 3 users interviewed from the previous team. This is what we learned:

SYNTHESIS
Affinity Map for Chedar

FINDINGS

Chedar original Gudiance 1

GUIDANCE IS NEEDED​

New users were generally confused when starting the budget setup process.​

Summary Spreadsheet

USERS RELY ON SUMMARY QUOTES​

Running total pills above the budget table were easily mistaken as buttons and difficult to reference at a glance.

Opportunities

Chedar-Old-Folder Structure

How might we help users understand the budget’s folder structure?

Quotes and budgets are stored inside a folder structure of teams and projects.

Chedar-Old-Grid View

How might we help reduce cognitive load when in grid view?

Each card contained up to 9 icons representing individual actions. Mouse overs was the only way to identify each function.

“If I moused over all 9 buttons without finding what I was looking for, I would most likely abandon the app”

Alex G., Video Producer

Chedar-Old-Folder Structure

How might we simplify navigating the budget spreadsheet interface?

Information pills had similar visual treatments as buttons, which was confusing. It was not clear what some buttons controlled.

SOLUTION 1 – EMPTY STATE

Before: Users were generally confused when starting the budget setup process.

The landing page contained only a call to action button with no explanation of the purpose of a setting up a team.

After: A clear page title includes an explanation of the purpose of making a team and a prominent CTA button.

This page now functions as an empty state to increase learnability. This approach was taken for the entire folder structure to include projects and quotes, with color distinctions between file types, such as budget and projects.

SOLUTION 1B – easier access to budget

Before: Users had trouble reaching the budget spreadsheet from Grid/List view.
It was only accessible by clicking the file name on each card. The hyperlink was not highlighted and it competed with 9 other actions buttons on the card. 
After: Tapping anywhere on the card, outside of other icons, takes you to the budget spreadsheet. In grid view, the white half of the card is a link to the spreadsheet.
Most icons were replaced to better match the action.

SOLUTION 2 – REDUCE COMPLEXITY

Before: The high number of grid view icons are confusing to the user.
The nine icons require the user to hover over each to see a tooltip of it’s function. Users would use process of elimination to find the proper action.
After: Display the 2 most used actions on each card. Other actions are hidden in the hamburger/ellipse drop-down menu.
Include description labels for each icon. Icons were replaced to better match the action.

SOLUTION 3 – simplify the budget interface

Before: Users were overwhelmed by the amount of buttons on the budget spreadsheet.
The interface contains pills of key budget indicators that have similar visual treatment as buttons. 
After: Improve visual hierarchy by differentiating actions and moving the buttons closer to the elements affect.

The summary pills are now larger cards, separated from buttons for clarity. 

STYLE GUIDE

HI FIDELITY SCREENS
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
Chedar Screen
NEXT STEPS
  • Conduct a final test of the redesign with a focus on the folder heirarchy of projects and quotes.
  • Include a short-cut menu item or button to access frequently used budgets for quicker access.
  • Test if some input/output overlays could be incorporated into the budget screen as a panel so the user can see changes in real time.
CONCLUSION + LESSONS LEARNED
We eliminated friction within the budgeting process and increased the efficiency of the file management system for the user. While the timeline did not permit final user testing, the client was pleased with our efforts and expressed that we accomplished 95% of what was expected. Any future screens will be updated with the new UI kit and style guide we provided. Our solutions now match Chedar’s company branding and their staff has begun implementing the new interface.

Establishing the expectations and roles of each team member as soon as possible is crucial for short project timelines. I also discovered that advocating for the user extends beyond the client and is even necessary within a UX team. By taking the initiative to setup regular touch bases, strategy and define processes, we kept the momentum to reach a successful outcome.

Thank you for reading!

Top