Team
1 Product Manager
3 Designers
1 Developers
Duration
Jan - March 2024
Role
UI/UX Design
Brand Design
Tools
Figma
Figjam
Overview
What are Google Developer Groups?
Google Developer Groups are communities of developers who are interested in Google's developer technology products and platforms.
GDG Vancouver is a volunteer-run non-profit community group based in Vancouver, British Columbia, Canada. They provide free and low-cost access to professional networking and the opportunity to learn new technology skills in a variety of formats.
Problem
Helping GDG Vancouver update their online brand.
From January to March 2024, GDG Vancouver partnered up with me and 2 other designers to create a solution to update their online identity and improve communication to their community.
Their previous website suffered from outdated, inconsistent and unresponsive design.
Solution
Our objective was to build a more consistent and organized design for the website.
We aimed to enhance the user experience by making it easier for developers to find the resources, tools, and events they need.
Deliverables
We created internal use deliverables such as a styling guide, documentation, and wireframes.
Our front facing deliverable is the prototype for GDG Vancouver's website.
The design team—the product manager, and us three designers—were brought onto the project 3 weeks before developers joined our team.
During this time, we consulted with the product manager (an executive member of GDG Vancouver) several times to establish a roadmap and expectations for the product.
Project Scope
Our group was brought on board after some previous tasks were completed. We were to focus on UX/UI and Visual Design. To stay organized, we established a project scope of focus.
Finished Tasks
User Research
Site Map
User Flows
Information Architecture
Logo Design
Project Scope
Mood Boards
Low-Fi Wireframe
Styling Guide
Hi-Fi Prototype
Developer Handoff
To better understand GDG Vancouver's main goals and requirements, our team met with the product manager to establish a list of product needs and points to keep in mind through the development process.
We analyzed the old GDG Vancouver website to get a better understanding of what worked well and what didn't.
Sitemap
The site maps and user flows were started by a previous team. However, we continued to identify the needs and necessary features of the product using the insights that we uncovered. We would then update the sitemap using the new insights.
Inspiration
We started our journey by forming mood boards to draw inspiration. Following Google's design language, we settled on having a simple layout but with our own unique twists gathered from our inspiration search.
We started our design process by creating low fidelity wireframes. Because we wanted to include everyone's creative vision, we each created our own wireframes, then collaboratively chose aspects from each other's wireframes that adhered to good UX practices.
This resulted in plentiful pages of wireframes. Our eye for design shined through during this stage.
We all had different approaches to the page designs, resulting in a variety of viable options.
Challenges
Being a team of three junior designers, we lacked experience designing a deliverable product.
However, we helped each other through this phase by sharing our knowledge. We leveraged our own strengths balance our weaknesses.
Example of Assistance
Our varying levels of Figma experience shined through during this phase. One teammate was well versed in the concept of viewports while one was skilled in auto-layout.
Sharing and teaching each other the necessary concepts and skills allowed us to grow and mature together.
After analysis and ideation, we chose to develop different sections of the website.
Our group continued to meet weekly to review progress, give feedback, and provide assistance.
My tasks
Create the teams page
Create the about/contact page
Assist teammates with designs on each other's pages
Communicate with team and internal stakeholders about design possibilities and revisions
Design Process
Design Process
Review design with the team and stakeholders
Iterations
Challenges
While most of the prototyping process was smooth sailing, there were a couple of challenges I faced.
Personal Challenges
Time constraints - Our team consisted of volunteers, each of us attending university outside of this project. This lead to struggles of finding time to develop consistently and constantly.
Following developer practices - Our inexperience in designing for development meant we had to make sure our final product was able to be made into a tangible product by developers.
