Role:

UX Designer and Web Developer

Tools:

Figma, React, Tailwind CSS, Motion Framer

WeCollective

Initial Brief

Visit The Website

The project began with discussions around improving an existing website. The primary goal was to modernize its structure, enhance visual clarity, and make it easier for users to explore the organization’s mission and work.

1. Understanding the Vision

The project began with conversations to define what wasn’t working on the existing site and what the team hoped to improve. I collaborated closely with stakeholders to understand the organization’s identity, goals, and user needs. We initially explored revising the site on WordPress, but quickly realized its limitations in delivering the custom experience we were aiming for.

1. Understanding the Vision

The project began with conversations to define what wasn’t working on the existing site and what the team hoped to improve. I collaborated closely with stakeholders to understand the organization’s identity, goals, and user needs. We initially explored revising the site on WordPress, but quickly realized its limitations in delivering the custom experience we were aiming for.

1. Understanding the Vision

The project began with conversations to define what wasn’t working on the existing site and what the team hoped to improve. I collaborated closely with stakeholders to understand the organization’s identity, goals, and user needs. We initially explored revising the site on WordPress, but quickly realized its limitations in delivering the custom experience we were aiming for.

2. Wireframing & Concept Development

I created multiple wireframe layouts in Figma to explore different approaches to content flow and structure. These drafts were shared with stakeholders to align on tone and functionality before moving forward. This phase focused on clarity, hierarchy, and setting a strong foundation for both mobile and desktop layouts.

2. Wireframing & Concept Development

I created multiple wireframe layouts in Figma to explore different approaches to content flow and structure. These drafts were shared with stakeholders to align on tone and functionality before moving forward. This phase focused on clarity, hierarchy, and setting a strong foundation for both mobile and desktop layouts.

2. Wireframing & Concept Development

I created multiple wireframe layouts in Figma to explore different approaches to content flow and structure. These drafts were shared with stakeholders to align on tone and functionality before moving forward. This phase focused on clarity, hierarchy, and setting a strong foundation for both mobile and desktop layouts.

4. Building from Scratch

I built the site from scratch using React and Tailwind CSS. This allowed full control over the design system, responsive layout, and reusability of components. I also integrated Framer Motion to add smooth transitions and subtle animations that enhanced the experience without distraction.

3. High-Fidelity Design

After feedback and revisions, I developed high-fidelity prototypes in Figma, designing for both phone and desktop screens. Every detail—from typography to spacing—was chosen to reflect the brand’s tone. Interactive Figma prototypes helped simulate user flow and get early validation before development.

5. Testing & Launch

Visit The Website

The site went through rounds of internal testing and feedback. I fine-tuned interactions, polished layout inconsistencies, and made sure the site performed well across devices. The final product was clean, responsive, and aligned closely with the original vision — simple to navigate and visually expressive.