Role:

UI/UX Designer and Developer

Tools:

React, Tailwind CSS, Figma, Framer Motion

Arabella Moves You

Visit the Website

The goal behind ArabellaMovesYou was to create a platform that showcases a fitness trainer’s brand, programs, and expertise in a clear and engaging way. The main challenge was that information about workouts, services, and trainer credentials is often scattered or presented in a way that doesn’t reflect the trainer’s style and energy. There was no modern, visually appealing hub for potential clients to explore and connect with the trainer.

To bring this idea to life, I developed the project using React and Tailwind CSS, which allowed for a clean, responsive, and modular design that highlights the trainer’s offerings and personality, making it easy for visitors to navigate and engage with the content.

1. Establishing the Vision

Arabella didn’t have an existing website, so the first step was to understand the trainer’s goals and audience. I researched websites of similar fitness trainers and wellness brands, then shared reference designs to align on a direction and tone that reflected Arabella’s energy and approach to fitness.

1. Establishing the Vision

Arabella didn’t have an existing website, so the first step was to understand the trainer’s goals and audience. I researched websites of similar fitness trainers and wellness brands, then shared reference designs to align on a direction and tone that reflected Arabella’s energy and approach to fitness.

1. Establishing the Vision

Arabella didn’t have an existing website, so the first step was to understand the trainer’s goals and audience. I researched websites of similar fitness trainers and wellness brands, then shared reference designs to align on a direction and tone that reflected Arabella’s energy and approach to fitness.

2. Research & Moodboarding

I gathered visual and structural inspiration from several fitness, wellness, and personal trainer websites. The goal was to capture a dynamic and approachable feel while keeping the site clear and easy to navigate. Once we aligned on a general look and layout, I moved into wireframing.

2. Research & Moodboarding

I gathered visual and structural inspiration from several fitness, wellness, and personal trainer websites. The goal was to capture a dynamic and approachable feel while keeping the site clear and easy to navigate. Once we aligned on a general look and layout, I moved into wireframing.

2. Research & Moodboarding

I gathered visual and structural inspiration from several fitness, wellness, and personal trainer websites. The goal was to capture a dynamic and approachable feel while keeping the site clear and easy to navigate. Once we aligned on a general look and layout, I moved into wireframing.

4. Building with React & Tailwind CSS

The website was built entirely from scratch using React and Tailwind CSS, giving me the flexibility to create a completely custom layout and iterate quickly. I focused on making the site fully responsive, with adaptable components that present Arabella’s content effectively and maintain a polished look on any device.

3. Designing in Figma

I created detailed Figma files for both desktop and mobile views. The designs focused on clarity, strong typography, and visual impact—highlighting Arabella’s programs, trainer profile, and media while keeping the aesthetic aligned with her energetic and approachable fitness style.

5. Testing & Delivery

Visit the Website

I tested the site on different screen sizes and fine-tuned layout and interaction details to ensure a smooth and polished experience. The final result is a dynamic, responsive website that presents ArabellaMovesYou’s brand clearly and effectively online.