/ iGEM Outaouais

Published 07/10/2024

🤝 Volunteering

2023-2024

UX

Website

Designing a Website for the team of iGEM Outaouais.

Designing a Website for the team of iGEM Outaouais.

Designing a Website for the team of iGEM Outaouais.

iGEM Outaouais is a local organization competing internationally to develop biotech solutions for environmental challenges. Their innovative solution to recycling plastics lacks a platform for display, which hinders potential funding from sponsors. I joined their multimedia team to design and develop their website to resolve this issue and to add value to this amazing organization.

iGEM Outaouais is a local organization competing internationally to develop biotech solutions for environmental challenges. Their innovative solution to recycling plastics lacks a platform for display, which hinders potential funding from sponsors. I joined their multimedia team to design and develop their website to resolve this issue and to add value to this amazing organization.

Role

Role

UX/UI Designer, Web Developper

UX/UI Designer, Web Developper

UX/UI Designer, Web Developer

Industry

Industry

Biotechnoligical innovation

Biotechnoligical innovation

Duration

Duration

3 months

3 months

Empathizing to understand the needs of iGEM Outaouais

Empathizing to understand the needs of iGEM Outaouais

After joining the multimedia team and proposing to build the team's website, I planned a meeting with the Head of iGEM Outaouais, Stéphanie Pontier, where we openly discussed about what were the intended goals with the website and what were their current pain points.

After joining the multimedia team and proposing to build the team's website, I planned a meeting with the Head of iGEM Outaouais, Stéphanie Pontier, where we openly discussed about what were the intended goals with the website and what were their current pain points.

From there, I made a list of objectives to reach for the website :

From there, I made a list of objectives to reach for the website :

Website has these pages : Homepage, About, Our Project, Team, Sponsors, News, FAQ, Contact

Website has these pages : Homepage, About, Our Project, Team, Sponsors, News, FAQ, Contact

Website has to be responsive across all platforms

Website has to be responsive across all platforms

A platform to showcase the project

A platform to showcase the project

Raise funding for the project

Raise funding for the project

Explain what's iGEM

Explain what's iGEM

Integration of their social medias

Integration of their social medias

An active blog

An active blog

Representation of the multidisciplinary team

Representation of the multidisciplinary team

User Research

User Research

I continued my work by doing research to understand who are going to be the potential users that will navigate on the website. I identified 2 types of users and their motives:

I continued my work by doing research to understand who are going to be the potential users that will navigate on the website. I identified 2 types of users and their motives:

Potential Donor

Potential Donor

They visit the website since they want to donate/contribute to the project of iGEM Outaouais. They are looking for personnality, reassurance about where their money is going and status.

They visit the website since they want to donate/contribute to the project of iGEM Outaouais. They are looking for personnality, reassurance about where their money is going and status.

Science/iGEM Enthusiasts

Science/iGEM Enthusiasts

They visit the website since they want to know as much as possible about the project, have an active blog to follow week after week and see the progression of the ongoing project.

They visit the website since they want to know as much as possible about the project, have an active blog to follow week after week and see the progression of the ongoing project.

From there, I made user personas representing the two types of users to reflect and get a deeper understanding of their needs and pain points.

From there, I made user personas representing the two types of users to reflect and get a deeper understanding of their needs and pain points.

Competitive research (Benchmarking)

Competitive research (Benchmarking)

I also decided that competitive benchmarking would work great for this project since there are many organizations that have mastered fundraising through their websites. This is why I assessed a few websites from these organizations to understand what I need to incorporate into my own website for it to work well.

I also decided that competitive benchmarking would work great for this project since there are many organizations that have mastered fundraising through their websites. This is why I assessed a few websites from these organizations to understand what I need to incorporate into my own website for it to work well.

Clear intention of raising funds with the recuring use of CTA's, very clean aesthetic, looks credible and thrustworthy.

Clear intention of raising funds with the recuring use of CTA's, very clean aesthetic, looks credible and thrustworthy.

Information about the crises that they are fighting for is clear, articles about their achievements, statistics makes them more credible.

Information about the crises that they are fighting for is clear, articles about their achievements, statistics makes them more credible.

Has lots of personnality and could be a great model to follow for iGEM Outaouais. Representative fullscreen video, lots of insightful information.

Has lots of personnality and could be a great model to follow for iGEM Outaouais. Representative fullscreen video, lots of insightful information.

Reflecting on my competitive research, I identified a list of insights that will be integrated into the website to ensure a better chance of success by following best practices.

Reflecting on my competitive research, I identified a list of insights that will be integrated into the website to ensure a better chance of success by following best practices.

Keeping transparent and clear intentions

Keeping transparent and clear intentions

Having lots of information related to the project

Having lots of information related to the project

Recuring use of CTA's for donations

Recuring use of CTA's for donations

Articles related to the projects

Articles related to the projects

Website has personnality

Website has personnality

Clean and profesionnal look

Clean and profesionnal look

Userflow

Userflow

Once the research was done, I started the design process of the website by making a userflow defining each page that will be part of the website.

Once the research was done, I started the design process of the website by making a userflow defining each page that will be part of the website.

Prototyping (Alpha version)

Prototyping (Alpha version)

Now that I have a plan and not much time before the deadline for the prototype, I needed to adapt. This is why I decided to skip wireframing and to go straight into designing and developing the prototype in Wordpress.

Now that I have a plan and not much time before the deadline for the prototype, I needed to adapt. This is why I decided to skip wireframing and to go straight into designing and developing the prototype in Wordpress.

Iterations (Beta version)

Iterations (Beta version)

A new meeting took place with the Head of iGEM Outaouais to discuss about the Alpha version of the website. I specifically wanted to know what she liked about the current design, what should be modified or added. With the received feedback, I iterated the prototype which became the Beta version.

A new meeting took place with the Head of iGEM Outaouais to discuss about the Alpha version of the website. I specifically wanted to know what she liked about the current design, what should be modified or added. From there, I started working on the Beta version by making iterations to the prototype.

I also needed to change the entire brand idendity since their official logo has been chosen along side with their new color palette.

I also needed to change the entire brand idendity since their official logo has been chosen along side with their new color palette.

Last few iterations and approval for launch

Last few iterations and approval for launch

A few days before my deadline, I organized a last meeting with the Head of iGEM Outaouais to get her last feedback to make quick iterations and to get her approval for the launch of the website.

A few days before my deadline, I organized a last meeting with the Head of iGEM Outaouais to get her last feedback to make quick iterations and to get her approval for the launch of the website.

I executed the last few changes and launched the website!

I executed the last few changes and launched the website!

Outcomes from my work

Outcomes from my work

  • Significantly increased visibility in the Outaouais region, enhancing community awareness.

  • Boosted credibility among local organizations and stakeholders.

  • Sense of ownership within the team, empowering them with a strong representation of their efforts.

  • Simplified understanding of iGEM Outaouais and their project for outsiders, improving outreach.

  • Contributed to achieving second place at the international iGEM Grand Jamboree, showcasing the team's innovation and hard work.

  • Significantly increased visibility in the Outaouais region, enhancing community awareness.

  • Boosted credibility among local organizations and stakeholders.

  • Sense of ownership within the team, empowering them with a strong representation of their efforts.

  • Simplified understanding of iGEM Outaouais and their project for outsiders, improving outreach.

  • Contributed to achieving second place at the international iGEM Grand Jamboree, showcasing the team's innovation and hard work.

  • Significantly increased visibility in the Outaouais region, enhancing community awareness.

  • Boosted credibility among local organizations and stakeholders.

  • Sense of ownership within the team, empowering them with a strong representation of their efforts.

  • Simplified understanding of iGEM Outaouais and their project for outsiders, improving outreach.

  • Contributed to achieving second place at the international iGEM Grand Jamboree, showcasing the team's innovation and hard work.

More Case Studies

💰Freelance

2024

UX

Website + Branding

Website

VA Car Detailing

VA Car Detailing

Contracted by VA Car Detailing, a local Ottawa/Gatineau car detailing business, I revamped their brand identity with a new logo and business cards, and designed and launched their new website to enhance their online presence and image.

Contracted by VA Car Detailing, a local Ottawa/Gatineau car detailing business, I revamped their brand identity with a new logo and business cards, and designed and launched their new website to enhance their online presence and image.

🥇Winner

2022-2023

UX

Website

TIM Outaouais

TIM Outaouais

In a college web design competition, my design secured first place out of over 50 classmates. This achievement led me to launch my first website with guidance from my mentor, and I was awarded an iMac as a prize for my work.

In a college web design competition, my design secured first place out of over 50 classmates. This achievement led me to launch my first website with guidance from my mentor, and I was awarded an iMac as a prize for my work.

Copyright © 2024 UXBoult. All rights reserved.

Personal Portfolio 2022-2024

Copyright © 2024 UXBoult. All rights reserved.

Copyright © 2024 UXBoult. All rights reserved.

Personal Portfolio 2022-2024