ai-ethics-report
AI Ethics Report is a web tool that helps users explore and understand the ethical considerations of artificial intelligence. The goal was to make AI styems' ethics and impact easier to check and reflect on, especially for people building or using AI systems.This is my MSc project and thus it combines core lessons of the MSc courses, my experience and skills, and personal values in one place. I've always wanted to build something that doesn't just showcase code, but also creates awareness and impact. For me, it is more than a portfolio piece — it's a statement about how I see the future of technology: innovative, sustainable, and responsible.
Role
Full Stack Developer & UI/UX Designer
Duration
6 months
Category
Web Application
Client
BISM MSc Final Project
Links
Tech Stack
Next and Shadcn ui for consistent and easy UI implementation. Tailwind CSS is used for styling. Supabase for quick and easy database implementaion. The combination of these technologies results in a modern, responsive, and pretty intuitive web application.
React
Next.js
TypeScript
Tailwind CSSUX Research
Literature review on AI ethics frameworks (UNESCO, EU AI Act, IEEE standards)
Survey of 50+ AI practitioners about current ethics assessment tools
Competitive analysis of existing AI governance platforms
User interviews with AI developers and ethics officers
User Personas
Persona 1
AI Product Manager: Needs quick ethics compliance checks
Persona 2
Ethics Officer: Requires detailed reporting and tracking
Persona 3
Independent Researcher: Wants educational tools and resources
Problem Statement
"AI developers and organizations lack accessible, comprehensive tools to assess and document the ethical implications of their AI systems, leading to potential harm and regulatory non-compliance."
Design Goals
Make complex ethical frameworks understandable and actionable
Create a seamless evaluation workflow that doesn't interrupt development
Provide clear, exportable documentation for compliance
Build trust through transparency and educational content
Wireframes & Ideation
Low-fidelity sketches exploring assessment flow and navigation
Information architecture mapping ethical categories to user actions
Prototyping
Interactive Figma prototype with key user journeys
Usability testing prototype for assessment workflow
High-fidelity mockups for dashboard and reporting features
Key Features
Clear categories for AI ethics principles (fairness, accountability, transparency, etc.)
Interactive, mobile-friendly UI with dark mode
Check AI systems against UNESCO, EU AI criteria
Carbon impact calculator for AI models
Dashards to track scores over time
Export the report as PDF
User authentication and profiles
User Testing
Moderated usability sessions with 12 AI practitioners
A/B testing of assessment question formats
Accessibility testing with screen reader users
Design Iterations
Simplified assessment categories based on user confusion
Added progress indicators and save functionality
Redesigned results page for better comprehension
Improved mobile experience after testing feedback
Design Decisions
Used card-based layout to break down complex information into digestible sections
Implemented progressive disclosure to prevent cognitive overload
Chose warm, approachable colors to make ethics discussions feel less intimidating
Added visual progress indicators to maintain user engagement through long assessments
User Feedback
"'Finally, an ethics tool that doesn't feel like homework' - AI Product Manager"
"'The visual breakdown makes it much easier to explain to stakeholders' - Ethics Officer"
"'I learned things about AI ethics I didn't know before' - Junior Developer"
Accessibility Considerations
WCAG 2.1 AA compliance with keyboard navigation
High contrast mode for visually impaired users
Screen reader optimization with proper ARIA labels
Simplified language options for non-native English speakers
Challenges Faced
Implementing complex ethical standards as score systems
Creating a flexible validation system that works with dynamic form structures
Keeping the site engaging while text-heavy
Building report download as PDF
Solutions
Used React pdf library for generating downloadable reports
Implemented a schema-based validation system using Zod for type safety
Created a centralized state management system using Zustand for real-time updates
Applied virtualization techniques for handling large forms efficiently
Solutions
Used React pdf library for generating downloadable reports
Implemented a schema-based validation system using Zod for type safety
Created a centralized state management system using Zustand for real-time updates
Applied virtualization techniques for handling large forms efficiently
Lessons Learned
Phewww....It was a pretty big project considering all the research, survey, analysis and report writing leading to the web application as the final produt. But I learned a lot during the process. The AI Ethics Report connects closely with my MSc in Business Information Systems Management (BISM), as it brings together lessons from all four core modules. It taught me how to translate complex ethical frameworks into practical tools, balancing technical implementation with user experience. I learned the importance of clear communication, especially when dealing with abstract concepts like ethics. This project reinforced my belief that technology should serve society responsibly, and it showed me how developers can contribute to that vision through thoughtful design and implementation.
Design Insights
Complex topics require extra attention to information hierarchy and visual design
User testing early and often prevents major redesigns later
Accessibility isn't an afterthought—it improves usability for everyone
Educational content works best when integrated naturally into the workflow