Role: UI/UX Designer

Tools: Adobe XD

Project Timeline: 2023-2024

Client: Zentive

Platform: Web and Mobile (PWA)

about the project

The clients wanted to build a clean and user-friendly end-to-end management platform tailored for landscaping businesses.

1) A web interface for internal employees where they could manage admin tasks like (but not limited to) adding an employee, creating and assigning jobs, sending out quotations and invoice for the services requested.

2) A Progressive Web App (PWA) for field crews to view their assigned jobs and updating of job status. 

3) A customer portal for the customers of the landscaping business where they can request, view, and pay for the services they received.

4) A web interface for zentive admin to manage the subscription of landscaping business owners.

Design process

Style guide

Since the project was built from scratch (except the logo), I was tasked with developing the style guide, specifically the color palette and typography that would define the platform’s visual identity.

Color Palette – Inspired by natural landscape elements to create a sense of familiarity and connection with users, while ensuring accessibility across text and UI components.

Typography – I first discovered Source Sans Pro through a design post and was immediately drawn to its clean and modern look. When the clients requested a minimalist and professional aesthetic, I felt like it will fit. I suggested it and the clients liked this typeface and approved it to be used across all platforms.

This is designed for the landscaping business internal employees to do their daily tasks including but not limited to adding employees, creating and assigning jobs, creating and sending of quotes and invoices.

Challenges

1) The industry is familiar but at the same time new to me

What I did

1) Research – Did research about the landscaping industry to give me a better understanding of the project I am working with. 

2) Competitor analysis – Knowing how their system works helped me make informed design decisions like how certain features are expected to work and find opportunities for improvements.

3) Communication – Since the client had deeper knowledge of the industry, my product owner and I maintained open communication with them to clarify workflows, and align on expectations.

Challenges

2) Technical constraints

What I did

1) Communication with the developers – Some of the core functionalities of the project depended on third party integrations, and the project timeline was tight. I have to communicate with the devs to identify what customizations were possible to balance feasibility with user-experience.

Progressive Web App

This is designed for the field crew for them to be able to view their assigned jobs and be able to change its status. The changes the crew made in PWA are reflected on the web app the internal employees manage.

Challenges

1) Designing PWA for the first time

What I did

1) Research – I had to check on applications across various industries that support PWA, to learn the common UI patterns they’ve implemented which gave me a clear starting point and helped make practical design decisions.

2) Checked for reusable UI components –  I’ve also explored existing internal apps that support PWA to check for reusable UI components that’ll fit with zentive to help streamline implementation and reduce development time.

Challenges

2) No direct access to actual users (crew)

What I did

1) Worked closely with my product owner and clients – I collaborated with my product owner for the initial requirement. Since neither of us have direct access to the actual users (crew) we relied on the clients’ knowledge and feedback to validate key flows and expected user needs. 

2) Designed with Simplicity and Familiarity – Exploring other applications that support PWA helped me identify the widely used design components for mobile first design. This helped me make design decisions and components that could be easily recognized by users.

Customer Portal

This platform is designed specifically for the customers of the landscaping business. It allows them to easily view and pay their bills, request services, and manage anything related to their payments and service history.

Challenges

1) Keeping it simple and usable first for MVP, nice-to-have things reserved for later

What I did

1) Focused on essential functionalities – To align with the current goal of the clients’ for MVP and meet the tight timeline, I used a simple UI that allows users perform the essential tasks. While some friction points remained due to limited customization, I reduced confusion by using familiar UI patterns, adding helpful microcopy, and providing visual guidance where needed.

Admin Interface

This is designed to allow Zentive’s admin to view and manage the subscription of the landscaping business to the web app and crew PWA.

Challenges

1) Sudden Feature Creep Nearing the Deadline

What I did

1) Tracked impacted modules – Since we’re nearing the project deadline when a feature was added, I identified which modules would need adjustments, to ensure that I could design efficiently. Alike with customer portal, I also focused on making the UI simple and reserving nice-to-have things for later.

2) Close collaboration with product owner and developers – Given the tight timeline,  I worked closely with the product owner to confirm new requirements and avoid missing any critical details. I also coordinated with developers to ensure that the updated components were feasible to implement quickly within the remaining sprint. 

final thoughts

This project helped me further understand the landscaping industry, from what they are to what they do. Working within a tight timeline taught me how to prioritize essential features, manage trade-offs, and maintain a user-centered approach even under pressure. It also strengthened my ability to collaborate closely with developers and stakeholders, ensuring that what we delivered was both functional and feasible.

discover more