Jeanna Dufraisse

Remote fitness coaching for busy women

https://jeannadufraisse.com ludovic bourgoin

Overview

Jeanna is a French personal trainer living in Paris. She is dedicated to helping women feel beautiful and attain self-confidence through fitness.

In addition to her one-to-one coaching practice, she wanted to launch a remote fitness coaching service. The programme would target busy women who are unable to meet with a coach, but still need to remain highly motivated in order to reach their fitness goals. With this service, Jeanna envisages the provision of personalised workout programs, along with advice and recommendations to her clients, on a 24/7 basis, using Messenger.

My role was to create a brand identity for this new service, and to design and develop the client's website. One of the challenges was to enable her potential clients to quickly and easily understand the coaching routine from the registration process to the personalized follow-up, in order to make it as clear and simple as possible 🤓.

Role

Branding, UI design, Responsive development

Timeframe

November - December 2019

Defining brand attributes

It can be difficult to define a brand and even more difficult to connect with the client about it. The client might not know what their brand stands for. What is important to her? Where do we begin? This is where brand attributes come in. They are here to help us define the brand. In this exercise I assisted my client in simplifying the process by breaking it down into 6 categories: Culture, Customers, Voice, Feeling and Impact. The sixth category being X-factor: what makes her different? By providing her with these prompts, I was able to engage with her and elicit answers that she felt were meaningful.

ludovic bourgoin

Getting inspired

One of the requirements for this project was to use the colour pink. So, I jumped straight away onto some websites that provided inspiration for the design of landing pages with the colour pink as a major visual attribute. After I found a couple of different pink-based design styles on Dribbble and Lapa, I submitted them to my client for review. We discussed web design styles (artistic, graphic, illustration-based, photography and minimal). That helped me to understand the visual direction she was aiming for. We would eventually go with a photography-based and minimalist design.

ludovic bourgoin

Creating a brand identity

I then worked with my client to develop a brand identity that would effectively communicate her values. Because she wanted to work with young women who need to be taken care of, it was important that she was perceived as being kind and caring. She also wanted to be perceived as trustworthy and reliable. I eventually defined the visual elements (typography, colors and iconography) based on these values.

ludovic bourgoin

Sketching

First step in the actual website creation process, sketching enabled me to define the global content architecture. Pen and paper drawing invites to constructive criticism and enables to explore and test various layout ideas. This eventually helps to make sure I’m in alignment with my clients. More on the process of sketching in the 4 steps sketch video.

Wireframing

Once I got client validation on these sketches, I jumped onto Figma to create low-fidelity wireframes. The wireframing step is essential, as it allows me to determine the layout and user interactions without all the distraction of colours, visuals, and even what most people would consider 'design'. While building the wireframes, I wrote a draft of all texts that I submitted to my client for review. We then worked together to create a final copy that had to be (1) easy to understand, (2) obvious and (3) unambiguous.

ludovic bourgoin

Prototyping

Once those wireframes with the final copy were validated by the client, I added previously designed brand identity elements to create a clean prototype of what the site would look like.

ludovic bourgoin

Developing responsive layouts with CSS Grid

A grid brings cohesion to a composition. It helps people understand stories by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to give it.

Below is a presentation of the way I used CSS Grid properties within the benefits section of the website.

On the mobile view, each block would be displayed upon one another. On tablets though, I wanted the image display to be centered at the top, then the benefit elements to be displayed in 2 columns. On a larger screen, I wanted the 4 items to gravitate around the image. This layout cannot be achieved using only Flexbox. I created a different grid set for each of the 3 layouts using CSS Grid properties, as follows:

responsive grid layouts

In the desktop view above (at the right), the image spreads from row 1 to row 2 in the second column. In the medium-screen view (in the middle), the image spreads to the first row, from column 1 to column 2. Here is the CSS for the desktop view:

atom css grid screenshot

Each media query creates a different grid. This way, I can be free to display my items where I want in function of the screen size. I created a CodePen on which I reproduced the full component.