The Design-Wiki is responsible for ensuring the judges and general audience can understand and access our work!
The main project the subteam is responsible for is the team wiki website, a critical deliverable for the iGEM competition. This is where we describe the project, present our results, and document the experimental process for judges, other teams, and the general public. You can see some UBC iGEM wikis from past seasons here: 2024, 2023. The subteam is also responsible for other deliverables such as the project promo video and presentation video.
Here are some general categories of the work the Design-Wiki subteam does:
<aside> <img src="/icons/cursor_blue.svg" alt="/icons/cursor_blue.svg" width="40px" />
One of the biggest deliverables for the competition is the team wiki, where all the documentation is recorded for judges, other teams, and the general public. Here is the team wiki for the 2024 and 2023 seasons. Additionally, we also have our own general website.
</aside>
<aside> <img src="/icons/hammer_blue.svg" alt="/icons/hammer_blue.svg" width="40px" />
The actual build process will put together all of the processed documentation into a final product, following the visual design established in the web design phase.
This is a content-focused project — while there are many dynamic elements that will need to be built into the wiki, this isn’t a full highly-interactive webapp. Our focus is on creating an easy-to-navigate, accessible, well-styled site that effectively showcases all of the hard work the team has put into the project. Wiki members will be building a lot of small, interactive components and working on displaying complex, content-heavy layouts.
Knowledge of HTML/CSS, git, and responsive web development is recommended. Additional experience with Typescript, frontend frameworks such as Astro, React, Svelte, etc, SSGs such as Zola, Hugo, etc and web accessibility is also an asset.
</aside>
<aside> <img src="/icons/copy_blue.svg" alt="/icons/copy_blue.svg" width="40px" />
The wiki needs to incorporate information about the work of many other subteams — wet lab, dry lab, and human practices, etc. This documentation comes in a large variety of forms, from 3D CAD models to videos of experiments to Notion databases with lab notebook entries. Members of the wiki subteam will need to work with the various subteams and determine how we can ingest their documentation in a smooth and robust manner (e.g. write a script to transform a Notion database into Markdown, apply post-processing and then transpile into styled HTML for use on our site), as well as how it will be displayed on the wiki site (e.g. how can we display a CAD model on the frontend?)
</aside>
<aside> <img src="/icons/pentagon-dashed_blue.svg" alt="/icons/pentagon-dashed_blue.svg" width="40px" />
Since the bulk of design is for the wiki, most illustrations/graphics made need to be vector-based. Some examples for these would be the project logo, figures, and diagrams to explain technical aspects of our project. This is the part where integration with other subteams, particularly wet and dry lab teams, is crucial, as the Design/Wiki team is responsible for conveying scientifically accurate information in a clear and accessible manner. Any vector graphics software is acceptable (Illustrator, Figma, etc.).
</aside>
<aside> <img src="/icons/art_blue.svg" alt="/icons/art_blue.svg" width="40px" />
Simple graphic design work is usually needed for things like social media posts, sponsorship packages, and presentations (usually for sponsorship/marketing, in collaboration with the admin subteam). Usually done through Canva or InDesign.
</aside>
<aside> <img src="/icons/pencil_blue.svg" alt="/icons/pencil_blue.svg" width="40px" />
Smaller animation projects in the past include animating the logo and making motion designs for videos. The biggest animation project is an ongoing initiative that started in 2020, which is the “Simply Synbio” video series on YouTube. Thus far, these videos have been done using frame-by-frame animation and time lapses.
</aside>
<aside> <img src="/icons/movie_blue.svg" alt="/icons/movie_blue.svg" width="40px" />
Some other deliverables include the project promotion video and presentation video that judges will watch. The Design/Wiki team plays a key role in planning these videos, from storyboarding through filming and editing, to ensure that the story of our project flows well. Some other video editing projects from last year included hardware tutorial, troubleshooting, and demo videos (Example: Bioreactor How-to-Use video).
</aside>
Not at all! Beyond the main deliverables, the Design-Wiki team’s projects vary each year depending on the project focus, goals, and of course, our members' unique talents and interests. Design/Wiki is a flexible subteam, and we encourage members to take initiative and bring in their own visual and technical design ideas.