Melbourne Exercise Physiology Group
Melbourne Exercise Physiology Group
A professional and friendly Exercise Physiology clinic that focuses on rehabilitation for cancer patients among other issues.
Category
Website
Year
2024
Tech
Framer Figma
Client
Dale Ischia
Site
Link
Link
Link
Link
Context + Role
Context + Role
Melbourne Exercise Physiology Group (MEPG) was in need of a complete website overhaul. While Dale wanted the business to feel experienced, personal, comforting, and in control, the old website told a different story; it felt cold, overly complex, and generic.
Initially, my role was to give the existing site a refresh. But after diving into its design, navigation, and platform, it became clear that a simple facelift wouldn’t cut it. Dale and I agreed that a ground-up redesign was the best path forward. To kick things off, I created a wireframe of the homepage, giving Dale a glimpse of what the new site could be. That vision earned the green light to fully rebuild MEPG’s website in Framer, ensuring it would be as comforting and functional as the services they offer.
Context + Role
Melbourne Exercise Physiology Group (MEPG) was in need of a complete website overhaul. While Dale wanted the business to feel experienced, personal, comforting, and in control, the old website told a different story; it felt cold, overly complex, and generic.
Initially, my role was to give the existing site a refresh. But after diving into its design, navigation, and platform, it became clear that a simple facelift wouldn’t cut it. Dale and I agreed that a ground-up redesign was the best path forward. To kick things off, I created a wireframe of the homepage, giving Dale a glimpse of what the new site could be. That vision earned the green light to fully rebuild MEPG’s website in Framer, ensuring it would be as comforting and functional as the services they offer.
Restructure + Design
Restructure + Design
One of the biggest challenges with MEPG’s original website was navigation and site structure. MEPG operates as a complex network of programs, classes, organisations, and services, all trying to fit under one roof. A standard call-to-action or traditional layout wasn’t going to cut it.
To solve this, I implemented a bento-box design technique, allowing the site to present clear user pathways from the get-go. This approach visually organises key segments, making it easy for visitors to find exactly what they need. Quick links to major sections are heroed at the top of each page, ensuring seamless navigation.
Beyond structure, the overall visual design needed a serious refresh. The old site lacked cohesion in layout, colors, icons, typography, visual and data hierarchy, and even border radii. Using MEPG’s existing logo colours as a foundation, I introduced neutral and complementary tones to soften the aesthetic and create a more intentional use of brand colours. Now, these colours serve a purpose; highlighting key sections, buttons, and important information, rather than overwhelming the design.
Because the site is text and data-heavy, I focused on breathing room, introducing generous padding and negative space to reflect the comfort and ease that MEPG provides to its patients. For pictorial navigation, I utilised rounded Material Symbols, making information easier to digest without visual clutter. Soft, rounded corners throughout the design enhance the welcoming feel, while the header typography remains slightly more traditional, striking a balance between approachability and professionalism, and ensuring readability for an older audience.
Lastly, I repurposed and redrew one of MEPG’s existing leaf-based logos, weaving it into the site as a subtle motif. This added a natural, cohesive touch, reinforcing MEPG’s identity in a thoughtful and understated way.
Restructure + Design
One of the biggest challenges with MEPG’s original website was navigation and site structure. MEPG operates as a complex network of programs, classes, organisations, and services, all trying to fit under one roof. A standard call-to-action or traditional layout wasn’t going to cut it.
To solve this, I implemented a bento-box design technique, allowing the site to present clear user pathways from the get-go. This approach visually organises key segments, making it easy for visitors to find exactly what they need. Quick links to major sections are heroed at the top of each page, ensuring seamless navigation.
Beyond structure, the overall visual design needed a serious refresh. The old site lacked cohesion in layout, colors, icons, typography, visual and data hierarchy, and even border radii. Using MEPG’s existing logo colours as a foundation, I introduced neutral and complementary tones to soften the aesthetic and create a more intentional use of brand colours. Now, these colours serve a purpose; highlighting key sections, buttons, and important information, rather than overwhelming the design.
Because the site is text and data-heavy, I focused on breathing room, introducing generous padding and negative space to reflect the comfort and ease that MEPG provides to its patients. For pictorial navigation, I utilised rounded Material Symbols, making information easier to digest without visual clutter. Soft, rounded corners throughout the design enhance the welcoming feel, while the header typography remains slightly more traditional, striking a balance between approachability and professionalism, and ensuring readability for an older audience.
Lastly, I repurposed and redrew one of MEPG’s existing leaf-based logos, weaving it into the site as a subtle motif. This added a natural, cohesive touch, reinforcing MEPG’s identity in a thoughtful and understated way.
Website
Website
With the building blocks in place, I presented Dale with a streamlined sitemap and brought the vision to life using my favorite tool: Framer. The result? A sleek, functional, and fully responsive website that balances clarity, ease of use, and a modern aesthetic.
A key focus was editability. I designed flexible, reusable components for dynamic content like the class timetable, team members, class details, and pricing, giving Dale and her team the autonomy to update the site without needing a developer. Additionally, all form submissions feed directly into Google Sheets, making it easy for the team to access and manage inquiries in real time.
The site is, of course, fully responsive, ensuring a seamless experience across desktop, tablet, and mobile. I also incorporated fluid animations and custom-built sections to keep the experience engaging without overwhelming the user.
Looking ahead, we’re planning to integrate Outseta to introduce an education segment with a subscription system. This will transform the site into a revenue-generating platform, allowing Dale and her team to offer exclusive educational content to their audience.
Website
With the building blocks in place, I presented Dale with a streamlined sitemap and brought the vision to life using my favorite tool: Framer. The result? A sleek, functional, and fully responsive website that balances clarity, ease of use, and a modern aesthetic.
A key focus was editability. I designed flexible, reusable components for dynamic content like the class timetable, team members, class details, and pricing, giving Dale and her team the autonomy to update the site without needing a developer. Additionally, all form submissions feed directly into Google Sheets, making it easy for the team to access and manage inquiries in real time.
The site is, of course, fully responsive, ensuring a seamless experience across desktop, tablet, and mobile. I also incorporated fluid animations and custom-built sections to keep the experience engaging without overwhelming the user.
Looking ahead, we’re planning to integrate Outseta to introduce an education segment with a subscription system. This will transform the site into a revenue-generating platform, allowing Dale and her team to offer exclusive educational content to their audience.
Outcomes
Outcomes
MEPG was more than just a project, it was an opportunity to push my skills and prove that I could tackle a large-scale redesign while delivering something functional, visually compelling, and tailored to the client’s needs.
I’m proud of what I’ve built (and continue to build) with Dale, creating a site that not only looks great but empowers her team with autonomy and efficiency. This project also deepened my expertise in Framer, refining my ability to craft custom, high-quality web experiences.
Outcomes
MEPG was more than just a project, it was an opportunity to push my skills and prove that I could tackle a large-scale redesign while delivering something functional, visually compelling, and tailored to the client’s needs.
I’m proud of what I’ve built (and continue to build) with Dale, creating a site that not only looks great but empowers her team with autonomy and efficiency. This project also deepened my expertise in Framer, refining my ability to craft custom, high-quality web experiences.
