VIEW OF EXPLORATION & REFERENCE SECTION IN FIGMA
OUT IN TECH DIGITAL CORPS 2021
Branding and digital assets designed with a team for Glyphic Biotechnologies
Out In Tech Digital Corps volunteers provide web services to LGBTQ+ activists and entrepreneurs around the world.
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.
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.
ABOUT THE CLIENT
Our client for this project, Glyphic Biotechnologies, is decoding the human proteome through full coverage, de novo protein sequencing at single molecule resolutions, advancing beyond the decades-old technologies based on mass spectrometry and ELISAs.
This platform will enable the development of novel therapeutics and diagnostics and, ultimately, a deeper understanding of human biology.
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.
The WordPress site should include the following sections:
Media Information page
People & Values page, including available career opportunities
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
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.
Hilary W., Sibee J., Jacquelyn S., Warren H., Victoria F., Ris W., Michael W., Ismael M., Sanjuana B., Alecx M., and Bob M.
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.
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.
PRE-EXISTING ASSETS & CLIENT INFORMATION
The Glyphic Biotechnologies team provided us with assets including written copy, social and news link details, and information on their design and brand preferences. All assets were stored in a Google Drive folder accessible to team members for reference and usage.
Included in the information were color scheme preferences and examples of logos and typography they had been utilizing in presentation materials. The client expressed a desire to maintain a sense of visual continuity from previous materials created but was also open to altering and improving brand assets.
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.
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.
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.
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.
After the WordPress site was set up and populated with Glyphic Biotechnologies' content, the design and development teams then compiled information about the WordPress site into a User Guide.
This was a comprehensive document that will help the client keep their site up-to-date and modify it if desired. The guide included information about how to edit and change the content, access admin tools, and more.
The Glyphic Biotechnologies team was thrilled with the final product. They commented on the ease of navigation and the overall aesthetic, which matched their branding and values. The User Guide was also incredibly helpful, providing them with the information needed to maintain and update their site.
They were also pleased that they could showcase the project on their social media channels rapidly, to share their work with the world, with minimal adjustments to the final WordPress site.
Finally, the project was handed off to the Glyphic Biotechnologies team. To ensure a smooth transition, a volunteer from the development and design teams provided a walkthrough of the site and the User Guide, to make sure the client was comfortable with the tools and processes for making future changes.
The team was also available for periodic follow-up, to answer any questions the Glyphic Biotechnologies team may have had in the future.
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.
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!
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.
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.
The Glyphic Biotechnologies website project was a great success for our Out In Tech Digital Corps 2021 team. The client was thrilled with the final product, and the team was able to complete the project on time. As a result of this project, the team was able to develop valuable skills and lessons that will be beneficial in future projects.
I was able to learn how to effectively incorporate client feedback into the design, create a comprehensive user guide, and utilize collaborative design tools such as Figma. Additionally, the team was able to gain a better understanding of the WordPress platform, as well as how to create a website that was both visually appealing and functional.
Overall, the project was a great learning experience that enabled me to develop valuable skills and lessons that have been extremely beneficial in future projects.
Thanks for taking the time to look at my work!
Need help getting started on a project?
Questions about my work or availability?
Send me a note anytime, connect with me on LinkedIn, or see what I'm up to this week on Instagram!