Body by Er Website Redesign
Case Study
Overview
This project focuses on a responsive website redesign for desktop and tablet screens.
Role
UX/UI Designer
Timeline
2 weeks
User Research
Sitemap
Branding
Prototyping
Wireframing
Problem
BodybyEr is outdated and underperforming.
While Erin Rosenberg attracts most clients through Instagram, her personal training website fails to convert her key demographic of clients—older adults who rely on websites for information, and fitness newcomers who need extra clarity and reassurance before booking a session.
Where was BodybyEr falling short and why were users were hesitating to convert?
Dense, text-heavy layouts — which feels overwhelming and difficult to quickly scan for key info
Missing information on pricing and availability — making the site feel less trustworthy
No built-in booking feature — forcing users to reach out manually, adding friction or hesitation to the booking experience
Research
What causes hesitation when discovering and booking a personal trainer?
My hypothesis was that clear pricing information and ease of booking play a large role in building user trust and encourage conversions. With research, I hoped to identify usability barriers and redesign the experience to feel more transparent, approachable, and action-oriented.
Methods:
User Interviews
POV & HMWs
Sitemap Redesign
User Interviews
I interviewed six people 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.
Finding the right match mattered deeply to users.
Users looked for clues about a trainer’s style and personality through things like success stories, before/after photos, intro videos, and client testimonials. This helped users imagine their own potential outcomes.
Transparency is paramount — especially around pricing and availability.
If a calendar or online booking form was missing from a trainer’s site, users were less likely to book.
The site wasn’t just a marketing tool, but a perception of the service itself.
“If I’m paying this much for a session, the website experience should match”
A surprising insight was how much weight users placed on a trainer’s website. They often judged the site as a reflection of the trainer’s professionalism and quality. The site wasn’t just a marketing tool, but part of the service itself.
How might we provide transparent pricing that reflects the trainer’s value, and professionalism?
User Flows
How a user will discover, evaluate, and ultimately book a personal trainer:
By mapping out user flows, we can identify when and where to present the most relevant information to users and create a smoother, more intuitive path to booking.
Design
Translating insights into a streamlined, user-friendly interface
One of the main challenges with Erin’s original site was that it was overcrowded with dense text. This made it hard for users to quickly scan or find key information.
The redesign prioritized breaking down content into digestible pages (e.g. About, Pricing, Booking) to facilitate and support user decision-making.
Throughout the process, feedback was gathered to identify friction points and fine-tune details. Small but meaningful changes—like improving visual hierarchy, increasing call-to-action buttons and incorporating brand elements—helped make the experience more intuitive for users.
Ultimately, the designs aimed to reflect Erin’s personality while delivering a streamlined, trustworthy experience that met users’ practical and emotional needs.
Low Fidelity Wireframes
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.
Visual elements (such as images) were also scattered throughout the site (as shown in the wireframes). This was a strategic move to reduce the monotony of text heavy layout, and bring in visual interest. These changes made it easier for users to find the information they needed and reduced cognitive load.
The screens were also designed with responsiveness in mind, optimized for desktop and tablet—the primary devices used by Erin’s older client base when browsing or booking online.
Desktop
Tablet
UI Kit
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.
For typography, I chose Be Vietnam Pro and Source Sans Pro—both sans-serif fonts that strike a balance between casual friendliness and professional clarity. These choices helped create a welcoming, trustworthy feel that aligned with Erin’s brand and personality.
Hi-Fi Wireframes
For the hi-fidelity wireframes, client testimonials were shortened and scattered across the home and booking pages to create a more digestible experience.
To maintain her tone and personality, I re-used copy from her original website, which helped reinforce her brand identity and reflect who she is as a trainer.
Net new to Erin’s original website were two essential features: a dedicated pricing page and an integrated booking form. These additions addressed major usability gaps uncovered during research—specifically the lack of pricing transparency and booking feasibility.
These pages were designed to make Erin’s services feel more accessible, trustworthy, and easier to engage with. The new site layout reduces overwhelm through better scanability and legibility which is critical for prospective clients—especially older users. Information is now easier to find, and supports users throughout their decision-making journey.
Usability Testing
Once the high-fidelity wireframes were completed, I conducted usability testing with six participants to ensure the design was intuitive and aligned with user expectations. The goal was to validate whether key tasks—like locating the booking form—could be completed easily, and to identify any points of confusion in the layout or content. Testing also provided feedback on content clarity, helping refine the site before final development.
What Worked
Booking Flow: 5 out of 6 users successfully navigated to and completed the booking form without assistance, and within a few minutes—indicating a smooth and intuitive process.
What Didn’t
Pricing Page UI: Users felt the Pricing page looked visually disconnected from the rest of the site and appeared unfinished causing some confusion.
Testimonial Formatting: There was confusion around inconsistent formatting of testimonials between the homepage and the Pricing pages.
Visual Design: Users recommended incorporating more brand colors to create a cohesive and unified brand identity across the site.
Select Revisions
Since this is the second section on the homepage, I focused on making the content stand out. I increased the font size and applied the brand’s primary color to the last line of text to emphasize the core message and capture user attention.
I also added a brief blurb outlining the available services to help users quickly understand what the website offers. this helps users orient themselves and understand the function of the website easily and efficiently.
Instead of placing client testimonials at the bottom of the homepage, I replaced the section with a clear CTA to book a session. This helps reduce friction and make the booking process more accessible. A light blue background was added to break up the white space and visually highlight the next step.
I prioritized updating the Booking page because it plays a critical role in converting interest into action. In the first iteration, the page felt unfinished. Since user interviews taught us that the website was viewed as a reflection of the trainer’s professionalism, this page felt like the make-or-break moment in deciding whether to book a class.
Key revisions included: expanding the price container and increasing the text size to make pricing information more prominent and transparent. This helps build trust and reduce guesswork. I also integrated the brand color to add visual interest and contrast.
Redesigned Website
Final Thoughts
This project sharpened my eye for layout and visual design, especially while crafting an aesthetically strong homepage. I learned 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.
Through research, I confirmed key user needs—like calendar integration, pricing clarity, and in-app booking—and prioritized them in my solutions. Most of my effort was spent refining the high-fidelity wireframes, as I iterated on layout and branding. Time constraints meant leaving out features like a return user login, but this helped me learn to prioritize for MVP. Moving forward, I’ll continue to ask more specific questions during feedback sessions to gather actionable insights.