HackMelbourne: Website Director

November 1, 2024

HackMelbourne

HackMelbourne Homepage

Role: Website Director

As the Website Director for HackMelbourne, I led a team of 7 to design and develop a new website for the club. My responsibilities included overseeing the design process, managing the development team, and ensuring the website met the club's goals of increasing engagement and accessibility.

Key Achievements 🚩

  • 2,000+ Unique Users: Significant growth in website traffic.
  • 127% Increase in 7-Day Average Traffic: Improved visibility and engagement.
  • 190% Increase in Average Engagement Time: Enhanced user experience.
  • 6,800+ Total Page Views: Demonstrated the website's effectiveness as a resource hub.
HackMelbourne Homepage

Skills Developed

Design & Collaboration

  • Figma: Created mock-ups and refined design styles.
  • Responsive Design: Ensured mobile optimization.
  • Reusable Components: Streamlined development with modular design.
  • Effective Developer Handoff: Improved communication between design and development teams.

Technical Proficiency

  • React 18 & TypeScript: Built a robust and scalable frontend.
  • TailwindCSS: Simplified styling and maintained consistency.
  • Firebase: Managed backend functionality and data storage.
  • Git & GitHub: Streamlined version control and collaboration.
  • Jira: Implemented task management and sprint cycles.
  • Framer Motion: Added engaging animations to enhance user experience.
  • Notion API: Connected firebase with Notion as a database for CMS.
HackMelbourne Homepage

Challenges & Solutions

Challenge 1: Lack of Purpose

Problem: The original website was static and lacked engagement. Users had no reason to visit it, as all information was also available on social media.

Solutions:

  • Meet the Team Page: Created a dedicated page to showcase the team, fostering a sense of identity and connection.
  • Updated Calendar/Events List: Added a dynamic calendar to highlight upcoming events, making the website a central hub for information.
  • Educational Blog Section: Introduced a blog with free resources on hackathons, aligning with the club’s mission to make hackathons more accessible.
HackMelbourne Homepage

Challenge 2: Mobile Optimization

Problem: The original website was not well-optimized for mobile devices, leading to a poor user experience.

Solutions:

  • Responsive Design: Redesigned the website with a mobile-first approach, ensuring seamless functionality across all devices.
  • Figma Prototyping: Created detailed mobile mock-ups to guide the development team.
  • TailwindCSS: Utilized utility-first CSS to streamline responsive styling and reduce development time.

Challenge 3: Team Collaboration

Problem: As the team grew to 7 members, ensuring effective communication and task management became a challenge.

Solutions:

  • TypeScript Migration: Switched to TypeScript to improve code quality and make component communication easier.
  • TailwindCSS Integration: Simplified styling and enforced consistency across the codebase.
  • CI/CD Pipelines: Set up automated deployments with Netlify to catch bugs early and ensure smooth releases.
  • 2-Week Sprint Cycles: Implemented Agile methodologies to assign tasks, track progress, and keep the team aligned.

Challenge 4: Balancing Ambition with Realistic Goals

Problem: Initial plans included ambitious features that were difficult to implement within the timeline.

Solutions:

  • Prioritization: Scaled back features to focus on core functionalities for the initial release.
  • Iterative Development: Adopted a phased approach, launching a minimum viable product (MVP) first and adding features incrementally.
  • Clear Communication: Set realistic expectations with stakeholders and the team to ensure everyone was aligned.

Team Leadership & Development

  • Assembled a Team: Conducted interviews to build a team of website officers, focusing on communication skills and React experience.
  • Improved Workflow:
    • Migrated to TypeScript for better type safety and component communication.
    • Implemented TailwindCSS to simplify styling.
    • Set up CI/CD Pipelines with Netlify to ensure smooth deployments.
    • Introduced 2-Week Sprint Cycles to manage tasks and keep the team aligned.
  • Enhanced Communication: Provided detailed Figma comments and explanations to ensure design consistency and clarity for developers.
Hackmelbourne website team initial team

Results

  • Successful Launch: Deployed the website before the University semester began, with over 100 site visits on the first day.
  • Scaled Back Features: Prioritized realistic goals to ensure timely delivery.
  • Team Growth: Improved team collaboration and individual skill development through effective leadership and communication.

Lessons Learned

  • Realistic Goal Setting: Balancing ambition with feasibility is crucial for timely delivery.
  • Effective Communication: Clear and detailed handoffs between design and development are essential for success.
  • Leadership: Assigning tasks that are both challenging and achievable fosters team growth and productivity.