SWITCH FIT

El programa online de 8 semanas que orienta el metabolismo hacia la quema de grasa.

 
switch_spacing.png

diseño visual / ux / identidad visual

top_spacing.png
 
newtoplogosw.jpg
 
 

EL RETO

Los fundadores de SwitchFit (una plataforma de fitness y nutrición, fundamentada en el aumento de la quema de grasas gracias al cambio metabólico) buscaban posicionarse positivamente en su competitivo mercado. Para ello, necesitaban un nuevo logotipo y una nueva imagen visual, así como crear un nuevo sitio web desde cero y un profundo rediseño de su "dashboard" online. Todo ello para aumentar la propuesta del producto, con el objetivo de forjar un nicho en el mercado y competir con las plataformas ya existentes de fitness y nutrición en línea.

 

EL TRABAJO

Mi trabajo para SwitchFit fue la creación de la identidad visual, incluyendo el logotipo, así como todo el diseño visual y la ilustración (sitio web) y trabajo desarrollado tanto en la usabilidad del "dashboard" como de la web.

 

EL RESULTADO

Logo

La idea desde el principio fue basar el logotipo en la propuesta de SwitchFit: una dieta específica basada en alimentos sin azúcar y ejercicio (para permitir al metabolismo del cuerpo convertirse en un quemador de grasa en lugar de un quemador de azúcar) y, a su vez, combinar también estos aspectos nutricionales con la forma física y el ejercicio. 

Dos fueron los objetivos principales: por un lado, representar el concepto básico de SwitchFit (alimentos sin azúcar y combinados con ejercicio físico) y por otro lado crear un logotipo que fuera potente y dinámico, relacionado con la naturaleza de la plataforma, que tuviera la capacidad de evocar incluso sin texto, con el fin de ampliar las posibilidades relacionadas con el potencial "merchandising".

Después de varias ideas y conceptos, la decisión final fue la de utilizar una llama (haciendo referencia a los conceptos "quemador de grasa" y "quemador de azúcar") como base para el logotipo. Al comienzo de la dicha llama hay una mecha doble, que representa el ejercicio y la nutrición adecuada (elementos necesarios para "activar la llama"). Así pues, juntos se convierten en un "quemador de grasa", y el resultado es lograr el cambio (Switch) y lograr estar en forma (Fit).

logo.png

Aunque la idea original era crear un logotipo bicolor más detallado, con degradados, finalmente se optó por crear un logotipo monocolor, en pos de una mayor usabilidad, pero tratando de mantener las connotaciones del diseño anterior. Por ello se eligió un azul que representase dinamismo pero a la vez sutileza.

fin.jpg

La idea era crear un logotipo muy reconocible que con una fácil adaptación que pudiese reproducirse fácilmente en los materiales de "merchandising" básico de la marca:

Ejemplo de "merchandising" básico

Ejemplo de "merchandising" básico

 

Ilustración y diseño visual (para la web)

En relación al diseño visual y al estilo de las ilustraciones, se buscó sobretodo un estilo limpio y dinámico, con colores suaves y sutiles. El objetivo era evocar la naturaleza y la salud, y al mismo tiempo que actividad, pero de una manera relajada y tranquila. Además, las ilustraciones y las imágenes debían ayudar a crear una sensación de calidad, para generar confianza en el usuario.

Algunos elementos concretos, como el diagrama de los motores (ver más abajo el diagrama "Cómo funciona") se realizaron en un estilo más realista, con el fin de diferenciarse de otros elementos en la página y convertirlos de esta manera en un punto de atención más específico.

La idea general era crear una comunicación muy visual y rápida, todo respaldado con una redacción de los textos adecuada dirigida a resolver cualquier tipo de duda que se le pueda plantear al usuario. De esta manera, es muy fácil para éste entender qué es SwitchFi y cómo funciona, al mismo tiempo que emana una sensación de calidad y confianza al mismo tiempo. Todo ello invita al usuario a decantarse por esta plataforma de fitness y nutrición.

Ejemplo de ilustraciones hechas para la web de SwitchFit.

Ejemplo de ilustraciones hechas para la web de SwitchFit.

 
 
"Cómo funciona" (ver.1)

"Cómo funciona" (ver.1)

"Cómo funciona" (ver.2)

"Cómo funciona" (ver.2)

 
 
Ejemplo de diagrama ilustrado.

Ejemplo de diagrama ilustrado.

Ejemplo de diagrama animado (1)

Ejemplo de diagrama animado (1)

Ejemplo de diagrama animado (2)

Ejemplo de diagrama animado (2)

 
Website: Página principal y Tour.

Website: Página principal y Tour.

Ejemplo de correo electrónico.

Ejemplo de correo electrónico.

 

Dashboard

El núcleo principal de SwitchFit es un "dashboard" (tablero) en línea, el cual está dividido en varias áreas; primero, un encabezado con una gráfica mostrando un seguimiento por días y semanas del peso del usuario y su evolución, así como los "milestones". Debajo, el área "Current Week" (semana actual), en donde el usuario introduce su información personal sobre el estado de ánimo, el nivel de hambre, el peso, etc. cada día de la presente semana. Finalmente, encontramos un horario en el que se le muestra al usuario las rutinas a seguir y los recetas de los diferentes platos de las dietas sugeridas.

 

SwitchFit dashboard

SwitchFit dashboard

El trabajo que se realizó principalmente en la plataforma fue el relacionado con el UX. Los objetivos principales de éste fueron que los usuarios entendieran rápida y fácilmente toda la información, así como los resultados y los objetivos a lograr por un lado y, por el otro, la fácil introducción de los datos, independientemente del dispositivo donde estaba el usuario. Todo ello encaminado a facilitar a los usuarios el seguimiento del proceso de la mejor manera posible.

top_spacing.png