OUT IN TECH DIGITAL CORPS 2021

Out In Tech Digital Corps volunteers provide web services to LGBTQ+ activists and entrepreneurs around the world.

PROJECT OVERVIEW

During the height of the third wave of Covid-19 in 2021, a previously in-person annual volunteer event went 100% virtual, allowing people from all over the world to participate.

I volunteered to work with a remote team tasked with building a WordPress site in 1 day for a biotechnology startup, Glyphic Biotechnologies.

PROJECT ROLE

I served as a member of the visual design team, designing branding and digital assets, participated in interviewing 2 executive officers of the organization to determine website goals, and assisted in developing content for 3 site sections.

TYPE

Our team's goal was to build Glyphic Biotechnologies a multi-functional Wordpress.com site that would allow them to showcase their work decoding the human proteome.

The site would also include general information about the organization, its people and values, and career opportunities.

SCOPE

The WordPress site should include the following sections:

• Home page

• About page

• Media Information page

• People & Values page, including available career opportunities

• Contact Information

In addition to the WordPress site, our team will provide the client with branding (logo, color scheme, standard assets for web and social) and a WordPress site User Guide

TIMELINE

This project was completed over the course of a one-day remote event, with team members collaborating virtually, with some additional wrap-up and follow-up tasks with the client.

TEAM MEMBERS

Hilary W., Sibee J., Jacquelyn S., Warren H., Victoria F., Ris W., Michael W., Ismael M., Sanjuana B., Alecx M., and Bob M.

PROJECT GOALS

This WordPress website will provide a place for Glyphic Biotechnologies administrators to communicate its vision, illustrate how its proprietary protein sequencing works, differentiate itself from its peers, and recruit diverse talent to join its inclusive, accessible, and equitable workplace.

PROBLEM STATEMENT

Glyphic Biotechnologies needs a website to communicate its mission, and achievements, recruit new talent and present itself to potential investors/funding sources.

To achieve this, we needed to create a visually compelling and user-friendly site, which could be easily navigated and interacted with. We also had to be mindful of the design and branding preferences expressed by the client, while ensuring the site represented the modern, forward-thinking ethos of the company.

CLIENT INTERVIEW

We had the opportunity to meet members of the Glyphic Biotechnologies team, prior to which we took some time to create a list of questions we had for them for us to learn more about their site and available assets, and organization goals.

This proved extremely helpful for both sides of the interview, as our many follow-up questions generated new ideas for the Glyphic Bio. team on how to explain complex concepts and processes to those without such an extensive scientific and technical background.

VISUAL RESEARCH & EXPLORATION

While the team members responsible for development began work on site structure, the members working on the visual design set up a digital mood board in Figma for compiling the pre-existing visual assets and references provided by the client and began researching images and motifs to add.

We included a preliminary color palette, typography samples, illustrations of DNA sequencing and protein molecules, and all versions of logos and logomarks already in some use by the company.

COLOR SCHEME

The design team chose a palette of 5 colors pulled from Glyphic Biotech's previous presentation materials, incorporating the branding preferences the client communicated during the onboarding interview.

TYPOGRAPHY

The client had used a variety of modern, sans-serif fonts previously, so we chose heading and body fonts that evoked a similar feel, prioritizing legibility.

Poppins and Source Sans Pro are both open-source fonts, making future access and use easy.

LOGOTYPE

Although several ideas for new logomarks were initially explored, the client indicated that a logomark containing the text of the company’s name would be most valuable to them.

They'd been using a white text version of a logotype with an abbreviated version of the company’s name, so the design team created several alternate versions in multiple colors for use by the development team members and Glyphic Biotech.

PROJECT STYLE GUIDE ↑

The design team then compiled all the assets and design elements into a comprehensive project style guide in Figma. This included the chosen colors, typography, logos, and other graphic elements.

This style guide was used by the development team to ensure that the website adhered to the agreed-upon branding design.

DESIGN VISUALIZATIONS FOR WORDPRESS ↓

In addition to organizing the visual design components for the project, we created multiple mockups in Figma of how to deploy the branding onto the site structure.

The entire team had researched and selected a WordPress theme called Venture to use.

CHALLENGE →

One of the biggest challenges was determining the best way to incorporate the branding into the design, while still keeping the overall feel modern and informative.

CHALLENGE →

Additionally, due to the tight timeline (less than 24 hours), the team had to move quickly and efficiently to ensure that the project was completed on time. Setting a timeline and assigning roles was critical!

TAKEAWAY →

I’d used the WordPress platform very casually in the past - this project was a great opportunity to learn how to best work with developers to deploy design elements. This included understanding the WordPress interface, the different sections and functions, and how to customize the website to our client's needs.

TAKEAWAY →

I learned so much about working collaboratively on a remote team! Developing effective strategies to utilize video calls and online communication tools was essential, as well as incorporating collaborative design tools such as Figma.