Project Details | Contributions | Deliverables | Future Goals | Key Takeaways | Acknowledgements
FOSSology is a powerful tool, but its interface doesn’t fully reflect its strengths. Navigation is unintuitive, tasks take longer than needed, and the visual system lacks consistency. My proposal focused on redesigning the interface with usability and accessibility at its core, while also ensuring that components are lightweight and not code-heavy, making them easier for developers to implement and maintain.
To address these challenges, the project began with evaluating the current interface through cognitive testing, heuristic analysis, and accessibility checks. User needs and pain points were then mapped to define redesign requirements, which guided the creation of workflows and high-fidelity mockups reviewed with stakeholders. Alongside this, a design system was established with standardized styles and reusable, lightweight components to ensure consistency, scalability, and ease of contribution.
The goal of this project was not just to modernize the look, but to make FOSSology genuinely easier to use, smoother navigation, reduced cognitive load, and better accessibility across user groups. A cleaner interface and streamlined workflows will help users adopt the tool more easily, while the design system ensures consistency, making it simpler for contributors to maintain and extend for the community’s future growth.
To begin the redesign, the first step was evaluating FOSSology’s current interface to identify key usability issues. This evaluation combined Cognitive Testing using the VIMM Model to assess user effort in completing tasks, Usability Analysis based on Jakob Nielsen’s Heuristic Principles to detect design and interaction flaws, and Accessibility Analysis following WCAG guidelines to ensure inclusivity in areas such as color contrast, navigation, and form usage.
Cognitive testing was carried out using the VIMM Model to understand the mental effort required for users to perform common tasks in FOSSology. This approach looked at Visual, Intellectual, Memory, and Motor aspects of interaction, allowing us to see where users were struggling with unnecessary complexity or confusion.
This helped prioritize redesign areas that directly reduced user friction and cognitive load.
The interface was also evaluated against Jakob Nielsen’s 10 usability heuristics to uncover design flaws and inconsistencies. Each heuristic such as visibility of system status, error prevention, consistency, and user control was systematically reviewed against existing workflows.
Heuristic evaluation provided a comprehensive picture of where the interface broke common usability standards, giving a clear foundation for improvement.
An accessibility review was conducted using WCAG standards to ensure the interface supported a diverse range of users. This included checking color contrast for readability and accessibility. The analysis showed that while FOSSology was functional, it had accessibility gaps that limited inclusivity.
Addressing these gaps ensured the redesign would support broader adoption and better accessibility
The project focused on identifying key users, their primary tasks, and the pain points they faced with the existing interface. These insights were then categorized by impact (high, medium, low) and converted into structured redesign requirements and design recommendations, ensuring that the most critical issues were resolved first while leaving room for iterative improvements.
The design process began with translating the defined requirements into low-fidelity wireframes or by recreating the current UI with updated components to explore possible solutions. These were then refined into high-fidelity screens for feedback and review, followed by clickable prototypes that showcased improved workflows and interface elements in practice.
- The redesigned screens feature a modern visual style with consistent typography, spacing, colors, and custom icons, creating a cleaner and more cohesive interface.
- Navigation is simplified with clearer hierarchy and structure, making it easier for users to find features and complete tasks efficiently.
- Data-heavy pages such as tables and lists are optimized with better organization, filtering, and search options for quicker interpretation.
- Redesigned components are lightweight in terms of CSS, reducing complexity and load time without compromising functionality.
- A new custom icon set was created to match the design system, improving clarity while giving the tool a distinct visual identity.
- Consistent use of design patterns and reusable components across pages reduces confusion and learning effort.
- Accessibility is improved through better contrast, more legible typography, and scalable layouts.
The design system was developed by standardizing typography, colors, spacing, and iconography to establish a cohesive visual identity across the platform. Reusable UI components were created to maintain consistency and reduce development effort, while also ensuring that the interface remained lightweight and easy to implement. This approach not only improved the overall user experience but also provided scalability, making future enhancements more efficient and enabling contributors to extend the system with clarity and consistency.
| Tasks | Planned | Status | Link / Comment |
|---|---|---|---|
| Standardize elements such as colors, typography, and spacing for a unified aesthetic. | Yes | Completed | Design System on Figma |
| Go through already designed pages and redesign (If necessary). | Yes | Completed | Reviewed existing pages, noted observations, and identified what to retain and what to redesign. |
| Pages | Planned | Status | Link / Comment |
|---|---|---|---|
| Search | Yes | Completed | Search pages on Figma |
| Conf | Yes | Completed | Conf pages on Figma |
| Show Jobs | Yes | Completed | Show Jobs pages on Figma |
| Export List | Yes | Completed | Export List pages on Figma |
| Copyright/email/url/ECC/IPRA | Yes | Completed | Copyright/ECC/IPRA pages on Figma |
| Folder (Create/edit/delete) | Yes | Completed | Folders pages on Figma |
| Group (Create/Edit/Manage) | Yes | Completed | Group pages on Figma |
| Obligations (Create/Edit/Manage) | Yes | Completed | Obligations pages on Figma |
| License (Create/Edit/Manage) | Yes | Completed | License pages on Figma |
| Schedule an Analysis page | Yes | Completed | Schedule an Analysis pages on Figma |
| Upload a New file | Yes | Completed | Upload a New file pages on Figma |
| Upload (Delete/Edit/Move or Copy) | Yes | Completed | Upload pages on Figma |
| License Compatibility Rules | Extra | Completed | License Compatibility Rules pages on Figma |
| Duplicate Bucketpool | Extra | Completed | Duplicate Bucketpool page on Figma |
| Fossdash Configuration | Extra | Completed | License Fossdash Configuration page on Figma |
| Acknowledgements | Extra | Completed | Acknowledgements page on Figma |
| Standard License Comments | Extra | Completed | Standard License Comments page on Figma |
| Datatable Redesign | Yes | In Progress | Redesign covers multiple pages and considers diverse use cases for a scalable solution. |
| File View | Yes | In Queue | - |
| License Browser | Extra | In Queue | - |
- Finalize the designs for the File View and File Browser pages by first recreating them with the new components, then refining them as per design requirements.
- Progress with designing additional miscellaneous pages to ensure complete coverage of the FOSSology tool.
- Conduct structured usability testing with a wider user base to validate designs and get feedback.
- Continue documenting design decisions and evolving usage guidelines to better support future contributors.
- Continue collaboration with developers to streamline handoff and maintain design-development consistency.
- Understood the importance of a scalable design system with reusable components and consistent styling.
- Gained experience in designing lightweight, developer-friendly components that ease implementation and maintenance.
- Learnt how ongoing stakeholder feedback during design clarified dependencies and guided feature decisions effectively.
- Understood the balance between modernization and retaining familiarity to reduce disruption for existing users.
- Appreciated the role of open-source contribution and community-driven improvements.
- Learnt how to manage time, adaptability, and prioritization while handling multiple redesign tasks across complex workflows.
I would like to sincerely thank my mentors Katharina Ettinger, Shaheem Azmal M MD., Gaurav Mishra, and Kaushlendra Pratap for their constant support, guidance, feedback, and encouragement throughout this project. They were always patient in clarifying my doubts, guiding me through complex features and dependencies, and going the extra mile to ensure I fully understood the intricacies of the system.
I would also like to thank Amit Nair and Aditya Khosla for their valuable inputs and feedback whenever I encountered blockers or uncertainties in design, which helped me move forward with greater clarity.
I am also really grateful to the FOSSology community and the Google Summer of Code program for providing this incredible opportunity to contribute and grow. The collaborative spirit, constructive feedback, and encouragement from everyone involved made this journey not only a valuable learning experience but also a truly enjoyable one. I look forward to continuing as an active part of the FOSSology community and contributing further to the broader open-source ecosystem. This experience has inspired me to keep learning, sharing, and building together.