top of page
Chedar_cover.jpg

Chedar

Chedar is a SaaS app used to manage the budgets of film and production companies of all types. 

Project Overview

​

Chedar is a SaaS app used to manage the budgets of film and production companies of all types. The outdated user interface hurts the business’s credibility and doesn’t match its updated brand identity. This heavy UI-focused project is to utilize its new style guide to transform every step of interaction into a new interface. Through this process, my team delivered all the screens the client needed and provided constructive feedback on possible UI solutions that could improve the product's usability. 

 

  • Industry Design Project for Springboard UX Bootcamp

  • Team of 3 UX Designers for a UI Redesign 

  • Timeline: Nov-Dec 2022 – 4 weeks (dedicating 10 hours/week)

​

My Role

​

As one of the UI designers on a team of three. My responsibility includes UI redesign and audit for clients', banking, and suppliers' pages. Discover and document the UX problems and make proper suggestions at weekly team meetings



Tools

 

Figma, Google Docs, and Google Sheets

Problem & Goal

​

The visual language of the existing site did not match the company’s current branding and style guide. The visual confusion creates problems for users to have a coherent experience. The client wants us to power through all the unfinished screen redesign, so they are ready for the next stage of development.

Solution

​

Upgrade the product UI to align with Chedar’s branding. Understand the product's functionality and its limitation, and provide UI solutions and suggestions that are useful and intuitive.

Clients

​

Easily add new clients or manage existing clients for future billing and budget control. The upgraded UI offers a clear guide for users to manage their clients.

Client step3-dropdown.png
Banking.png

Banking

​

The banking section of the product allows the users to see the current balance, monitor and locate transactions, and manage banking accounts.

Suppliers

​

Importing new suppliers or managing current suppliers are easy to follow through.

Suppliers page-Import file.png

Research

We referenced the documents from the previous UX design teams to understand the client and user needs.

 

A competitive analysis revealed that most of Chedar’s competitors in the financial managing products are ‘practical over modern’, and often appears dated. That’s one of the motivations for Chedar’s UI redesign. 

 

The previous teams have done a solid job of helping us understand the Chedar users’ want to streamline their work. The client provided the newly designed style guide and tool kits, and he wanted us to continue the unfinished UI redesign from the previous teams. 

“ Basically, the previous team has done 50% [of the UI redesign], and I hope your team can finish the other half ” - from client

The Process

At the initial meeting with the client (Chedar founder), we discovered our main duty was to complete the unfinished UI redesign from the previous teams. Because of the extensive UI work and our time zone restrictions (the team members and the clients are in three different time zones), we decided to divide the work and document our findings and questions for future discussions.

1

2

 Repeat if needed

4

5

3

Study

Learn the product's functionality, and review the approved UI screens done by the previous teams.

​

Design and Document

Redesign UI screens based on the current product's functionality and note any UX issues.

Review and Critique

In each week’s internal team meeting, team members report their work progress and post questions that seek other members' input. This step is valuable for us as a team to review what issues we should address at the client meetings.

Meet With the Client

Present our work during the client meetings, clear any confusion with the client’s help, and gain screen approval or additional edits.

Review

Incorporate client feedback into the latest design and ensure the final work matches the style guide.

Discovery

​

Our responsibility is limited to UI redesign doesn’t mean we didn’t practice our UX skills. During these four weeks, my team and I discovered some usability issues. Some of these require more than one person's knowledge and multiple tries to figure out the best options, while others can not be fixed due to technical difficulties from the client side. Here are some of the issues we discussed with the client, and he agreed to improve.

Issue 1: Filter Dropdown Menu

Problems of the Old Design​

  1. Mixed search field and multiple selection options could confuse users
     

  2. The redesign requires the designers to create a new dropdown component that does not alter its functionality.

Screenshot 2023-01-05 at 18.30.00.png
Screenshot 2023-01-05 at 18.26.01.png

  • Add radio buttons or checkboxes to give users more control

  • Use arrows to show open and collapse states similar to other apps

  • Consider moving the search field to the top of the menu instead of under sub-categories

  • Do not alter the intended functionality.

How can we design this dropdown to cause less confusion?

Dropdown menu mockups.png

The Final Decision

  • Avoid guessing and reduce the users' cognitive load by giving all the selectable options as a checkbox list under categories

  • Use arrows to show open and collapse states that are similar to other apps

  • Since we can not alter the intended function of the original product, the search fields are left under its original places

Dropdown menu mockups.png

Issue 2: Input Fields

Problems of the Old Design​

  1. The input fields lack instruction for users, which is especially confusing for those who do not have a financial background
     

  2. No clear difference between fillable and non-fillable fields
     

  3. The location of the primary and secondary buttons give challenges to flow to the next step

screenshot of the old design.png

  • Give hints or tips for the users to fill out the form without guessing

  • Clearly distinguish the fillable field and non-fillable fields

  • Make the action buttons easier to reach

How can we design
this overlay form for
easy inputs?

Suppliers page-add Company step2v2.jpg
Suppliers page-add Company step2.jpg

The Final Decision

  • The client chose the hint text option over the tooltips due to the large amount of rework required

  • Make the non-fillable field less noticeable by replacing the stroke with a light drop shadow

  • Move the action button to the lower right corner to keep consistent with other approved screens

  • Provide edge case screen for any errors accrued

Suppliers page-add Company step2.jpg

Issue 3: Banking Account Cards

​

Problems of the Old Design​

  1. The functionality of the red (error) tag and green (all good) tag are not equal and confusing. Users can fix the error account by clicking the red tag or warning message, but the green tag doesn’t present a similar function. A user can turn the green tag off by clicking it, but it doesn’t make the account inactive 
     

  2. The error/warning message is hard to see and does not pass the accessibility test. It functions as a warning message and a clickable link that is not easy to spot.
     

  3. Save button is meant to save the recent changes the user has made, like selecting/unselecting any bank accounts. It is not intuitive for a user to understand after any selections user has to click the save button again to make the change happen
     

  4. User is not able to remove the linked accounts cards (including error accounts)

Screenshot of the old banking design

  • Make the colored tag (red & green) an indicator only. Remove all the extra functions like on/off or fix the error link

  • Make the error message accessible and do not make this message function as a link

  • Add an actionable button for fixing account errors

  • Change the “Save” label on the button to “Save Changes” 

  • Add a delete button for each bank card allow the user to remove them

How can we design these bank cards for easier control?

bank card 1.png
bank card R_2.png
bank card G_2.png
bank card R_1.png
bank card G_final.png

The Final Decision

  • The client agreed to keep the tags as indicators only and make a separate action button for fixing errors

  • The delete button is not approved because the app is not having this function at the current stage

  • The client chose to keep the warning message at the top of the card and use a hyperlink for the fix error action.

Banking-Manage Bank.png

Style Guide

As part of the agreement, we cannot reveal Chedar’s color and labeling, so all the colors are modified to protect the client’s Intellectual property. 

Modified Style Guide

Style Guide.png

High-Fidelity Screens

Conclusion

For this project, we could not conduct usability testing after the UI redesign. However, the client was pleased with our work and said we delivered all the screens he asked for. Our UI redesign is not only matched Chedar’s branding, and their staff will use them to bring it to life in a couple of months.

“ I really enjoyed working with you... I enjoyed your rigor & eye for detail. That is an incredible trait to have in any occupation & sector.” - the Chedar CEO

Gaining clear expectations from the client and establishing our roles early are crucial for this short project timeline. Despite the client not always agreeing with our recommendations, I learned that as a UX team, we are responsible for pointing out all usability issues and proposing the best solutions for the users.

bottom of page