Fia Reyes - Portfolio

DESIGN PROCESS

— 2 to 3 Minute Read Time —

UX DESIGN

VISUAL DESIGN

BONA FIDE

IN PROGRESS

Google Developer Groups - Vancouver

In Janaury 2024, I was given the opportunity to work as a volunteer for Vancouver's Google Developer Group. I was put on onboard with a group other UX Designers to develop their brand new website. Our group was tasked with designing the website's layout and style guide. We also collaborated with a project manager and developer to ensure the future handoff process is seamless.

CLIENT

Google Developer Group
(Vancouver)

Vancouver Google Developer
Groups

TEAM SIZE

3 UX Designers
1 Project Manager
1 Developer

TIMELINE

Jan 24' - Ongoing

Sept - Oct 23'
(6 Weeks)

DELIVERABLES

Website (In-Progress)

This project is currently ongoing and constantly being reupdated to reflect the journey and process in real time. Last updated 02/06/2024.

This project is currently ongoing and constantly being reupdated to reflect the journey and process in real time.

Last updated 02/06/2024.

This project is currently ongoing and constantly being reupdated to reflect the journey and process in real time.
Last updated 01/18/2024.

DELIVERABLES

Currently in Development!

This project is currently under development. Clicking on the button will redirect you to the launching soon page of the website.

Estimated launch of MVP: March 2024

GDG Website

THE PROBLEM

Building a Website for Vancouver's Developers

Google Developer Groups are a community of developers interested in working with the company's products. In late 2023, Vancouver's branch wanted to grow the community.

The problem? They needed a group of volunteers to design and create their brand new website to act as a marketing tool but didn't have the time or monetary resources. Their previous website suffered from inconsistent and unresponsive design.

GDG Vancouver's previous website.

PHASE 01 - IDEATION

Meeting my Team and Ideating

PHASE 01 - Team Intro and Wireframing

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.

Me and my team of Jr. UX Designers.

Inspiration

The Site Maps and User Flows were completed by a previous team. We started our journey by forming moodboards to draw inspiration. In adherence with Google's design language, we settled on having a simple layout but, with our own unique twists gathered from our inspiration.

Lo-Fi Wireframes

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.

Phase 1 - Challenges

Being a team of three Jr. Designers; we lacked experience in designing a deliverable product. However, we helped each other through the phase by sharing our knowledge to strengthen each other's weaknesses.

Example of Assistance

We shared various knowledge over terms and skills such as auto-layout and the concept of viewport. Sharing and teaching other concepts and skills allowed us to grow and mature through the project.

PHASE 02 - TRANSITION

Task Delegation

After finishing the ideation phase, we chose to develop different sections of the website. I was assigned to develop the event details and mentorship page. 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.

Create the event details page.
Create the mentorship page. ⭐
Communication between internal stakeholders to revise designs.

⭐ After talking with stakeholders, this was determined not to be an MVP Product and will be done post-launch.

Phase 2 - Goals

Create the prototype to be used for development.
Prepare for usability testing.

Create the prototype to be used for development.
Prepare for usability testing.

PHASE 02 - PROTOTYPE

Prototyping and Mockups

The second phase involved more independent work. My primary task is to develop the event details page.

Design Process

I started small, choosing to design components first then paste into the canvas. I spoke with my team and stakeholders to critique my design then reiterate until we get to the desired result.

Design Components

Paste into Canvas

Design Review

Reiterate

Challenges Faced

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.

Personal Challenges

Time constraints. Our team is all volunteers and struggled to find time to develop constantly.
Reiteration. Ensuring the Figma prototype does not break when changes are made.
Following developer practices. Making sure the product is able to be developed into a tangible product by developers.

Time constraints. Our team is all volunteers and struggled to find time to develop constantly.
Reiteration. Ensuring the Figma prototype does not break when changes are made.
Following developer practices. Making sure the product is able to be developed into a tangible product by developers.

Design Artifacts

Learning to create a document that will be used by future designers and developers proved to be a daunting task. In addition - refining the design to look and flow better. Pictured is the artifacts I used from an old design that is currently being used in the project.

A sample of the 1.0 design. It featured broken auto-layouts, older ideas, and is unorganized.

This section will updated over time. I am currently on creating Version 2 of the Design. - Last updated 02/06/2024

This section will updated over time. I am currently on creating Version 2 of the Design.

- Last updated 02/06/2024

This project is currently ongoing and constantly being reupdated to reflect the journey and process in real time.
Last updated 01/18/2024.

This section will updated over time. I am currently on creating Version 2 of the Design. - Last updated 02/06/2024

PHASE 3 TRANSITION (PENDING)

Usability Tests and Revision

Phase Three of the process involves performing usability tests and revising our designs as needed.

The tasks are currently pending as our project managers are determining who to delegate usability tests to based on our workload.

Phase 3 - Pending Tasks

Perform Usability Testing to find issues from users.
Synthesize the feedback from usability tests.
Communication between internal stakeholders to revise designs.

Perform Usability Testing to find issues from users.
Synthesize the feedback from usability tests.
Communication between internal stakeholders to revise designs.

Phase 3 - Goals

Identify and eliminate UX issues found by users.
Finish the MVP.
Prepare for developer hand-off.

Identify and eliminate UX issues found by users.
Finish the MVP.
Prepare for developer hand-off.

LEARNINGS AND TAKEAWAYS

Project Reflection

Thank you for reading! This is my FIRST time to be part of a team working with other UX Designers, Project Managers, and Stakeholders.

This section will be constantly updated as I learn new skills and tasks. This section will change or be condensed over time.

- Last updated 02/06/2024

This section will be constantly updated as I learn new skills and tasks. This section will change or be condensed over time.

- Last updated 02/06/2024

This project is currently ongoing and constantly being reupdated to reflect the journey and process in real time.
Last updated 01/18/2024.

Learnings

Think like the Developer. Learning how HTML and CSS work in-depth to ensure the product can be realistically created.
New Skills. Learning to create a design system, documentation, and annotations.
Communication. Talking with stakeholders and developers during development; skills not learned through conceptual case studies.

Takeaways

Ask for help when needed. Asking for help reduces problems down the line. We are a team and we want to see the product succeed.
Communication is key. Constant communication results in small easily fixable problems. Waiting too long can potentially create a giant mess.

NEXT PROJECTS

Discord

Created a ticketing system designed to easily find problematic posts in Discord servers.

DoorDash

Designed a filter for identifying food-borne allergens.

↑ Back to the Top ↑

HOME

6:59:44 PM