Overview
Who, What, Where, When
Chedar is a web-based financial tool for Production companies. Chedar helps companies manage their film projects, save time and money, while keeping them on budget. For this project the client, Chedar, wanted an improved user experience that matched their new brand identity. The goal was a redesign of the software for greater ease of use and visual impact.
I was on a UX/UI Design Team. For this project, I took on the role of Project Manager for my team. I worked to track deliverables, priorities, and progress for the CEO and team. Beyond design, I also managed my team, our deliverables, documentation, communications, and scheduling. Collaborated with the other designers and the CEO & Founder.
Role
Research
User interface
Ideation
Visual design
Platform
Desktop
Tools
Figma
Tailwind UI
Recharts
(Note: as a prototype not all features function)
*Due to specifics of Chedar’s Portfolio License all client information has been edited out, Chedar’s color palette has been adjusted, and information pertinent to industry sensitive data has been removed.
Defining The Problem
Limited Time for a Big Impact
The Problem:
Chedar’s clients currently struggle with navigating and using the many functions of the software. The existing site was not in line with the company’s refreshed branding.
The Solution:
Redesign Chedar to match the company’s refreshed branding. Improve the user experience by strengthening the visual design through better hierearchy, typography, layout, impact, & more. Throughout redesign, update inconsistencies and find areas for improvement.
Constraints
Solution to be designed in conjunction with Tailwind UI
Limited time for research and testing, which lead the company to request we not do any testing or validation
“You naturally took the project manager role. You made sure there's clear communication and that we're moving in the right direction.
You have the eye for UI.“
-CEO of Chedar
Research
Understanding the Space
Competitor Research
There were two specific software applications that the company indicated were direct competitors in their space, Dext and Pennylane. Both applications are financial/accounting tools.
Similarly to Chedar, Dext has multiple user types with differing access/functionality within the app. Dext has some useful functionality like data extraction from image uploads. As Dext currently has the edge on Chedar in terms of users, what can Chedar learn from Dext’s successes or areas for improvement?
pennylane‘s site highlights their mobile app. A mobile experience is something Chedar should consider for future launches, to stay competitive. One thing Chedar has done better than pennylane throughout the redesign, is better implementation of iconography. pennylane has consistent use of iconography throughout the app, but does not include labels in conjunction. This is a miss, especially for a financial app where icons are for bigger concepts and therefore less recognizable.
Select Heuristic Principles
Visibility of System Status
Dext 5/5 - Dext excels at keeping the user updated throughout the process with lots of clear color coded signifiers and feedback
pennylane 4/5 - Pennylane does a moderately good job informing the user, but some indicators are unclear.
Match between System & the Real World
Dext 4/5 - As this is financial software and therefore niche to accounting, it is hard to determine success in this category not being the intended direct user. Dext appears to use the clearest language possible.
pennylane ?/5 - As this is financial software and therefore niche to accounting, it is hard to determine success in this category not being the intended direct user. Likewise as the app is only in French, it is hard as a non native speaker to determine success.
Consistency & Standards
Dext 3/5 - Follows patterns from similar financial softwares, as well as table software like Excel. Tables a little messy in spacing. Some unusual styling within tables.
pennylane 4/5 - Follows patterns from similar financial softwares, as well as table software like Excel. Tables are clear and are consistent with the industry.
Recognition Rather than Recall
Dext 4/5 - Great use of info buttons for quicker understanding of terminology. App is rich with information.
pennylane 3/5 - App is rich with information. Minimal use of info buttons. Iconography should be accompanied with labels, which it often is not.
Aesthetic & Minimalist Design
Dext 2.5/5 - Good use of color palette, but some overwhelm in variety of font colors, sizes, and weights. Some low contrast text which fails WCAG.
pennylane 4/5 - Good use of color palette, but some pages are cramped with information.
Help & Documentation
Dext 5/5 - Full section devoted to resources. As noted above, good use of info/helper buttons to inform the user.
pennylane 4/5 - Floating sticky helper button and minimal use of info buttons.
The Redesign
Look, Feel, Function
Dashboard
Prior Team’s Dashboard Design
Dashboard Redesign
For the revised design the dashboard was expanded to include 3 tabs of information: Overview, Cash View, and Projections. The redesign better shows trends and data at a glance.
I utilized both Recharts (A composable charting library built on React components) and Tailwind (CSS framework) in order to design solutions that the developers would be able to implement.
Overview Tab
This screen gives a look at financial trends at a glance.
Projections Tab
Chedar wanted to include a calculator to show projections of growth over time.
Cash View Tab
It was important to weed out any extra data and showcase the most important information. In my research of other solutions I found other impactful designs for financial health, such as meters, but the solution needed to utilize the Recharts library for the developers.
Invoices
Old Invoicing Process Designs
The old design needed to be redesigned under the new brand guidelines, implementing the new brand colors and rebuilding all the elements with the Tailwind library.
Invoices Process Redesign
I determined where there was a need for empty states. Likewise I made sure that we adopted consistent use of the new brand colors and I determined the appropriate error red and success green. My team and I consistently worked to update the style guide and component library as we worked to keep the designs as well documented and editable for the development team as possible
A lot of the redesign went into making sure that there were consistent standards across all sections of the application and looking for areas of friction.
Some Usability Issues Addressed:
Discrepancies in language usage.
No consistent button organization.
The filter and range positions were inconsistent.
Some text being blue created the impression that the text was actionable, when it was not.
When uploading a new file it automatically removes the old file without any error prevention.
Reporting
Old Reporting Design
The old design needed to be redesigned under the new brand guidelines, but also the structure and content needed to be determined. I worked with the CEO to gain a better understanding of what the purpose of this section was and how he wanted it implemented.
Reporting Redesign
For the redesign I broke each reporting section into tabs for better visibility and ease of navigation. This worked to streamline the design and make it more quickly digestible for the user. I worked with the designer working on the Account Setting section to make sure that there was consistency across our designs as these sections had a similar structure.
Summer/Fall 2023
Designs To Go Live
Our work will be live in the next few months as the development team implements our designs.
Takeaways
Successes, Reflection, & What’s Next?
This project was a fast paced sprint to the finish. My team and I were able to complete all of the company’s goals. We wanted to test and validate, but we were requested to utilize all of our time toward cranking out redesigned screens. The company was pleasantly surprised that we were able to complete the full scope of the work.
I enjoyed taking the lead on managing my design team and communications. Our team worked together without any friction, successfully bouncing ideas, sharing designs, and brainstorming solutions. We worked hard to advocate for the user and our design decisions. I’m proud of our work and the great team relationships and the relationship we built with the company.
Next Steps:
Further testing and validation.
Understand how users want to generate reports.
For the Dashboard, what information do users want to see first? What is most important to them?
Adding second launch features:
A mobile experience, for checking finances on the go especially if users are on a film set.
Automated file data extraction would increase efficiency for the user, as opposed to manually entering data.
Portfolio License: Company hereby grants to Designer an irrevocable, fully paid-up, worldwide, royalty-free, non-exclusive, nonsublicensable, nontransferable right and license to use, reproduce, and display the Deliverables in the Designer’s online portfolio(s), and to otherwise display the Deliverables as sample works of the Designer. “Deliverables” shall mean all of the Company’s interest, presently owned and/or obtained in the future, in the deliverables resulting from the project described herein; provided, however, that Deliverables shall not include any (i) Company identifiers, or (ii) sensitive Company information, that the Company expressly excludes below.
Exclusions from Deliverables: Corporate identity, Client information, Chedar's Color palette, any Design data in relation with the budgeting grid & budgeting labels