UI DESIGN & STRATEGY - FRONT END DEVELOPMENT
Company - Accenture
Client - AT&T
My role - Designed, developed, and tested user-centric functionalities while collaborating with cross-functional teams and supporting production deployments.
Tools - Figma, VS code, IntelliJ, JIRA
Timeline - 3 Years 5 Months
Project Overview
The AT&T Landlord Portal is designed for property owners and managers to manage their relationship with AT&T regarding network equipment installations, lease agreements, and site management. It allows landlords to access lease details, submit inquiries and manage property-related tasks efficiently.
The platform streamlines communication between AT&T and property managers, ensuring smooth coordination for network infrastructure needs.
What was implemented?
Lease commencement, renewal tracking, document uploads and email templates (notifying landlords about lease expirations and rental options).
How role-based access improved?
By designing custom dashboards tailored to landlords, tenants, and managers, ensuring each role had access to the necessary actions while maintaining security and usability.
Why was the UI redesigned?
Clients found the old design outdated, so we refined
pop-ups, tables, typography, colors, and icons for better readability and consistency.
What UI optimizations were made?
By refactoring components and reducing API calls.
Transforming Lease Management: Our Approach
We streamlined lease management for AT&T landlords and tenants, reducing manual interventions by automating key processes, improving role-based access, and optimizing UI performance for faster load times. To enhance communication and efficiency, we also implemented automated email templates.
Problem Statement
The Business problem - Managing leases across multiple AT&T properties was inefficient. Landlords faced challenges commencing lease and tracking lease, tenants found the forms complex, and managers lacked real-time visibility. The existing system had outdated UI components and limited role-based access, leading to errors and delays.
01
Our Primary users -
Landlords: Needed clear lease related features and automated notifications.
Tenants: Required an easier way to access and submit lease-related forms.
AT&T Managers: Needed real-time insights and better control over lease operations.
02
The Need for a Redesign - The existing design was outdated and visually unappealing, making navigation cumbersome and reducing efficiency in lease management. Users struggled with unclear confirmation messages, poor error readability, and inconsistent UI elements.
03
User Research - Understanding Users & Identifying Gaps
This section highlights the specific pain points faced by different user roles and Identifying Gaps.
Design strategy
Role-Based Navigation for Enhanced User Experience
To manage diverse user interactions within the AT&T Landlord Portal, a Role-Based User Flow was created. This visual guide maps pathways for roles like Landlords, Tenants, Property Managers, and Admins, each assigned specific screens/forms and tasks with respect to lease. As the platform expanded with additional users and features, the number of role-specific screens increased, ensuring specified functionality for each user type.
Design Strategy
Role-Specific Dashboards - Each role sees only relevant tasks, reducing clutter and cognitive load
Dynamic UI Components - Forms, buttons, and navigation adjust based on user roles, ensuring access to the right actions
Guided Workflows - Users are led step-by-step through lease actions based on their role, minimizing errors
Smart Alerts & Notifications - Timely reminders (e.g., lease approvals for managers, expirations for landlords) prompt necessary actions
Scalable UI Components - Reusable, modular elements (e.g., adaptive tables, expandable sections) ensure easy growth and updates
Developer Approach
Role-Specific Dashboards - Used JWT or API responses to retrieve user roles upon login
Conditional UI Components - Used restricted actions using disabled states / backend role verification
Guided Navigation - Implemented step-by-step forms that displayed relevant fields based on the user’s progress.
Smart Alerts & Notifications - Used polling APIs to fetch real-time lease updates
Scalable UI Components - Parent-child component structure for better maintainability
Lease Commencement
Email Notification
In the AT&T Landlord Portal, the lease process ensures seamless management. The landlord selects a property, fills in details, and completes mandatory fields before submitting. The tenant then reviews, signs, and forwards it for approval.
The manager either:
✔Approves → Notifies the tenant and landlord, finalizing the lease with an email.
✗ Rejects → Sends it back for corrections.
Once active, leases are categorized as Active, Renewed, Expired, or Terminated and are displayed in a searchable and filterable table.
While the lease creation feature existed before I joined the project, I worked on key modifications and enhancements like Email Notifications. The flowchart is a simplified view, as the system includes many additional features.
The process begins with two mandatory fields: Lease Number and Property Details. Only after selecting these can the user proceed.
Next, the user fills in key financial details like payment amount, renewal dates, and can either manually enter details or upload a document to auto-fill fields.
In the Commencement Details form, selecting one of three radio button options dynamically displays relevant fields. This feature was added as the commencement details had more number of fields and details.
After completing additional payment and lease-related forms, a confirmation pop-up ensures all details are verified before submission.
This is a visual representation of role-specific features and actions, streamlining the process for different users.
Landlord
Tenant
Manager
Subject: Important Lease Notification – Action Required
Dear [Recipient Name],
We hope you're doing well. This is a notification regarding [Lease Name/Property Name], associated with your account.
Lease Status: [Active/Expiring Soon/Expired]
Key Date: [Lease Start/Expiration/Renewal Date]
Next Steps: [Renew Lease / Review Terms / Make a Payment]
Please take the necessary action at your earliest convenience. If you have any questions, feel free to reach out.
Best regards,
[Company Name]
This email started as a basic template, but as features evolved, the templates became more tailored to specific functionalities. Additional enhancements, such as automatically attaching relevant documents, were later implemented.
40% reduction in missed Lease Renewals
Improved responses by
2-3hrs Avg
Redesigned Style Guide
The redesign introduced a structured Style Guide to ensure consistency, usability, and brand alignment.
This style guide served as the foundation for redesigning various components across the platform, ensuring a seamless user experience.
Agile Development & Iterative Testing Workflow
Before development, we followed a detailed scripted test outline with clear instructions to ensure comprehensive testing. Onsite users participated in testing the design firsthand, offering valuable feedback that guided improvements.
During the Development Phase, I developed the UI with Angular, where I created structured pages and reusable components to ensure scalability. To have consistent look & feel across the project, I designed dedicated CSS files that enhanced the visual appeal of the interface.
For data integration, I initially worked with JSON files to validate UI behavior before connecting to live data, to ensure that everything was functioning correctly before integrating with the API, which fetched real-time data from the database.
After completing the development and integration steps, the code was deployed to the main branch. Post-deployment testing played a crucial role in ensuring the system’s stability and performance.
To maintain high-quality standards, iterative testing was conducted, refining the design and functionality at each stage. Finally, the feature underwent rigorous testing by Product Managers, ensuring it aligned with goals and delivered a seamless user experience.
Actively supported production deployments on call and performing thorough testing. In the event of functionality issues, promptly implemented & deployed immediate fixes. This proactive approach resulted in a 30% improvement in operational efficiency.
Key Challenges & Solutions
Time Constraints on Feature Implementation - Rapid development needed while ensuring iterative testing. Hence, we prioritized features using an agile approach, conducting quick design & development iterations based on feedback.
Iterative Testing Complexity - Features required multiple refinement cycles before finalization. Therefore, used prototype testing with real users, collected feedback at each iteration for incremental improvements.
Data-Driven Decision Making – Design choices was aligned with user needs and business goals by conducting usability testing and analyzing key performance metrics before finalizing UI updates.
Handling Large Data Sets – Lease data needed to load efficiently without performance issues. Used lazy loading and optimized API calls to improve performance.
Testing & Deployment Efficiency – Prevented production issues while maintaining deployment speed by following unit testing, integration testing, and manual UAT, ensuring a smooth transition to production.
Reflection
