"Help your vendors stay current and connected with the RealPage Vendor Mobile App"
Vendor Portal
Sector
Real-Estate
Tools Used
Figma | Miro | Microsoft Office | Playbook UX
My Role
Requirement Gathering
Competitive analysis
Customer Journey Map
User Scenarios
User Personas
Research Synthesis
Information Architecture
Wireframing
Prototyping
Collaboration
Delivery
Project Brief
Navigating the complex landscape of compliance and vendor management- a sleek, user-friendly interface that empowers stakeholders to seamlessly oversee vendor credentialing, streamline processes and documentation, and enhance accountability.
My Design Process
Design Timeline
The design process spanned approximately four months, encompassing thorough steps that included extensive research, testing, collaborative efforts, and feedback loops.
Design Framework
My Vision as a Designer:
Ensuring that the design process is efficient, impactful, and validated by user testing before any pixel is placed on the screen.
​
Design Process Requirements:
The flexibility to test hypotheses and designs, iterate, refine, and, when necessary, completely reimagine solutions.
Problem with the Double Diamond Framework:
-
It may not align seamlessly with the fast-paced nature of corporate environments companies often prioritize quick market launches.
-
Often falls short of providing the necessary space and time for these crucial iterative processes.
The New Approach: " A Triple Diamond "​
-
Concept Design iteration -- Meticulously tested them (through usability testing, surveys, low-fidelity prototypes, and connecting with users and stakeholders).
-
Gathered evidence indicating a positive trajectory -- Built a proof of concept and evolved from there.
-
The design was refined and adjusted while maintaining continuous testing.
-
Business requirements and user insights informed and guided design decisions.
-
Every decision was grounded in data, eliminating randomness or reliance on personal preference -- ensuring sufficient evidence to back up and defend design choices.
Discovery Research
The Research in the discovery phase was done by two methods:
1. Desktop Research
Aim of the Research:
Understand Business Goals
Align Stakeholders Needs
Current Customer Journey
Research Process:
Since the web customer profile team and research team had already conducted extensive research, I leveraged this information to formulate requirements.
Usability Insights from the existing Web Portal
Stakeholders feedback and recommendations
Current Product Flow gathered from product team
2. Vendor Survey Research
Aim of the Research
User Pain Points
Challenges
What is working -What is not?
Research Process:
Worked closely with the research team to recruit participants and carry out user research, yielding significant insights that led subsequent design phases.
Tool: Optimal Workshop
Mixed Method Survey
47 Participants
Sample : roles that represent vendor ecosystem
Problem Statement
-
To design the Vendor mobile interface of the Vendor Credentialing Portal aimed to streamline vendor's onboarding process, enabling them to register and connect with Property Management Companies (PMCs) i.e. their clients.
​​
-
The portal also facilitates document upload and verification and manages subscriptions and payments for vendors, enhancing their engagement and operational efficiency.
Key Insights & Scope
Stakeholders
The strategic desktop exploration helped to identify and understand key individuals or groups who will influence or be affected by my project, aiming to align their needs and expectations with the project goals.
Use app to get onboarded
Provides support to the Users
Connect with the Vendors for business
Document verification & assistance
User Persona
First Categorisation:
-
Leveraged the four Vendor Persona developed by the unified UX/UI team based on the number of properties the vendors catered to.
-
These personas guided major design decisions and ensured our project features aligned closely with our target users' needs and preferences.
National Size Vendor
Large Size Vendor
Medium Size Vendor
Small Size Vendor
Second Categorisation:
-
Further investigation into the user base led to uncovering a new categorization of vendors, differentiated by their level of exposure to our products or the registered Property Management Companies (PMCs).
-
This discovery guided in designing the process flows of the Vendors.
Pain-Points & Needs
Delineating Pain-Points:
-
The first step was to list down pain points from the research insights.
-
Then the pain points were categorized based on the value proposition.
-
They were further segregated based on 5 modules: Onboarding, Adding Clients, Documentation, Payments, and Profile, thus helping in chunking down the design process.
Based on value proposition
Based on the 5 modules
Immediate Next Steps
Aligned stakeholder expectations with user needs, setting the stage for defining the design team's next steps. This crucial phase transitioned us from understanding requirements to actionable design, ensuring our path forward directly addressed our project's core objectives and user requirements.
'Leveraging what worked earlier' from the Vendor Credentialing Website and the mobile features of other products, ensuring that the technical requirements remained feasible.
1
'Collaborate' with the product, research, and development teams throughout the subsequent design phases, marked by continuous iterative & collaborative workshops.
3
Divide the entire project into 'smaller modules' and approach each modules in close alignment with both stakeholders expectations and 'user needs' gathered from the research insights.
2
Work closely with research team to 'gather vendor's feedback' on the proposed flow and the early design. And update the designs based on user feedbacks.
4
Features Brainstorming
Feature Ideation
This was an intra-team collaboration process. The ideation was done against the identified pain points basis the modules viz onboarding, client connect, documentation, payments & profile.
User scenarios and scenario-based customer journey maps were used within the team and across teams, to better understand the flow of the users.
-
The focus of brainstorming - "Value Proposition"
-
Method: "How might we?" Questions
Ideate Against Pain points
-
To maintain design focus across the team
-
To guide product development and strategy
User Sceanrios & Journey Maps
Feature Prioritisation
This required the extensive involvement of the cross-functional teams.
A feature comparison table helped to delineate & leverage the features existing and working well in other products. Prioritization of the rest of the features was done based on the value & complexity of the features.
-
To find out common & usable existing features in the other products.
-
Rest of the features were prioritised on the value complexity matrix
Feature Comparison Table
Information Structure
To ensure intuitive navigation and meaningful interactions, the user flows and information architecture was meticulously crafted based on extensive feedback from the Product & Research team.
This process involved collaborative iteration to align the product's structure with user expectations and needs, facilitating a seamless user experience.
User Flows
Created based on the level of exposure of the user group to our existing products i.e Completely New, New & Existing Vendors
1
Information Architecture
The 5 modules were the base of the Information Architecture. They encompassed most of the user's issues and also the company's value propositions.
2
Design Concept
Wireframes & Rough Designs
Wireframes and rough designs were deployed to create a tangible visual representation of the ideas early on. This enabled quick iteration, identification of potential problems, and gathering of feedback from team members and stakeholders, leading to clearer communication and alignment on the final product vision.
Atomic Design Framework
Despite the universal Design System being implemented across all products within Realpage and aligning with the initial stages of the Atomic Design Framework, I advocate for a similar approach to crafting designs for each specific product. Therefore, my approach to high-fidelity design involved:
-
Dividing the entire app experience into 5 user flows viz. Onboarding, Client Flow, Documents Flow, Payment Flow & Profile Flows
-
Creating Master Components at each stage and for all four flows after obtaining final design approvals.
Flow-wise Master Components
Design Divided into 4 Major Flows
Final Designs
After multiple iterations and collaboration at various stages, 350+ screens were meticulously crafted. The core value propositions were the focus, seamlessly aligning the designs and features with user needs and business objectives while navigating technological constraints. Some of the screens are shown below:
Carousel- Marketing Requirement
Bottom Menu for easy access of major functions
Status Tags - To let Vendors know whether they are enrolled/approved etc with a property/ PMC/ both
Cards with clickable links: To let Vendors know the payment status with a Client (PMC)
Information bar to keep Vendors informed about the payment status with each PMC
The cards with clickable link let the Vendors know whether a PMC is linkable or not
Easy to accept or reject invitation card to be updated about a PMC's invite
Toast messages to keep them updated about the actions performed.
Steppers- To help the vendors keep a track of the step they are in a process
Clear CTAs with proper heirarchy to serve various functions of the process
Status Tags - To let Vendors know whether the status of their documents.
Multiple options to upload documents
Tracker for Payment History
Multi-select Payments for bulk payments
Multiple promotional codes applied according to the plan/plans selected
Detailed payment information card
Multiple mode of payments
Multiple options to enter card details
Design Alterations - Usability Testing
After completing usability testing for all flows, only minor design adjustments were necessary. The earlier adoption of an iterative design process ensured that no significant changes were required.
Add Another Document Button
Highlights on Document to view area where action is required
information icons and information screens to more about the payment plan
Challenges & Learnings
Collaboration in Cross -Functional Teams
Understand Existing Resources
- Technological Limitations
- Inter-linked Processes
​
Communication & Collaboration
- With Seniors for assistance
- With Product & BAs to
understand limitations & Scope
Empathetic Approach
- Bring Proof of Concept
- Leverage Existing Knowledge
- Referring to PRD in design discussions and aligning with business goals and initiatives
1
Understanding the requirements of an Enterprise Product
​
Addressing the issue of scalability
- Modular Components - reuse them in designs
- Designing for distributed systems- maintaining both consistency as well as individuality of the products.
Ensuring Smooth Integration
- consider interoperability, compatibility, and ease of integration when designing user interfaces and APIs
-standardized design system
-collaborating with developers
​
Provide customization for users:
-granular permission controls and access levels to regulate customization options based on user roles and permissions
cohesive visual language, typography, and branding elements across customizable UI components to create a unified user experience
2
PROJECTS
RESPONSIVE WEBSITE-MOBILE DESIGN
Wayloader
Coming Soon
The marketing website redesign aimed to increase enrollment for our BIM product with intuitive navigation and location-based technology.
MOBILE APP DESIGN
MySuccess
A digital product catering to the needs of competitive exam aspirants intended to empower them in the digital era.
