Vakeel Online is a Legal Social Network & Marketplace platform available on Web and Mobile. It is providing Pakistani people access to expert and professional lawyers. Using Vakeel Online, you can post your legal queries anonymously, connect with lawyers through private chats, build your network, join as a lawyer or regular user, and much more.
250k+
Questions Asked
80k+
Users
10M+
Social Media outreach
150k+
Discussions
Role
Co-Founder
Product UI/UX Design
Product Strategy
Developer
Year
2020 – 2022
Tools & Methods
User Interviews
Figma, XD
Wireframing, Journey Mapping
Prototyping
MERN Stack
React Native
AWS
Next.js, Vercel, Netlify
Press
🤕 The Problem
Traditional practices and a lack of centralized platforms restrict access to reliable legal services in Pakistan, affecting both the public and legal professionals.
- Limited Legal Awareness: Despite a population of 231 million, a significant number of Pakistanis lack adequate access to legal information and services.
- Reference-Based Hiring: The prevailing system predominantly relies on references for hiring lawyers, making it challenging for emerging lawyers to establish themselves and find clients.
- Lack of Centralized Platforms: There is an absence of a unified platform where individuals can seek genuine legal advice, and where lawyers can showcase their expertise and connect with potential clients.
🤔 The Solution
Vakeel Online introduces a transformative approach to Pakistan’s legal sector. By marrying technology with trust, it offers a user-friendly platform where individuals can find and interact with legal professionals, and lawyers can showcase their expertise, ensuring that legal services are accessible and transparent for all.
- Centralized Platform: Streamlines the connection between the public and legal professionals, ensuring easier access to reliable legal services.
- Transparent Evaluations: Offers user reviews and lawyer qualifications, allowing individuals to make informed decisions.
- Empowerment for Lawyers: Provides a space for emerging and seasoned lawyers to build their presence, share insights, and serve the community.
🤓 The Role I played
As a co-founding Product Design lead of Vakeel Online and a law graduate, my influence was pervasive across every facet of the platform. My leadership spanned from design, strategy to development. A significant part of my contribution was designing the end-to-end user experience, from conceptualizing wireframes to designing interactive prototypes and finalizing user interfaces. Beyond the technical, I actively immersed myself in the field, conducting user interviews, arranging and presenting our platform at conferences, and fostering relationships with stakeholders.
Guiding a dynamic team of designers and developers, I ensured our collective efforts culminated in a platform that addressed the needs of lawyers and the public alike. Through our endeavours, we’ve paved the way for a more transparent and trustworthy legal landscape in Pakistan and experienced exponential growth and outreach.
📝 The Process
I use the Double Diamond design process in my work, but with a twist. Before diving in, I start with a “Vision Definition Phase.” This step helps me clearly understand the idea first. Then, I follow the usual stages of the Double Diamond. By adding this phase, I make sure every design aligns with the main idea from the start. It streamlines the whole process, making it more efficient and focused.
01. Discover
Interviews, Research & Competitor Analysis
02. Define
Problem Statement, User Stories, Feature Mapping
03.
Ideate
LOFI Wireframe, User Testing & Present to stakeholders
04. Implement
Hi-Fi Design & Development
🧐 User Research
Vakeel Online required a deep understanding of both lawyers and potential users seeking legal help, most of them were not tech-savvy. In the span of 2 years, we carried out comprehensive user research, surveys, usability tests, data analysis and interviews with over 200 lawyers and 500 potential users. The findings were insightful and helped me continuously experiment with new features and address the pain points.
80% of lawyers were keen on digitizing their services if it meant reaching a wider client base, while a staggering 90% of potential users expressed the need for a convenient, anonymous platform to connect with legal professionals.
✅ Success Metrics
Post-launch, Vakeel Online’s reception was beyond our expectations. User satisfaction levels hit a commendable 93%, indicating a successful match between user needs and platform features. The most rewarding figure was the 70% rise in legal query postings within the first month, underscoring the effectiveness of our anonymous query feature. Additionally, our user base experienced a 115% growth in the first two months alone. On the lawyers’ side, a significant 60% reported an increased client reach, proving Vakeel Online’s promise of digital expansion.
🧭 User Journey Mapping
This User Journey map reminds me of how countless hours were spent on research and experimenting to design this route which turned out to be a huge success!
📲 Mobile Patterns
A preview of the mobile app design and key workflows like the signup, inbox chat, questions and answers, community discussions, and newsfeed.
👍 Simplifying Complexity
Over the years, the platform went through many transformations with the sole objective of simplifying the user experience. I played a key role in these transformations and the platform achieved unexpected growth. Here are some examples of these transformations.
Move with slider right or left to view screen comparison.
🌁 Preview of Key Workflows
Preview through different workflows of the platform ranging from chats, posts, and Q&A to lawyer profiles.
⚙️ Admin Dashboard
Preview of Admin Dashboard screens used to moderate, manage the platform and generate real-time data reports.
▶️ Figma Prototypes
Presented Prototypes to users for testing and stakeholders for feedback and growth strategy.
Color & material
We carefully selected a color scheme of black, school bus yellow, and tory blue. Black, being a color associated with authority and seriousness, set the tone for the professional legal setting. The tory blue was incorporated to add trust and reliability, while the school bus yellow, a color often associated with caution and alertness, was chosen to evoke a sense of attentiveness and focus. Together, these colors fostered an environment of credibility.
Black
#131313
School Bus Yellow
#00BA52
Tory Blue
#E5E5E5
Accessible UX
Creating Universally Accessible Experiences
Accessibility isn’t an afterthought in my designs, but a prerequisite. I always consider how to make my work accessible and enjoyable for everyone.