Project Snapshot

TotalSelf-home-hero-header

CLIENT

TotalSelf Counseling and Fitness

INDUSTRY

Wellness, Psychotherapy, Nutrition, Personal Training

PROJECT SCOPE

Web Strategy, Creative Direction, Brand Refresh, Web Design & Development

TEAM

Mary Maru, web design
Secil Cornick, project management
Dusti Arab, copywriting

VISIT

mytotalself.com

CHALLENGE

TotalSelf’s website was 10 years old and had been worked on by different people over time. It had an overly complicated navigation system, lacked visual consistency and didn’t represent the client’s current services. The old website had been migrated into a responsive WordPress theme but wasn’t handled correctly, making it feel broken and offering a user-experience that was anything but friendly.

OUTCOME

A mobile-responsive, user-friendly website and distinct, refreshed visual brand. The website makes a direct connection with TotalSelf’s ideal clients. Some are seeking a holistic approach to therapy and fitness, and others are fellow psychotherapy practitioners wanting to expand their practice to help their clients more.

Desktop View

TotalSelf-home-hero-on-laptop

The Process

As part of the Discover phase, I created a combination Site Map / Content Map to show the hierarchical structure of the site. The Map also outlines the topics to include and on what pages they would appear. The second version with red text edits shows changes after a brainstorming session.
site-architecture-mytotalself
site-architecture-mytotalself_updated
hand-sketched prototypes are so great because they’re fast to create and easy to change. The simplicity and lack of tech helps keep client and designer focused on important messaging, marketing and information hierarchy.
totalself-initial-sketches-1
totalself-markedup-sketches-1
totalself-markedup-sketches-1
totalself-markedup-sketches-2

Mood Boards to get the conversation started around colors and typography, and the mood that’s created for site visitors by those elements and the selected images.

TotalSelf-style-tile-v2
vollmer-style-tile-2

Next came Grayscale wireframes move us quickly from analog to digital, bringing ideas to life in a live environment with clickable links to test possible customer journeys—all within the privacy and security of my development server.

TotalSelf-grayscale-comp-home
TotalSelf-grayscale-comp-about
TotalSelf-grayscale-comp-patients
The final website design showing both desktop and mobile views. Because Jeff’s counseling practice is so unique—he treats his patients holistically with personal training + nutrition counseling + psychotherapy—I love how we were able to visually express a higher level of energy than you might see on a traditional therapist’s website.
TotalSelf-final-home-screen-grab
TotalSelf-final-TSMethod-screen-grab
TotalSelf-final-mobile-home-screen-grab
TotalSelf-final-mobile-TSMethod-screen-grab

Interested?

Awesome. Let's talk.

© 2010–2022 Mary Maru Design. All rights reserved. Designed and developed by yours truly 👩🏻‍💻. Privacy Policy.