Custella
Field service management software design

Custella is a SAAS application designed for organizations to plan & manage work, information, assets, and people that are mobile.

Custella is a SAAS application designed for organizations to plan & manage work, information, assets, and people that are mobile.

Scroll Down
6 months
Total Time Taken
- 1 Product Designer
- 1 Product Manager
- 1 Technical Director
- 2 Backend Developer
- 3 Frontend Developer
- 3 QA
Team
Product Designer
My Role
Problem

Custella is a complex product, it is an all-in-one software that has sales, service and fleet management.

Users can be non-tech savy, thus the product has to be beginner friendly and trainable in one session. Create an easy to setup module for admins and managers, and human interface friendly app for end users (technicians or etc)

User interface and experience outdated, and not using consistent approaches to design which result in inconsistency and bad user experience.

😝 My Role

I am tasked to completely overhaul Custella’s

- Web App
- Mobile App
- Customer Portal

Creating a new design language for their product suite, updating the product design and UI/UX design with responsive design for their web/mobile platforms.

Year 2021 B.A. (Before Ash)

Well yes! Here is how it was before...

Disclaimer: The product was a mess technically in user experience and functionality standpoint. Year 2019 till 2021, was fixing ux error, bug fixes, tiny ui fixes and taking up custom projects for client to maintain cash flow. Finally in the end of Year 2021, decided to update internally to product instead.

🥳 Year 2022 A.A. (After Ash)

Here is after the redesign is complete

Disclaimer: Year 2022 was given a task make a complete overhaul of the project with new design system for a more consistent design throughout, here is some preview below:

Typography
Excellent typography can make a design clean and readable—and I love like that.

I use one sans serif for Custella design materials: Inter (Google Font).

Inter is a variable font family carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-case text.

Inter is a tried-and-true typeface, designed for legibility and ease of use.
Type in Preview
Color
Spice lavender is our main brand color and should be used in whatever I create. Spice lavender can be used with any other brand color to add dimension, depth, and contrast.

Eerie black and charcoal green is used for large fills and backgrounds.

The palette of neutrals add warmth and also pair nicely with any secondary color
Icons
I decided to simplify the icon because...


They are easy to recognize:
Easy to recognize because they have a clear, concise, and distinct shape that represents the function they are associated with. This makes it easy for users to quickly understand what an icon means and how to use it.

They are easy to distinguish:
Easy to distinguish from one another because they have a distinct shape and color scheme. This makes it easy for users to differentiate between different icons and find the one they are looking for.

They are visually appealing:
They have a clean and modern look that is pleasing to the eye. This can help improve the overall aesthetic of the UI and make it more enjoyable to use.

They are efficient:
Minimal and simple icons are efficient because they use less space and require less cognitive effort to understand. This can help users navigate the UI more quickly and efficiently, which can improve the overall user experience.
Fleet Management
Fleet Management is a module with Custella, a complex yet easy to use module that can create vehicles, packages, planning hub, delivery orders and more
Sales & Services
Helpdesk
Setup
Mobile App

Hope you loved it!

Hit me up! Let's work together