BodybyEr

Redesigning Trust for First-Time Fitness Seekers

BodybyEr is a personal training brand run by Erin Rosenberg. While Erin grew her business through Instagram, her outdated website failed to convert key demographics—older adults and fitness newcomers—into clients.

Methods: User Research, Wireframing, Prototyping

Role

UX/UI Design, Team of 1

Timeline

3 weeks

Tools

Figma, Figjam

The Challenge

Turn website drop-offs into confident bookings

The original BodybyEr site was dense with text, lacked pricing and calendar availability, and offered no direct booking functionality — leading to overwhelm, distrust, and friction for users. Her target demographic, of older adults and fitness beginners, especially suffered from content overload and unclear next steps.

Original Website (Pre-Redesign)

Research

Understanding user pain points and goals

I interviewed 6 participants who had worked with personal trainers in the past. The goals of the interviews were to understand how users found, assessed, and ultimately chose their trainer.

Takeaways:

  • Users want authentic signals of personality— testimonials, stories, before/after photos. This helped them imagine their own potential outcomes.

  • Transparency is non-negotiable— pricing, availability, and booking tools build confidence. If these elements were missing from a site, users were less likely to book.

  • The website reflects the service — users judged professionalism by the online experience.

How might we transform the website from an information barrier into a conversion catalyst that provides the clarity, reassurance, and seamless booking experience hesitant beginners need to confidently start their fitness journey?

Design Strategy

Enabling discovery through a more streamlined UI

By mapping the journey from discovery → evaluation → booking, I identified decision points where users dropped off. The redesign prioritized breaking down content into digestible pages (e.g. About, Pricing, Booking) to support user decision-making and reduce cognitive load.

Ultimately, the designs aimed to reflect Erin’s personality while delivering a streamlined, trustworthy experience that met users’ practical and emotional needs.

Design Execution

Addressing usability gaps

To improve scanability and overall readability, one key decision was to break up the original site’s text-heavy layout. This was achieved by editing down the content and distributing it across clearly defined pages: Home, Pricing, About, Contact, and include a Booking feature in-app.

V1 Design

This was the original design, however, I later updated the UI after some skill refinement.

UI Kit

Establishing a principle design system

The color palette was refreshed to feel more youthful and approachable while still retaining the familiar blue hue from Erin’s original website. To better reflect her warm, bubbly personality, I introduced a cheerful yellow to evoke feelings of positivity, friendliness, and energy.

High Fidelity Wireframes

Eliminating friction and encouraging conversion

The new site layout reduces overwhelm through better scannability and legibility which is critical for prospective clients—especially older users. Two essential features were added to Erin's website: a dedicated Pricing page and an integrated Booking form. These were designed to make Erin’s services feel more accessible, trustworthy, and easier to engage with. Information is now easier to find, and supports users throughout their decision-making journey.

To maintain the tone and personality:

  • Re-used copy from the original website, which helped reinforce Erin's brand identity and reflect who she is as a trainer

  • Shortened client testimonials and scattered them across the Home and Booking pages to create a more digestible experience.

V2 Design

This was the updated design after UI skills refinement.

Retrospective and refinement

After extensive skills refinement, the website underwent a visual evolution. The UX, like copy and workflows, remained virtually untouched based on positive user feedback, but the UI, like typography, logo, and color scheme, was updated.

The original color palette, while bubbly and bright, felt too child-like and undermined Erin's professionalism. The new colors however, strike a balance: more subtle yet still playful. To maintain softness, corner radii were increased across all components, creating a gentler, more approachable feel.

Strategic use of white space and color blocks improved visual hierarchy and breathing room. The design now guides the eye more naturally through each page. Typography choices reinforced clarity and readability, while the refreshed logo better aligned with the elevated brand positioning.

Final Thoughts

Final thoughts

The contrast from the original UI to the updated redesign, reveals the evolution from enthusiastic but unfocused, to confident and purposeful. Each design decision works to build trust while preserving the warmth that makes the service feel personal and accessible.

This project helped me to quickly evaluate an existing site and recommend clear, accessible improvements. The biggest design challenge was mapping user flows and finalizing typographic decisions, but I enjoyed exploring visual elements that contributed to the brand’s identity.