HOME

WORKS

ABOUT

CONTACT

HOME

WORKS

ABOUT

CONTACT

HOME

WORKS

ABOUT

CONTACT

Google Developer Groups:
Vancouver

Google Developer Groups:
Vancouver

A website to find events and seminars for people interested in getting into the tech field.

NOTE: Page contents and images subject to change as this is a work in progress. I'm unable to showcase some artifacts until completion of the website. Our website is very early in the development phase.

NOTE: Page contents and images subject to change as this is a work in progress. I'm unable to showcase some artifacts until completion of the website. Our website is very early in the development phase.

Client

Client

Client

Google Developer Groups
Vancouver

Google Developer Groups
Vancouver

Google Developer Groups
Vancouver

Role

Role

Role

UX Designer

UX Designer

Team

Team

Team

Three UX Designers
Two Developers

Three UX Designers
Two Developers

Three UX Designers
Two Developers

Timeline

Timeline

Timeline

Jan 24' - Current

Jan 24' - Current

PROBLEM AND CHALLENGE

The old website didn't leave a good impression

The old website didn't leave a good impression

The old website didn't leave a good impression on most users; filled with readability and spacing problems. My team was brought onboard by stakeholders to create a new website from scratch.

Project Goals

Project Goals

OUR GOAL

OUR GOAL

Create a brand new website for Google Developer Groups: Vancouver

Create a brand new website for Google Developer Groups: Vancouver

  1. Conceptualize the visual design of the website.

  1. Conceptualize the visual design of the website.

  1. Create a new styling guide for the website.

  1. Finalize the website design.

  1. Perform developer hand-off.

RESEARCH

RESEARCH

How can we design a website to appeal to our users?

Me and my team performed research to understand our target market to shape our design direction.
We used the results to guide us into ideating the redesign of the website.

Me and my team performed research to understand our target market to shape our design direction. We used the results to guide us into ideating the redesign of the website.

Me and my team performed research to understand our target market to shape our design direction. We used the results to guide us into ideating the redesign of the website.

Understanding our user

We formed a persona to design to their preferences. We discovered, GDG's community involved young adults interested in the tech industry rather than developers.

We formed a persona to design to their preferences. We discovered, GDG's community involved young adults interested in the tech industry rather than developers.

PERSONA FORMATION METHODOLOGY

PERSONA FORMATION METHODOLOGY

Create a brand new website for Google Developer Groups: Vancouver

Create a brand new website for Google Developer Groups: Vancouver

  1. Spoke with users on the official Discord channel to learn their preferences in UI.

  1. Analyzed pictures of in-person GDG events to determine demographics.

  1. Synthesized the data to analyze patterns of preferences with demographics.

Persona

After synthesizing the data, we created a Persona to help guide our design direction and philosophy.

After synthesizing the data, we created a Persona to help guide our design direction and philosophy.

PERSONA + UI PREFERENCES

Young Adults interested in Tech Field

Young Adults interested in Tech Field

  • 100% favor Dark Mode UI.

  • 91% favor modern design trends.

  • 83% favor accessibility.

Forming Moodboards

I participated in moodboarding with my team in order to notate elements, colors, and layouts that appealed to young people interested in the tech industry.

High amounts of visual and audio signifiers contribute to cognitive overload. Players then, lose track of specific signifiers. The problem becomes amplified during tense moments due to lack of calmness.

High amounts of visual and audio signifiers contribute to cognitive overload. Players then, lose track of specific signifiers. The problem becomes amplified during tense moments due to lack of calmness.

VISUAL DESIGN IDEATION

A design to inspire people to work in the tech field

A design to inspire people to work in the tech field

A design to inspire people to work in the tech field

A previous team completed the site map and task flows. My team designed the webpages to best appeal to our stakeholders and persona.


NOTE: I was given permission to post a few components to convey our design direction for this project page.

A previous team completed the site map and task flows. My team designed the webpages to best appeal to our stakeholders and persona.


NOTE: I was given permission to post a few components to convey our design direction for this project page.

Appealing to persona preferences

We designed our website to appeal to the persona preferences we discovered.

We designed our website to appeal to the persona preferences we discovered.

  • Dark Mode UI. The community's favored UI to prevent eyestrain.

  • Modern and simple. Glass, noise textures, and colored blobs to act as decorations.

  • Reinforcing identity. Features Google's signature colors to attract users.

Designing for accessibility

Designing for accessibility

We reached out to our stakeholders and community members to gather opinions on the design's accessibility. A vast majority (>95%) assured the design remains accessible and we moved forward.

We reached out to our stakeholders and community members to gather opinions on the design's accessibility. A vast majority (>95%) assured the design remains accessible and we moved forward.

Our tools not working made it a big challenge to determine if our design was accessible.

Practical Glassmorphism

Practical Glassmorphism

Based on rising trends such as AR and modernistic design choices; our team crafted components using glassmoprhism while remaining readable and accessible.

Based on rising trends such as AR and modernistic design choices; our team crafted components using glassmoprhism while remaining readable and accessible.

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

You can interact with these buttons!

You can interact with these buttons!

CONCLUSION

Project Reflections

Project Reflections

I'm very happy with the work me and my team have done with GDG: Vancouver. So far, we've learned a lot together.

I'm very happy with the work me and my team have done with GDG: Vancouver. So far, we've learned a lot together.

Research! Even if it's a UI heavy project!

Reaching out to members of the community to get opinions seemed like an obvious step; but we assumed our users wanted a site similar to Google. Research completely changed our design direction to fit their wants.

Reaching out to members of the community to get opinions seemed like an obvious step; but we assumed our users wanted a site similar to Google. Research completely changed our design direction to fit their wants.

Don't be afraid to bring up new ideas!

The glassmorphism theme would have never happened if I hadn't brought it up with my team and stakeholders. In the end — my team, developers, and stakeholders wanted to pivot to the idea.

The glassmorphism theme would have never happened if I hadn't brought it up with my team and stakeholders. In the end — my team, developers, and stakeholders wanted to pivot to the idea.

Incorporate Atomic Design methodology

Looking back, I would have started with basic components instead of sections. I would have started with CTAs, built components using those CTAs, then website sections.

Looking back, I would have started with basic components instead of sections. I would have started with CTAs, built components using those CTAs, then website sections.

VIEW THE NEXT PROJECT

Twitch: Stream Schedule

Twitch: Stream Schedule

Design Process

Introduction

Problem and Challenge

Research

Visual Design Ideation

Reflection

HOME

WORKS

ABOUT

CONTACT

HOME

WORKS

ABOUT

CONTACT