Hey everyone! I’m taking a break from client work to dive into a past portfolio project and share the process behind it. This project was a website redesign for Baylee Allison, a women’s nutritionist, trainer, and hormone coach. It’s been a couple of months since I wrapped it up, so let’s revisit the Figma prototype and explore my design decisions, challenges, and approach.

Initial Impressions and Goals

I discovered Baylee through her Instagram profile while reaching out to trainers and coaches to niche down my web design services. Her original website was packed with valuable information about her services, like one-on-one coaching, nutrition plans, and programs for weight loss, hormone balance, and birth control detox. However, the site felt overwhelming—too much text, inconsistent design, and a layout that could use a refresh.

My goal was to create a cleaner, more organized, and visually appealing website that highlighted Bailey’s expertise and personal story. She’s a great example of her own methods, having overcome PCOS-related acne, so I wanted to weave that narrative into the design with images and concise explainer text. I also aimed to make the site feel more feminine, using scripty fonts and a colorful, approachable aesthetic.

Design Approach: Embracing a Bento Box Style

For this project, I decided to try a Bento Box-style layout, which I hadn’t done before. This grid-based design organizes content into clean, rounded-edge sections, making it visually engaging and easy to navigate. I stuck to Bailey’s existing brand colors to maintain consistency but chose a unique typeface, Bricolage Grotesque, from Adobe Fonts (also available on Google Fonts). Its rounded, non-blocky look complemented the feminine vibe I was going for, working well for both headers and subheadings.

Hero Section: Telling Bailey’s Story

The hero section was key to establishing Bailey’s credibility. I incorporated short Instagram video clips to showcase her expertise and lifestyle. Using SnapInsta.app, I downloaded her videos with audio, edited them in Premiere Pro, and added them to the Figma prototype. To enhance user experience, I set the video to display in a luminosity blend mode initially, switching to full color on hover with a half-second delay to start playback. This created an engaging, interactive element that looped back to the beginning after playing.

I also included a simple photo slideshow to highlight Bailey’s transformation process. On click, it transitions to the next photo after a half-second delay, without auto-looping, keeping the interaction intuitive. This section emphasized her credentials as a certified personal trainer with over 100 clients and her personal journey with PCOS.

Client Wins Slider: A Challenging Experiment

One of the trickiest parts was building a “client wins” slider to showcase before-and-after results. This was my first attempt at creating a slider from scratch, and it wasn’t perfect. I added an arrow icon to indicate it was interactive, as it might not be immediately clear to users. The slider used a masked image with rounded corners, allowing users to drag it to reveal the “after” photo. I set up a smart animate transition with a 600-millisecond delay for a smooth effect. While the concept seemed simple, getting the reveal to work properly was challenging, especially since I was learning as I went. Still, it was satisfying to see it come together.

Services Section: Streamlining Information

The services section was designed to organize Bailey’s offerings—nutrition coaching, online personal training, supplements, and specialized programs—into a clean, clickable format. Each service expands on click to reveal more details, using a smart animate transition at 125 milliseconds to slide down smoothly. One challenge was preventing overlap between rows when expanding; initially, the bottom row would get pushed down incorrectly. I ensured all components were identical in their collapsed and expanded states to avoid layout issues.

I condensed the text to focus on the core value of each service, ending with pricing and a call-to-action linking to a sign-up page. This kept the section tight and user-friendly, avoiding the information overload of the original site.

Reflections and Takeaways

Looking back, I’m proud of this project. It pushed me to try new techniques, like the Bento Box layout and the client wins slider, and to step out of my comfort zone with a more feminine design. Each portfolio project is a chance to challenge myself and avoid falling into a repetitive style. While I faced some struggles—especially with the slider’s setup—I learned a lot, and the result was a solid addition to my portfolio.

This project shows how a thoughtful redesign can transform an overwhelming website into something clean, engaging, and user-focused. I hope you found this walkthrough valuable! Let me know your thoughts, and stay tuned for more portfolio breakdowns.

Peace!