About Gooda

Gooda is a web-based application that allows users who work in the entertainment industry to manage their finances. Users can create budgets and invoices in a grid system, similar to Microsoft Excel. They can create individual teams and projects for each client.

When I first started looking through the original Gooda site, it was clear that they did not spend a lot of time when it came to the user interface design. I don’t think accessibility was considered in the existing design. On some features, there was little color contrast and the fonts that were used were very small.The buttons were different from page-to-page and elements that weren’t supposed to be buttons looked clickable.

About the Project

I worked in a team with three other UX/UI designers. We met with the company contact, Barry, once a week to go over deliverables. 

Barry created a homepage that used different colors and elements than the rest of the site. He said he would like us to match the theme of the homepage he created. He wanted us to use only items found in a UI kit he had purchased and to use the Raleway font. 

In our first meeting with Barry, I asked him to list some qualities he wanted his site to convey to the user. He said he wanted a clean, modern, and friendly look to his site. We took his desires into consideration when redesigning the Gooda site. Per Barry’s request, I did not use the Gooda logo, colors, or grid design in this case study due to confidentiality. For this case study, I changed the name of the original company to Gooda.

The majority of the screens had already been created but needed some tweaking. We changed the colors of the screens and updated some of the UI elements.

Here is my style guide:

We redesigned several parts of the Gooda application. I was responsible for redesigning the navigation menu, header, and dashboard. I also contributed to the budget grid and overlays.

Here is what the navigation looked like before vs. after my redesign:

Changes I made:

• I added icons to each menu option and made the logo bigger. 

• I removed the search feature and moved it to the header so that the user could access it more easily instead of having to click on the menu.

• I made the menu text the primary color of the brand and made the font bigger. Accessibility is important and I wanted to make sure all users could see what is on the page.

Here is what the header looked like before my redesign:

And here is my redesign:

Changes I made:

• I brightened up the header by making the background white. Barry wanted the redesign to have a lighter feel than the original.

• I changed the icons so that they would be from the UI kit provided to us by Barry.

• I made the search bar larger so the user could see more of their text.

• I made the text the primary color of the app.

One of our main focuses on this project was the dashboard page. This page shows the user’s revenues, profits, expenses, and available cash. The gray text on the gray background does not support accessibility. 

Here is what the dashboard looked like before my redesign:

And here is my redesign:

Changes I made:

• I changed the colors on the new dashboard design as well as added icons from the UI kit from Barry. 

• I added a feature that shows whether the user is up or down in their numbers. 

• Barry requested that we not change anything in the grids in the app so I kept that the same. For confidentiality, I did not include the grid in this clip.

• I added page numbers at the bottom of the screen so the user could easily navigate from page to page without having to click the arrows several times.

• I made the font darker so the screen would be more accessible.

Another part of the app that we focused on was the budget screen. This is one of the main features of the app. It works similar to Microsoft Excel and allows the user to balance their budget.

We had a lot of work to do on this. The original budget grid was a mess. It featured information showing the trends and totals of the grid that looked like buttons, but they were not clickable. I removed the budget grid from this clip for confidentiality purposes.

Here is the original budget grid:

And here is my redesign:

I used all of the information from the original budget screen in the redesign. 

Change I made:

• Instead of using button-like pills to display the totals, I used white cards. Since the original pills were color coded, I outlined the white cards in different colors to group the information together. 

• I made the font larger and redesigned the tabs. The white tabs with the highlighted page name and bottom bar look more clean and less crowded.

• I moved the Supplier, Summary, and Exit Budget buttons to the right side of the screen. By moving these buttons to the right side of the screen, it freed up more space for the cards and gave it a less congested look.

• Because clicking Exit Budget is the only way to leave this screen, I made that the main call to action button.

Another screen that needed a major overhaul was the screen showing the team page. It leads the user to the budget screen and shows the projects and quotes for the team.

Here is the original design:

And here is my redesign:

Changes I made:

• I color coded the quotes and the projects so they could be easily identified.

• I removed some of the icons from the project and quote boxes and showed what a project or quote would look like when expanded.

• A feature I introduced was the team description. The user can enter a brief description or notes about the team and it displays under the team name.

The last major challenge we had was to redo the overlay screens. There were a lot of them so this was a big undertaking that required us to really cooperate as a team. The screens look very similar so it was a challenge for us to make our screens look exactly alike.

Here is an example of an overlay from the original design:

And here is my redesign:

Changes I made:

• I made this overlay look more clean and modern by changing the size of the boxes and adding the new primary and secondary colors.

• I increased the font size and also made the font darker to be more accessible.

My Experience

A big part of this project was making the design more accessible. It’s important that all users be able to navigate the design. I improved this by making the fonts bigger and darker. I also made some of the elements larger. When a design is accessible, everybody wins.

My team conducted user testing on the original design. The user had difficulty navigating the site. Since it was not a part of our project and we only had four weeks, my team was advised to not fix the user flow or do additional testing.

Looking back on this experience, I learned a lot about teamwork, responsibility, accessibility, and what it’s like to work for a real client. I also improved my design skills in Figma and gained more experience using Slack.