SWITCH FIT

8-week online program that turns metabolism on burning fat.

 
switch_spacing.png

visual design / ux / visual identity

top_spacing.png
 
newtoplogosw.jpg
 
 

THE CHALLENGE

The creators of SwitchFit (a fitness and nutrition platform focused on the improvement of the healthy) were looking for a logo, a website from scratch and a redesign of its online platform dashboard in order to create a new product looking to compete with the existing fitness online 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 was right from the beginning to base the logo on the proposal of SwitchFit (to base the diet in food without sugar, to become a “fat” burner instead a “sugar” burner,  and combine that with fitness). Naturally, the first challenge was how to see to this concept to achieve an optimal outcome.

 

So, the two main objectives were represent the core concept of Switch (food without sugar and combined with fitness) in one hand and in the other hand, create a powerful and dinamic logo, related with the nature of the platform, with 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 use the 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 doble wick, representing fitness and the proper nutrition (food without sugar). Together they allow becoming a "fat burner", and the outcome is to make able the “switch” and achieve the "fit".

logo.png

Although the original idea was create a bicolor logo (purple and orange) and more detailed, 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. A dinamic and subtle blue was chosen.   

fin.jpg

As commented, the idea was create a logo very recognizable and with easy adaptation in a very basic merchandising, as represented next:

 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 primarly and mainly a flat, clean style, with a light, pleasing and subtle color. The focus was to evoke nature and health, and at same time dinamism but in a calm way. As well, illustrations and visual had to help to create feeling of quality and trust, to generate certitude in the user.

 

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

 

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

 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 areas; first, a header with a graphic following user in some aspects and deliver a different nature info. Below an area, the “Current Week”, where user introduces his personal info about mood, hunger level, weight, etc… every day of the week. Finally, a time table, when user can see the routines and the dishes to follow.

 

 SwitchFit dashboard

SwitchFit dashboard

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

top_spacing.png