Design Nexus: SSDC 2.0

Encouraging community, collaboration, and education among Software Development club members through web design and development.

Comment

Design Hacks Project

Inspiration

Using UX/UI design principles in combination with front-end languages, we revamped the design of Seneca Software Developers Club's (SSDC) existing website to better align with their goals: community, collaboration, and education. We also drew inspiration from SSDC's current logo when determining the website's colour palette and aesthetic.

What It Does

Members and potential members can learn about SSDC by visiting the website. Our project is composed of multiple pages that display the club's mission and goals, the leaders that run the club, the resources provided by the club's very own members, and any club news and events. It also features various animations to spark interest and entice users to join the club.

Members & Roles

  • Cesca Dela Cruz: Lead Designer, and Developer
  • Irish Banga: Lead Developer, and Designer

How We Built It

We developed this web project using a combination of CSS, HTML, and JavaScript. For server functionality, we utilized Express.js paired with the EJS template engine, which helped us reduce duplicate code by reusing components like headers and footers.

Development Environment

  • IDE: VS Code
  • Package Management: Node.js and npm
  • Server-Side Functionality: Express.js
  • UI/UX Design: Figma
  • Primary Team Communication: Microsoft Teams

Team Workflow

As a team of two, we divided the work efficiently:

  1. The Lead Developer focused on erecting the basic structure of the website while the Lead Designer finalized the UI.
  2. Individual pages were built from scratch as the design progressed.
  3. In the latter half of the hackathon, we collaboratively refined the website's responsiveness.

Challenges We Ran Into

While we didn't encounter major issues, we faced several challenges:

  1. Enhancing Responsiveness: Building components from scratch while staying true to our design required continuous refinement.
  2. Time Constraints: Balancing full-time jobs and differing work hours made scheduling calls and collaborative work challenging.

Accomplishments That We're Proud Of

One of our most impressive achievements is the UX/UI design of the project. Despite having a limited time-frame, we were able to conceptualize different designs before the development stage to ensure our project met the hackathon's requirements. Another accomplishment was the Lead Developer being able to create different animations for the website without having any experience in JS animation beforehand, and maintaining flexibility throughout the entire project by being able keep up with the Lead Designer's constant design changes.

Key Strategies

  • Emphasized clear written communication
  • Maintained detailed TODO lists for asynchronous work
  • Ensured smooth handoffs between team members

What We Learned

While we primarily relied on existing knowledge to meet the tight deadline, we gained valuable insights:

  1. Refreshed and deepened our understanding of web development concepts.
  2. Enhanced our skills in managing responsiveness using media queries.
  3. Improved our ability to implement animations using transitions, transformations, and keyframes.
  4. Reinforced the importance of effective communication and task management in remote collaboration.

This project highlighted that there's always more to learn in web development, emphasizing the vast scope of the field.

What's Next for SSDC 2.0

Looking ahead, we have several plans for the project:

  1. Integrate Comprehensive Backend Functionality: While our focus was on frontend redesign, combining our code with the existing backend is a logical next step.
  2. Contribute to Implementation: We're eager to assist in the development process of our design, ensuring it's properly integrated with the existing club website structure.
  3. Potential for Scaling: Although it's currently a college club website, the project has scalability potential if needed in the future.
Share this project:

Updates