Background and Context
CLIENT
Google Developer
Groups: Vancouver
TEAM SIZE
3 UX Designers
1 Project Manager
1 Developer
TIMELINE
Jan 24' - Ongoing
DELIVERABLES
Website (In-Progress)
Our Tasks
Wireframing
Style Guide creation
Hi-Fi Prototyping
Developer handoff
̶D̶e̶f̶e̶a̶t̶ ̶I̶m̶p̶o̶s̶t̶o̶r̶ ̶S̶y̶n̶d̶r̶o̶m̶e̶ Success.
PROBLEM AND DELIVERABLES
The Problem
GDG Vancouver's previous website.
Deliverables
PHASE 01 • TEAM INTRODUCTION AND IDEATION
Introduction
My team of Jr. UX Designers was given full autonomy and creative freedom to design the website from the ground up.
We met and collaborated on a weekly basis over Discord and Figma. In addition; we grew our skillset together by sharing our knowledge of UX skillsets to help each other's weaknesses.
Inspiration
My team of Jr. UX Designers was given full autonomy and creative freedom to design the website from the ground up.
We met and collaborated on a weekly basis over Discord and Figma to develop the website.
In addition; we grew our skillset together by sharing our knowledge of UX skillsets to help each other's weaknesses.
Lo-Fi Wireframing
We started our design process with creating lo-fi wireframes.
When our group collaborated over Figma, we chose aspects from each other's wireframes that adhered to the good UX practices.
Challenges Faced
PHASE 02 - TRANSITION
Task Delegation
After finishing the ideation phase, we chose to develop different sections of the website. Our group continued to meet weekly to: review progress, give feedback, and provide assistance.
Phase 2 - My Tasks
Create the event details page.
Create the mentorship page. ⭐
Communication between internal stakeholders to revise designs.
Phase 2 - Goals
Create the prototype to be used for development.
Prepare for usability testing.
PHASE 02 • PROTOTYPING
Prototyping and Mockups
Design Process
Phase 2 Challenges
This project is my first time designing a product for stakeholders; These are some of the issues I faced when working with a team and stakeholders.
Design Artifacts
Initially, the project was unorganized. This was the first time I had to reiterate so much, while also documenting my changes.
A breakthrough…now with Style Implementation!
One challenge we faced was inconsistent styling. We eventually learned a proper method to implement specific styles, making our Version 3 designs much better.
One. More. Reiteration. And our MVP.
The more we reiterated, the better our product looked and felt - we ended up with a glassmorphism theme for our MVP.
Dealing with impostor syndrome was the biggest challenge for me; as I felt my past iterations were of unprofessional quality.
Now, I'm motivated, happy, grateful and realized it's part of the process.
Remaining Tasks
At last, we shipped our MVP and now awaiting for development. However, there are still several pages and tasks we need to finish.
Task Checklist
Mentorship Page
Team and Volunteer Page
Refine our MVP post-launch.
Usability tests
PHASE 03 - TRANSITION (PENDING)
Usability Tests and Revision
Phase 3 - Pending Tasks
CONCLUSION
Project Reflection
Learnings
Organization. My first real-world project quickly taught me how to organize.
New Skills. Learning to create a design system, documentation, and annotations.
Communication. Talking with stakeholders and developers during development.
Takeaways
Improvement is FAST. In the span of about 2 months; I went from what looked extremely poor to looking wonderful with glassmorphism.
Nothing is set in stone. Although we did wireframes, our shipped product looked completely different and much better. It's okay to reiterate!
↑ Back to the Top ↑
