04
Hackathon App
Contributed to the ongoing enhancement and development of the Code Institute Hackathon App platform as part of a freelance software development contract. Working within a multidisciplinary team, I helped identify and address user pain points, improve usability, resolve bugs and support the development of new features based on project requirements. The role involved reviewing and completing Git issues related to usability improvements, bug fixes and feature enhancements, while collaborating with developers and stakeholders to improve the overall user experience. Responsibilities included contributing to user experience improvements, implementing full-stack features and interface enhancements, incorporating iterative feedback from the Project Manager, and delivering sprint objectives within tight deadlines.
Sector:
Full Stack Development
Industry:
Software Development
Duration:
2 weeks
My Contributions
End to end contributions across UX, UI and full stack development, including:
Collaborative software development within a team environment
UX and UI component design
Wireframing and interaction planning
Front end development using HTML, CSS and JavaScript
Back end development using Python and Django
Database integration using SQLite
Git version control and collaborative GitHub workflows
Branch management, pull requests and merge collaboration
Iterative testing, debugging and feature refinement
Agile teamwork including stand ups, planning and feedback cycles
The Design Process
The project began with a review of the existing platform, user pain points and outstanding development tasks to identify priorities for the sprint. Working within an agile team environment required continuous communication, shared ownership and iterative problem-solving to ensure proposed improvements aligned with both technical requirements and user experience goals.
UX planning and component discussions informed the approach to feature enhancements before implementation. Design decisions focused on improving clarity, usability and responsiveness, ensuring new and existing interface elements remained intuitive while supporting the platform's functional requirements.
Development progressed iteratively through testing, code reviews and feedback from the Project Manager and team members. Features were refined throughout the sprint cycle to improve usability, address platform limitations and deliver scalable solutions within the project's tight delivery timeframe.
Design System
An existing component system was followed and applied within Django templates to ensure visual consistency across the interface. Reusable UI patterns were implemented using dynamic rendering ({{ }} data binding and {% %} logic), maintaining cohesion and usability while supporting efficient development within a collaborative workflow.
The system defined consistent styling for typography, spacing, buttons, forms and navigation components, which was adhered to throughout development to ensure interface uniformity across both new and existing features.
Typography System
Heading Hierarchy
The existing heading hierarchy was applied consistently throughout the interface to maintain readability, support content structure and guide users through key information and interactions.
Body Text
Established typography styles were followed to ensure content remained clear, accessible and readable across different screen sizes and devices.
Interactive Components
A static list of categories was transformed into a selectable pill-based interface with JavaScript-powered search functionality, enabling users to quickly find, filter and select relevant options while improving usability and reducing visual clutter.
Colour Palette
The interface used a structured colour palette to support readability, hierarchy and usability across key interaction states. Colours were selected to reinforce clarity and create distinction between navigation, content areas and user actions.
Visual Identity and Interface Design
UX and UI components were designed with usability and consistency in mind, balancing clean layouts with responsive interaction patterns. Interface decisions focused on reducing friction and creating an intuitive user experience within the constraints of a rapid development cycle.
Conclusion
The final outcome was a collaboratively developed full stack web application demonstrating both technical and design capabilities. Through team based delivery, GitHub collaboration, UX thinking and iterative development using HTML, CSS, JavaScript, Python, Django and SQLite, the project strengthened my ability to contribute effectively within an agile software development environment.
