Who, What, Where
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 brand identity. The goal was a redesign of the software for greater ease of use and visual impact.
I was on a three person UX/UI Design 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
Overview
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
Project History & Context
This project had two teams prior to ours, which completed user interviews and testing. Due to the company’s desire to complete the redesign for the rest of the app, we were specifically requested to solely work on redesign and asked not to user test or validate. Ideally we wanted to be able to have access to users and to go through the full UX process, but as our team was tasked with finishing the remaining sections of the application, we crunched to redesign everything desired.
This resulted in more screens than the past two phases combined, putting business needs ahead of testing and validation allowed us to complete this breadth of work. We utilized the work done by the prior team in order to direct our work and maintain consistency across the software.
“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
Design Process
My Responsibilities
Initial Kickoff & Presentations
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. I planned our agendas, was point person for communications with the CEO, facilitated the running of our design presentations, and debriefing of the team. For one newer designer I made sure they felt confident in their work and asking for help, assisted in assigning out work in relation to experience, and shared design knowledge for our team’s success.
Research
For research, I referenced work from past UX/UI teams. I utilized competitive research to inform design decisions and referenced other apps and designs for inspiration.
Design & Iteration
The design process involved consistently translating existing screens into the new visual design & matching design elements to the appropriate Tailwind components. The team worked hard to dissect all the functionality of each screen and look for any discrepancies or areas for improvement. We then sought out feedback, made cases for design decisions, and implemented change when needed.
Define
Deliverables
We determined with the CEO the work to be done for this project. As noted above our team had quite the undertaking in completing all the rest of the sections for Chedar. See below in the Site Map for Chedar, grayed out sections were worked on by the past two teams. My team worked on all sections in color and I specifically worked on the sections outlined in teal.
Overview of Individual Sections Completed
Dashboard
An overview of the user’s financial state for their projects. Graphical elements and information hierarchy break down complex data into a digestible overview.
Invoices
Invoices section for users to track and manage invoices at a glance. Users can easily see the status of their invoices and if any actions are needed.
Prepare Invoices
Prepare invoices is the first step in the flow for processing invoices through the software. This step is to prepare invoices for review.
Review Invoices
From this section, users must assign the invoice, move it back to prepare, or archive. Invoices must be assigned in order to be processed through the software.
Export Invoices
In this final stage of the Invoices process, users can mark invoices as paid and export a record for book keeping.
Archived Invoices
Invoices that have been fully processed can be archived. They are now out of the flow of Invoicing, but a history is maintained of the transactions.
Reporting
One stop location for generating reports on accounting, client, project, user, & log data.
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.
Dext does a great job at presenting a streamlined Dashboard with complex metrics. Similarly to Chedar, Dext has multiple user types with differing access/functionality within the app. Dext follow standard practices across financial apps in categories and layout. Chedar & Dext share many key functionalities and sections as is to be expected due to their industry overlap. 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?
Next I explored pennylane another close comparable in the financial space, especially as this is also a french specific company. 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
The CEO tasked me with redesigning the Dashboard. This is the one section that had been worked on previously by the prior teams, but there was a desire for further investigation. It is important to note that there was very minimal direction for this section and desired data to include had not been fully outlined.
Prior Team’s Dashboard Design
The prior design showcased an overview of the financial state for the user as well as latest activity within the app. For the redesign, the company determined that they wanted a more comprehensive dashboard that would have more metrics. The goal was to give the user a greater understanding of the state of their financial affairs.
Dashboard Redesign
For the revised design the dashboard was expanded to include 3 tabs of information: Overview, Cash View, and Projections. I implemented the general structure I had been given and tried to solidify some of the design elements by querying the company to gain more clarity. 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. There was no Figma kit for Recharts, so I redesigned components to match the relevant React Components.
Overview Tab
Cash View Tab
Projections Tab
Cash View Solution 1
The initial redesign for the cash view tab implemented a card style layout consistent with many other sections of the app, as well as the initial dashboard solution. After discussion with the CEO, I created additional designs that were more graphical in nature.
Cash View Solution 2
After a round of feedback with a greater understanding of the company’s goals for this tab this was one of my revised designs. The most important items are “Cash Today”, “Expected”, and the health of each of the three financial categories which are shown by the difference. It was important then to weed out the extra data and showcase the most important information. In my investigations of other solutions to showcase financial help I found other impactful designs, such as financial health meters, but the solution needed to utilize the Recharts library for the developers.
I kept notes as I designed and addressed them with the CEO during each review meeting. I also made important notations for the developers.
Cash View Solution 3
This solution was a middle ground between the paired back solution 2 and the text heavy solution 1. For solution 3 the information is presented graphically with pie charts as well as showing all the data at a glance.
The company is still in the explorative phases of the dashboard so they will be testing into which solution is the best fit for the user. The CEO did express satisfaction with Solution 2 and Solution 3. Next steps will be building out these designs with the development team and testing them with their users.
Invoices
For the Invoices section I closely referenced the design work of the prior designers, especially the Proposals section, which looked very similar. Following Heuristic principles there is consistency between all the Invoice sections needed for the invoicing process. These sections were repetitive, but there were areas that I addressed for consistency and improvement and some instance where Tailwind components did not appropriately cover the unique functionality within a section.
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. One of the challenges of the redesign was making sure to explore and understand every functionality and element, due limited variety of data some details had to be gained directly from the CEO.
Invoices Process Redesign
A lot of the invoicing sections involved working out the translation of the functionality and elements into Tailwind. 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 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
I reviewed every screen for the redesign to determine where improvements could be made within the scope of the project. 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:
There were discrepancies in language usage across screens. I made sure to catch those and streamline language, to minimize confusion. For example, a button labeled View Invoice should not lead to a screen headlined Confirm Invoice. These small catches can improve understanding as users progress through the user flow.
There was no consistent button organization in throughout the modals so in collaboration with the CEO, we determined the appropriate order and which CTA to prioritize as the primary button.
The filter and range tended to move around between sections, and we made sure that those key items stayed consistent.
The currency text being blue in the original design was an issue. Since the text was not clickable, it created the impression that the text was actionable. This was easily resolved by using the brand black.
I noticed an issue in the functionality of the file upload. If you go to upload a new file it automatically removes the old file without any error prevention or ability to undo. This would be potentially problematic if the user wanted to revert to the old file, but did not have the original. I suggested prompting the user to confirm that they want to override the existing file. Likewise depending on server storage, past files could be stored in a library.
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 finalized and hashed out. I worked with the CEO to gain a better understanding of what the purpose of this section was and how he wanted it implemented. As it was the old design was very bare bones and a very rough idea of what the content would be.
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.
Spring/Summer 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 the CEO’s goals and we had the great success of a happy client. My team and I wanted to test and validate, but due to the desires of the company we held off and worked hard to get all the remaining screens finished, which ended up being over twice as many screens as the past two design teams combined. The CEO was happy to have all sections of the software redesigned. We were able to complete over 100% of what was desired. Testing and iteration, as well as adding second launch features, would serve to improve the software further.
I enjoyed taking the lead on managing my design team and liaising with the client. Our team worked together without any friction and we were successfully able to work alongside and with each other, bouncing ideas, sharing designs, and brainstorming solutions. We worked hard to advocate for the user and our design decisions. Overall I’m proud of our work and the great team relationships and the relationship we built with the client.
Next Steps:
Further testing and validation. I’d specifically like to test the Reporting and Dashboard sections. These sections were not yet fully outlined by the company when I worked on them and would benefit greatly from going through the full UX process.
I’d love to know how users really want to generate reports. I had numerous thoughts on this section. Would users want to batch multiple reports at once? If they had significant data in any of the Reporting categories how would they want to search, sort, or filter? Would they want reports on all data sets over a certain span of time?
For the Dashboard, there were so many questions left unanswered. What information do users want to see first? What is most important to them? Do they want to customize their Dashboard?
Look into design and implementation of key features from competitors:
Chedar would benefit greatly from a mobile experience. The current experience is desktop first, but we are in a mobile first world. People expect to be able to access their data on their phones. It would be great to dig into some user interviews and determine how important a mobile experience is to the customer.
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