Civica
Civica is an AI-powered legal app designed to help underprivileged women navigate complex legal challenges. It integrates an AI chatbot, document simplifier, and step-by-step guidance while connecting users to trusted resources like professionals and support groups.
"Civica empowers women to address their legal concerns confidently and take informed steps toward resolution."
Project roles
Frontend Developer | Graphic & UI/UX Designer
Timeline
September 2024 – December 2024
Software
Visual Studio Code, Expo, and GitHub
Figma, Photoshop, and InDesign
Skills
User Research, Persona Development, Visual Design Principles, Wireframing and Prototyping, and Usability Testing.
Why Civica Was Created
1 in 2
WOMEN
Reported experiencing harassment or sexual assault in the workplace.
85%
of vulnerable women are unable to access civil legal aid
77%
reach a crisis point before receiving any legal help.
These issues are common among women, very few apps currently address their needs. Civica offers three key features to help.
AI Chatbot
Provides Instant Help
Chat with the chatbot using voice or text commands for AI-powered legal advice, ensuring accessibility for everyone.
- Get Legal Advice in Multiple Languages
- Provide Step-By-Step Guidance
Document Simplifier
Simplifies Legal Jargon
Simplifies complex legal documents, making legal documents more accessible to users who might not be familiar with legal language.
- Get Document Interpretation with OpenAI
- Save Scanned Files and History
Support Group
Offers Comprehensive Legal Help
Access a wealth of legal resources, from professional advice to step-by-step guidance, ensuring users have the support needed to succeed.
- Access to Legal Document Templates
- Referral to Trusted Legal Professionals
Market & User Research
Civica team discovered through initial brainstorming and competitor research that Rise Women's Legal Centre and People's Law School provide single services, such as AI chatbot or legal resources. Civica can stand out in the market by offering three key app features: a chatbot, a document simplifier, and free support resources.
An immigration lawyer was interviewed, and seven representative cases were analyzed. Three cases were selected to develop a step-by-step guidance template: Employment Inequity, Driving Test Dispute, and Restraint Orders.
User Persona
The survey shows that most legal issues affect immigrants unfamiliar with laws and rights. They face complex processes, high costs, and long wait times.
The primary user is a single mother lacking financial support, and struggling to find help, while the secondary user is a high school student who fears confrontation and lack of legal support.
Design Process
Branding
Logo Design
Colors
Civica's color palette features a light and deep blue, symbolizing professionalism and seriousness. It includes both dark and light modes for accessibility, ensuring proper contrast for better visibility.
#313889
#0E121E
#909FF2
#66B2DA
#282834
#EAF0F6
Typography
Lexend is used for readability, screen legibility, and accessibility, ensuring a professional and user-friendly experience across all devices.
Lexend
Light
Regular
Bold
Wireframes & Prototyping
Low Fidelity
To ensure an intuitive user experience and a short learning curve, my team designed the main features to be directly accessible from the homepage of each navigation path. From there, users can seamlessly explore different features through dedicated pages.
The wireframe defined element positions, component types, and layout to ensure clear and easily accessible information.
High Fidelity
After completing the initial versions of our low-fi and high-fi prototypes, we conducted further surveys and usability tests to acquire our target audiences' feedback.
We discovered significant differences in user preferences regarding the mascot and design style. Additionally, users feel that the step-by-step guidelines lack visibility. Therefore, we conducted A/B testing on color preferences and the app's mascot while also carrying out usability testing.
Usability Testing
Four industry professionals and five participants were invited for usability testing.
Disruptive User Experience:
The navigation bar's scale-up animation distracts from critical information.
Confusing Navigation:
Step-by-step guidelines lack visibility and are hard to access.
Typography:
Text hierarchy is unclear with excessive bolding.
To maintain a serious tone, we decided to remove the mascot.
Improving User Experience:
Modified the navbar style to ensure that critical information is not obstructed.
Enhancing Navigation
Categorized and separated key features like Step by Step, Jargon Simplifier, and Doc Review to make them easier to find.
Optimizing Text Readability:
Improved font readability to ensure clarity and ease of reading.
Challenges
Adapting to Expo's new system required a long learning curve, especially in handling dark mode images and color transitions. Collaboration was challenging due to team members using different devices (Android and iOS). They required a responsive design that works seamlessly across both platforms.
In brochure design, bridging the gap like gamut and diecut registration between digital and print, particularly with diecuts, required bleed and position adjustments. Through discussions with a GCOMM student, I achieved a successful outcome.
Final Results
Civica's core values are accessible resources, trustworthy security, personalized guidance, supportive features, and informative legal resources.
These values overcome key legal barriers, such as:
- Understanding legal documents, lack of support, and complex legal processes.
- Usability testing refined functionality, accessibility, and design.
- Civica now provides intuitive features that empower women to confidently navigate legal challenges.
Promotional Materials
