SWITCH FIT

The 8-week online program that turns your metabolism to burning fat.

 
switch_spacing.png

visual design / ux / visual identity

top_spacing.png
 
newtoplogosw.jpg
 
 

THE CHALLENGE

The founders of SwitchFit (a fitness and nutrition platform focused on the improvement health) were looking to position themselves in the competitive market of fitness and nutrition online platforms. So, they needed a new logo and image, as well as a new website from scratch and a redesign of its online platform dashboard. All of this to backup the product proposal, with the objective to carve a niche in the market and compete with existing online fitness and nutrition platforms.

 

THE WORK

My work for SwitchFit was the creation of the logo, the visual design and illustration (website), and the UX (dashboard and website)

 

THE OUTCOME

Logo

The idea right from the beginning was to base the logo on the proposal of SwitchFit (diet based in food without sugar, to become a “fat” burner instead a “sugar” burner, and also combine these nutritional aspects with fitness and exercise). Naturally, the first challenge was to figure out how achieve an optimal outcome for this concept.

So, the two main objectives were in one hand to represent the core concept of SwitchFit (food without sugar and combined with fitness) and on the other hand, to create a powerful and dynamic logo, related with the nature of the platform, with the capacity to work also even without text, as a symbol, in order to expand the possibilities related to potential branding.

After so many ideas and concepts, the final decision was to use a flame (making reference to the concepts “fat burner” and "sugar burner") as a base for the logo. At the beginning of the flame there is a double wick, representing fitness and the proper nutrition (food without sugar). Together they become a "fat burner", and the outcome is to make able the “switch” and achieve the "fit".

logo.png

Although the original idea was to create a more detailed bicolor logo (purple and orange), in order to create a more usable logo, the decision was turn the design into a one solid color, but trying to keep the connotations of the old design. A dynamic and subtle blue was chosen.  

fin.jpg

As commented, the idea was to create a very recognizable logo that with easy adaptation could be represented for all merchandising, as represented here:

Example of very basic potential merchandising

Example of very basic potential merchandising

 

Illustration & visual design (website)

Related to the visual design and illustrations style, it was primarily and mainly a flat, clean style, with a light, pleasing and subtle colors. The focus was to evoke nature and health, and at same time dynamism but in a calm way. As well, the illustrations and visuals had to help create a feeling of quality and trust, to generate certainty in the user.

Some elements, like the engines in the diagram (see below "How it works") are done in a more realistic style, in order to differentiate from others elements on the page and make them a focus point.

The overall idea was to create a very visual and quick communication, all backed up with proper copywriting in order to solve all kind of doubts, making it very easy for the user to understand what SwitchFit is and how it works, while emanating a feeling of quality and trust at same time.

Example of illustrations made for the SwitchFit's website

Example of illustrations made for the SwitchFit's website

 
 
"How it works" (ver.1)

"How it works" (ver.1)

"How it works" (ver.2)

"How it works" (ver.2)

 
 
Example of illustrated diagram

Example of illustrated diagram

Example of animated diagram (1)

Example of animated diagram (1)

Example of animated diagram (2)

Example of animated diagram (2)

 
Website: Mainpage and Tour

Website: Mainpage and Tour

Example of Mail

Example of Mail

 

Dashboard

The core of Switch Fit is an online dashboard, divided in various areas; first, a header with a graphic following a user in some aspects and delivering a different nature info. Below an area, the “Current Week”, where the user introduces his personal info about mood, hunger level, weight, etc… every day of the week. Finally, a time table, when the user can see the routines to follow and the dishes to eat.

 

SwitchFit dashboard

SwitchFit dashboard

The work was done mainly on the UX of the platform. The primary objectives were to have users quickly and easily understand all the info, as well the outcomes and the objectives to accomplish; as well as the easy introduction of the data, independently of the device where the user was. All of this in order to guide users to follow the process in the best way possible.

top_spacing.png