Preethi Priya
Work Resume About Contact
LMPS
Project Overview Role

LMPS is a web based Network Lease Management & Payment System that enables the consolidation of real estate operations and management. This is a primary system to Manage the Mobility Cell Site Leases (Tower, Ground, Equipment etc.). These leases are Account Payables and Receivables in nature. It is used for TOWER real estate operations and management. User can create lease and process payment for Lease Rentals / Onetime Payment/Recurring Payment. LMPS is supporting Market to digitally manage the whole lease and payment management lifecycle.

Product Owner

Product Strategy, User Research, Analysis, Information Architecture, Interaction Design, Testing, Team Management

February 2020 - January 2021

Disclaimer - Due to strict policies in the working environment, I am able to share only the few paper sketches, wireframes and developed screens. Due to the same the actual company name is amended too.

Understanding the Problem

This project was taken over from other company as part of a Deal.

  • User experiences were inconsistent and varying in quality across the application!
  • Everything from the Dashboard page to each module used different style guide which resulted in a confusing and fragmented experience.
  • In some cases, design patterns were not implemented as well as they could have been, which led to frustrated customers

In order for LMPS to present a cohesive image and rapidly overhaul its web experiences, we needed a design system that documented all the UI patterns and guiding principles in a format accessible to the design & engineering teams.

During our Interactions with the client and actual users we also understood that they were not happy with the existing user experience of the application.


Research Phase

During the research phase, I sought to understand the existing application. My intention for the research phase was to uncover the needs and frustrations of the target users which will help me to better understand how to appeal to them. Collected the required information to understand the User pain points of the application and their expectations.

Understanding User Problems -

When we were taking over this project from a different company, client told us that the users are not happy with the UI.

Conducted User Interviews to - We invited 10 users for user interviews

  1. Define user’s common behavior while using the web application
  2. Determine what users like and dislike about the web application

After completing the user interviews, we had around 40+ issues or ideas or expectations. In order to conduct affinity mapping, I included (designers, researchers, product owners, solution architects, and engineering manager) to conduct affinity mapping with my team to synthesise the pains identified. So, this was an opportunity for us to work hand in hand, since the whole team were working together for the first time, each one of us had different experiences, confusion and expectations. We grouped these problems under common themes and features in the application. We had to conduct this, since it was pandemic. We finished this task in a week.

Affinity Mapping

At the end of this activity, with the finalised list, I worked on the Severity Framework which is a data-driven approach, which will enable me to list usability issues in order of priority. The framework helps to identify the severity score of a usability issue based on the following three variables:

  1. Task criticality - how important is the task to the user? (1 = low, 5 = critical)
  2. Impact - how much of an impact does this issue have on the user's task? (1 = suggestion, 5 = blocker)
  3. Frequency (%) - how many times does this come up out of total participants? eg: 6 occurances / total 10 users i.e. 6 / 10 x 100 = 60%

Task criticality x impact x frequency = Severity
For Eg: Dashboard Epic = 4 x 3 x 60% = 7.2 Severity

Issue Prioritisation


Prioritisation of Issues

I categorised these problems into broader Epics to provide the Product managers and engineers with visibility into the key areas of the platform that needed to be addressed from a usability standpoint. This not only helped to prioritise usability issues in order of need but also helped to shape the product roadmap for the quarter.

Product, Design and Engineering teams came to the conclusion that the first epic we would prioritise would be Lease Summary & then Search screen due to its severity score, UX and engineering efforts required to rebuild it.

Epics


Wireframing the Solution

Based on the above problems identified, I worked towards addressing these pains by coming up with potential solutions:

  1. Reducing the number of steps to minimise time for a task completion
  2. Surfacing the mandatory fields and enabling the Call to Action buttons to show error validation
  3. Establishing clearer visual form hierarchy by grouping related fields
  4. The lack of design guidelines, I had to come up with a standardised styling and UI pattern for the application
  5. I quickly mocked up some basic wireframes to gather feedback from Product, Engineering and the users on the overall layout and structure of the main screens.

Actual screens of the LMPS Web Application

LMPS Actual screen 1
Actual Lease Search Screen

Actual LMPS Screen 2
Actual Lease Information Screen

Actual Screen 3
Actual Dashboard Screen

Actual Screen 4
Actual Payment Approval Screen

Recommended Screens -

Recommended LEase Search Screen Lease Search Screen now has the following -
  • Search Table now occupies the whole page as per the user screens resolution
  • Leases will be highlighted as per their status, which will now enable the users take action without further filtering
  • Flagging option was provided to prioritise the leases
  • As the user hovers, that particular row gets highlighted
Recommended LEase Info Screen

Lease Summary Page now has the following -

  • Lease Summary Details are highlighted with the Lease Status Background color
  • Expand All option provided, on one click user can view all the sub tab information
  • Sub Tabs which doesn’t have information is depicted with lighter colors
  • Imp. buttons are provided on Sub tabs, which will enable the user to take an action with lesser clicks
Payment Approval Screen

Payment Approval Screen now has the following -

  • Summary of the Dollar Ranges visibility is clean.
  • Approval Slider, now provided clear insights or info on what user needs to know and accordingly take action.
Recommended Dashboard Screen

Dashboard Screen now provides the following -

  • Insights to each graph in the form of text, so that the user can easily understand and takeaction if at all they need to
  • Share Icon has options to send the info through email or on the official project chat application.

Validating the Solution

I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote a script including the 4 scenarios by asking the user -

  1. to access the lease screen and take action on the Expired Leases
  2. to access the lease summary screen and amend any info if required
  3. to approve the lease amount for a active lease from the Payment Approval Screen
  4. to access the dashboard screen and take actions

During the session, I observed how they interacted with different screems. The usability session revealed that

  1. On Lease Search Screen, it was less arduous to access the leases, because of the status background colors, on the look of it they were able to take actions with ease.
  2. On Lease Summary Screen, users expressed that the expand all option made their life easier, and with the required buttons on the tabs enabled them to take quick action in lesser clicks. Not to mention that, they liked the disabled text color representation for the tabs which had no info.
  3. On Payment Approval Screen, it became easier for users to quickly understand the visual cues and info provided to take action, comparitive to the time taken on the prior screens
  4. On Dashboard Screen, users were able to understand about what the graphs were representing, since the insights were displayed on the graph in simple text. Share Icon brought cheer on their face, since on a single click they were now able to share the reports with Senior Management or teams

Design Guidelines

Finally, also provided design guidelines too which was an immediate requirement!

Using the client experience overhaul to drive design system creation and testing. While almost every LMPS web experience was due for a UX and visual overhaul, the client experience was currently in the midst of a complete redesign and would be applying the design system first. Telecom Company has their own design system, however was not used, hence started structuring LMPS application around this existing design system . To optimize for speed, I documented all the patterns required to fill the wireframes for the client experience overhaul, distributed the work across the 4 members of the design team. We completed the work in less than 2 weeks and handed off the UI patterns to the engineering team.

DesignGuidelines


Developing the Design
We created high fidelity mockups in Adobe XD. I worked very closely with the Front End team to spec out any missing interactions that were not covered in the high fidelity mockups. I conducted a UX review of each front-end screen that was implemented to ensure it was aligned with the designs before it went live.
The Results & Key Takeaways

Since the implementation of the UX recommendations for the important modules, we have seen a significant decrease in the number of complaints lodged through the service desk. Additionally, I have received positive feedback -

  • from users about the simplified UI of the Lease Search Screen, saving them a large proportion of their time.
  • from the engineering team that the customised UI guideline document made their life easier, in any point of confusion about what kind of component has to be use, they now refer to this document.

Some key takeaways from this project are:

  1. Create a strategic plan to launch an MVP. This helps deal with out-of-scope requests that could potentially derail the project and helps deliver a quality product in time.
  2. User testing doesn't end after development. Design is a constant iteration of improving the experience for the end user. Always find ways to collect and listen to your user's feedback.
  3. Involve engineering upfront. This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform your design strategy.
More Projects
 
Let's connect
Get in touch for opportunities or just to say hi!

Back To Top

Copyright © Preethi Priya