01. Background
Civica is an idea by a team of eight women who recognized the urgent need for accessible legal support. With 1 in 2 women facing workplace harassment, 78.1% of intimate partner violence victims being women, and 85% of professionals reporting barriers to legal aid, the challenges were clear.
To best serve the target audience, Civica was created with the following core values:
Accessibleâ Free resources, simple navigation, multiple languages, and customizable accessibility settings.
Trustworthyâ Secure platform with two-factor authentication, emergency exit button, and data protection.
Guidingâ AI chatbot and step-by-step legal support for forms, appeals, and processes.
Supportiveâ Mental health resources, helplines, and built-in court date tracking.
Informativeâ Educational content on Family Law, Domestic Violence, Workplace Harassment, and more.
Unlike other platforms that only tackle general law in BC, Civica blends AI technology with a focus on womenâs legal struggles, bridging a critical gap in support.
02. User Research
To better understand the challenges and needs of the target audience, the team approached user research from multiple angles:
Interview with a lawyer specializing in assisting women in need.
User survey to identify pain points with legal aid apps, including design considerations.
Competitive analysis to evaluate existing solutions and uncover gaps.
This multi-faceted approach ensured Civica was built to address real womenâs needs effectively.
General Survey
Method
A survey with 20 participants was conducted to identify key challenges with legal aid and legal aid apps, focusing on frustrations and pain points.
Using insights from this survey, some possible features were considered to address these pain points. Pain points and concerns were also noted for UI design and development.
KEY CONCERNS FROM SURVEY
Confusing legal terminology and difficulty filling out documents correctly.
Lack of clear, step-by-step guides for legal procedures.
Strong interest in AI toolsâ70% found document scanning and jargon simplification helpful.
High costs of legal consultations and lawyers, adding financial strain.
Limited access to legal professionals, making it hard to get expert advice.
POSSIBLE SOLUTIONS FROM SURVEY
An AI-powered chatbot for quick legal questions, listing sources for the generated advice to provide credibility
Accurate templates to fill legal documents
Step-by-step legal guides to walk users through processes
Interview
Understanding the firsthand experiences of women facing legal challenges was crucial. However, finding individuals willing to share their stories proved difficult. Given that immigration and family law emerged as key concerns in the survey, an immigration lawyer who frequently works with women was interviewed. The lawyer provided insights into seven anonymous cases, offering valuable context on the struggles, needs, and common legal hurdles faced by this demographic. These case details helped refine Civicaâs approach to better support those in similar situations.
CASE 1
Workplace Exploitation and Unfamiliarity with Labour Laws
CASE 2
Unpaid Training and Exploitation (Grocery Store Case)
CASE 3
Driving Test and Insurance Exploitation (Driving Instructor Case)
CASE 4
Live-In Caregiver Harassment and Mental Health
CASE 5
Marriage Fraud and Financial Exploitation (PR Sponsorship)
CASE 6
Domestic Violence and Public Humiliation
CASE 7
Rental Harassment and Unsafe Living Conditions
POSSIBLE SOLUTIONS FROM INTERVIEW
Women-Centric AI chatbot: An AI assistant that offers quick answers tailored to womenâs legal and emotional challenges
Legal Aid for Women: Connections to female-focused legal services
Document Templates for Women: Pre-drafted forms to help women report violations, submit complaints, or file legal actions
Mental Health Support: Resources and services for emotional well-being, specifically addressing womenâs struggles with harassment, abuse, and exploitation
Tailored Step-by-Step Guides: Clear, personalized navigation through legal processes, designed for the unique challenges women face
Competitive Analysis
Eight direct and indirect competitors were analyzed to understand their target audiences, product strengths and weaknesses, and approach to UX, UI, and branding. While some leveraged AI, they did not specifically cater to women, while others focused on womenâs legal aid but lacked AI integration.
From this research, two main competitors stood out: Rise Womenâs Legal Centre, which offers the most similar services, and Peopleâs Law School, which incorporates an AI chatbot for legal assistance.
RESULTS
Identified areas that competitors overlooked such as a lack of AI-driven legal support for women specifically
Gained insights on how to position the brand
Identified opportunities to enhance accessibility, user experience, and service offerings
Personas
Using insights from the competitive analysis, interviews, and survey, two primary personas were developed to represent Civicaâs target audience, ensuring the app addresses their specific needs and challenges.
03. Content Strategy
Based on the potential features identified in the user research phase, the main features for Civica included: a chatbot for quick legal guidance, a document scanner to simplify legal jargon, step-by-step legal guides, and access to resources such as affordable or pro bono legal support, and mental health resources
Given the need for accessibility and discretion, Civica was designed as a mobile app. A smartphone allows users to take photos, scan documents, and access resources conveniently, which is especially crucial for women in vulnerable situations who may not have regular access to a computer. However, survey responses indicated a preference for reviewing legal documents on a desktop. To accommodate this, a web supplement was planned, enabling users to access saved files and continue their legal research on a computer when possible.
Site Map
04. Wireframing
Wireframes
Explore wireframe iterations showcased in the interactive Figma window below.
SPOTLIGHT
AI Chatbot Sketches to Final Version
Web Supplement Wireframes
05. Style Guide
Brand Colours
Civicaâs brand colours were chosen based on the General Survey results; the respondents associated black (56%) and blue (50%) with both justice, and professionalism. The colours were also chosen for high contrast and easy switching between light and dark modes.
Logo
Civicaâs logo depicts two interlocked figures forming adjacent hearts and supporting one another. This symbolizes the appâs commitment to both legal and emotional support. The design reflects unity, trust, and the compassionate assistance Civica aims to provide.
06. User Testing
Usability Test
Upon completion of the medium fidelity wireframes, four industry professionals (a UI Designer, two Senior Product Designers, and a Graphic Designer) were invited to test the prototype. The usability analysis revealed key areas for improvement in navigation, content clarity, and feature accessibility. These changes were applied in the high fidelity wireframes, where the app was heavily redesigned.
NAVIGATION
The tab bar is too dominant and should be removed from Onboarding
Key features like Document Scanner and Jargon Simplifier need greater visibility
SOLUTION
Redesign tab bar
Document Scanner and Jargon Simplifier were merged into âSimplifierâ feature
CONTENT & READABILITY
Inconsistent text hierarchy, excessive bolding, and slang reduce clarity.
Onboarding should highlight Civicaâs value upfront with clear navigation (Back, Next, Skip).
SOLUTION
Text hierarchy was updated to follow strict sizing conventions, and copywriting was reviewed for clarity
Added clear navigation for onboarding
FEATURES & ADJUSTMENTS
Document Scanning is too buriedâneeds to be prioritized as a main feature.
AI Chatbot should have a disclaimer popup and go straight to chat.
SOLUTION
Document Scanner was renamed as the Simplifier feature and can be found on the tab bar
Popup disclaimers were added and redundancies were removed
OVERALL LOOK
Ms. Civica mascot is too lighthearted for the severity of the appâs context
Colours are too playful
SOLUTION
Ms. Civica mascot was removed
Colour palette was redesigned for simplicity and consistency
Robustness Test
Upon completion of the high fidelity wireframes, three participants were invited to test the prototype. The robustness analysis uncovered improvements that could be made in the navigation, feature behavior, and accessibility. These changes were taken into consideration and amended in the high fidelity wireframe as well as the coded prototype.
NAVIGATION
The hamburger menu should slide out consistently or be aligned with the profile photo.
SOLUTION
Hamburger menu was repositioned and headers were coded with more consistency.
ACTION BUTTONS
Users did not know what âBook an Appointmentâ or âContactâ did
SOLUTION
âBook and Appointmentâ and âContactâ were re-evaluated as features and subsequently removed to prevent unnecessary confusion
INFORMATION ACCURACY
Incorrect details were found for step-by-step guides, lawyers, and support groups
SOLUTION
Inconsistencies in the code were removed and populated with the correct information
07. Coding & Development
Expo and React Native were chosen for their quick development and cross-platform capabilities, allowing for faster deployment. To streamline prototyping and sandboxing, React Native Paper was used as the UI framework. Additionally, the Atomic Design Model was applied to create reusable components, which helped speed up development and ensure consistency throughout the app.
Development Challenges
PROBLEM
Due to tight deadlines, app design was not finalized before coding started.
Redesigning required recoding, adding significant effort and time constraints.
SOLUTION
Agile adjustments during development, and use of React Native Paper UI Library allowed for iterative improvements.
PROBLEM
Team members had limited experience with Expo and backend technologies.
Lacked backend developers, requiring frontend devs to learn backend skills.
SOLUTION
Focused on learning while coding and leveraged OpenAIâs resources for a functional chatbot prototype.
PROBLEM
Difficulty in implementing a custom LLM due to limited resources and expertise.
SOLUTION
Chose OpenAI API instead for its reliability and documentation.
Used the chat/completions endpoint to handle user queries.
Solved chat memory issues by passing the chat history as an array.
PROBLEM
Required optical character recognition (OCR) and document simplification.
SOLUTION
Used Google Vision for OCR (to extract text from images) and OpenAI for summarization.
Stored data securely using Firebase.
PROBLEM
Dark mode was not considered in the first brand colour iterations, making it harder to integrate later.
SOLUTION
Chose proper color palettes and leveraged React Native Paperâs theme-switching capabilities.
PROBLEM
Existing speech-to-text plugins required the app to be published in an EAS (Expo Application Services) build to function properly.
SOLUTION
Worked around this by saving audio files locally, sending them to OpenAI for transcription, and integrating the text into chat history.
PROBLEM
Could not use existing APIs for legal content due to its specificity.
SOLUTION
Manually gathered content from lawyers and legal websites like BC and Canadian law resources.
PROBLEM
Saved information needed to be accessible on desktop.
SOLUTION
Created a web app connected to Firebase to sync data from the mobile app.
The final app serves as a functional proof of concept, featuring a chatbot powered by OpenAI, document simplification with Google Vision and OpenAI, as well as speech-to-text and dark mode capabilities. Next steps would include working with backend developers to build a custom LLM for enhanced security and functionality.
08. Marketing & Business Strategy
Promotional Video
The video was first drafted with Storyboarder, then edited with Adobe Premiere Pro.
Blog
A blog made with Next.js and was created to document the weekly progress for Civica.
Social Media
To promote Civica ahead of the Digital Design and Development 2024 Annual Student Design & Technology Showcase, an Instagram account was created. Content was planned and posted in the days leading up to the event.
Printed Materials
Business cards, table tents, brochures, posters, and buttons were designed and printed for the showcase.
Potential Business Strategy
Civica aims to be an affordable tool to support our target demographic while sustaining itself as a business. To fund our venture, we would explore:
Corporate Sponsorships: Partnering with socially responsible companies committed to diversity, inclusion, or womenâs empowerment.
Government Grants: Securing funding through initiatives like the Womenâs Program to support our mission.
Investors and Venture Capital: Attracting funding from individuals and firms that back social-impact tech.
Law Firm Partnerships: Collaborating with law firms to promote their services on our platform for a small fee.
08. Final Product
Letâs bring your ideas to life!
