Cactus MrMarcel Samuel - Oscar 28 May 16

NUE STRAS
12 CAGADAS
COMO DIS EADORE S UX-UI
Illustration by:
Mauro Gatti
MrMarcel Cactus Sbado 28 mayo 2016

Samuel Hermoso - scar Santos
UX/UI
M R M A R C E L S C H O O L - S B A D O 2 8 M AY O 2 0 1 6
SAMUEL HERMOSO - SCAR SP
UX/UI
USER
EXPERIENCE
INTERFACE
UX/UI
USER
EXPERIENCE
INTERFACE
NUESTRA EVOLUCIN:
DISEADOR
GRFICO
ARTE-
FINALISTA
DIRECTOR DE
ARTE
SENIOR ART
DIRECTOR
UI
DESIGNER
UX
DESIGNER
PRODUCT
DESIGNER
TOP JOB TITLES

T H AT D I D N T E X I S T 8 Y E A R S A G O
#1
#2
#3
IOS DEVELOPER
ANDROID DEVELOPER
ZUMBA INSTRUCTOR
FUENTE: LINKEDIN
TOP JOB TITLES

#1
#2
#3
IOS DEVELOPER
ANDROID DEVELOPER
ZUMBA INSTRUCTOR
FUENTE: LINKEDIN
TOP JOB TITLES

#1
#2
#3
IOS DEVELOPER
ANDROID DEVELOPER
ZUMBA INSTRUCTOR
#4
SOCIAL MEDIA INTERN
#5
D ATA S C I E N T I S T
#6
UX/UI DESIGNER
FUENTE: LINKEDIN
PRECIOS POR HORA FREELANCES USA
H E L L O B O N S A I . C O M / R AT E S
PRECIOS POR HORA FREELANCES USA
$40/60
POR HORA
H E L L O B O N S A I . C O M / R AT E S
PERFILES
QUE ENCONTRAREMOS
EN NUESTRO CAMINO
PERFILES
ACCOUNT EXECUTIVE
Tiene que estar para el lunes
PERFILES
C O P Y W R I T E R C R E AT I V O
Masturbo mi mente para eyacular grandes ideas
ALGUNOS PERFILES
C R E AT I V E D I R E C T O R
A esto le falta algo, pero no s qu.
ALGUNOS PERFILES
C O N S U LT O R U X
Si no lo entiendes es que no eres el target
ALGUNOS PERFILES
PRODUCT DESIGNER
Esto no lo va a comprar nadie
ALGUNOS PERFILES
SEO-SEM
Es ms importante Google que nuestros usuarios
ALGUNOS PERFILES
PRODUCT OWNER
Esto no se desarroll en el sprint anterior?
ALGUNOS PERFILES
CEO
Pero a este proyecto, cunto le queda?
NUE STRAS
12 CAGADAS
COMO DIS EADORE S UX-UI
Illustration by:
Mauro Gatti
MrMarcel Cactus Sbado 28 mayo 2016

Samuel Hermoso - scar Santos
CAGADA 1
TERMINAR
EMPEZAR UN PROYECTO
SIN COBRAR
CAGADA 2
REBAJAR TU PRECIO
EN LA NEGOCIACIN
DISEO UX-UI
Ecoembes TBWA
V 1.0
P R E S U P U Samuel
E S THermoso
O S : & A L ACla atencin
A N Cde:EDiana Benito TBWA
scar Santos
Fecha: 1 mar. 2016
616097787
Ttulo del proyecto: UX-UI Microsite Campaa Fotos en Mapa - Ecoembes
Nmero de Presupuesto: 16029
Validez del presupuesto: 30 das
samuelhermoso@gmail.com
UX-UI Microsite Campaa Fotos en Mapa Ecoembes
PRESUPUESTO
DISEO UX-UI
PRESUPUESTO
DISEO UX-UI
Ecoembes TBWA
Ecoembes TBWA
V 1.0
V 1.0
Samuel Hermoso &

scar Santos
A la atencin de: Diana Benito TBWA
Samuel Hermoso &

scar Santos
Fecha: 1 mar. 2016
616097787
616097787
Colegiata 9, local 2
28012 Madrid
Presupuesto
Diseo
28012
Madrid
Jornadas
Cantidad
Estudio briefing y Documento de referencias

comentado
290
Primera versin Wireframes / Prototipos
290
Ajustes Wireframes
0,5
145
Propuesta diseo y Look & Feel versin desktop

1440 px
580
Propuesta diseo y Look & Feel versin mvil

320 px
1,5
435
Revisiones de diseo y ajustes propuesta
290
Total
2.030
Descripcin
Brief y Documento de referencias
UX

28012 Madrid
Alcance del proyecto

Se pide un estudio de experiencia de usuario (UX), prototipado y el diseo de
interfaz (UI) para un microsite single page sobre fotos geolocalizadas para la
empresa Ecoembes.
Diseo UI

empresa Ecoembes.
Se trabajarn dos versiones del microsite:

1. Mvil 320 px de ancho
Perfiles
2. Desktop 1440 px de ancho

La finalidad del proyecto es la participacin de los usuarios en la plataforma y
poner en valor a la marca Ecoembes con esta iniciativa.
UX Designer
UI Designer, Visual Designer
Condiciones
Entregables

El presupuesto est realizado en base al alcance en jornadas descrito en este
Pago del 50% a la aceptacin del presupuesto y 50% restante a la entrega
del proyecto.
Se entregar el siguiente material:

1. Documento de referencias comentadas que nos permitir tomar
decisiones tanto a nivel funcional como usabilidad y diseo. Analizaremos
documento.
buenas ejecuciones llevadas a cabo en trabajos similares.

2. Wireframes versin mvil y desktop en formato PDF/PNG. Para ms de 3
pantallas prototipadas se utilizar la plataforma InVision para compartir
dicho material y trabajar los ajustes de forma ms operativa directamente
con el cliente.
3. Diseo de interfaz y pantallas en formato Sketch 3 y compartido a
travs de la plataforma zeplin.io para que el equipo de maquetacin front
pueda trabajar de la manera ms cmoda importando estilos CSS y assets
directamente sin necesidad de tener Sketch instalado.
!1
Los precios no incluyen IVA.

Nmero de cuenta IBAN:
Samuel Hermoso Snchez
ES46 1465 0100 9618 0049 8504
Atentamente,
Samuel Hermoso & scar Santos
Entregables
!2


pantallas prototipadas se utilizar la plataforma
para
S AInVision
MUEL HE
R M Ocompartir
SO - SCAR SP
empresa Ecoembes.
P R E S U P U E S T O S : E N T R E1.G Mvil
A B320LpxEdeSancho
PRESUPUESTO
DISEO UX-UI
PRESUPUESTO
DISEO UX-UI
Ecoembes TBWA
Ecoembes TBWA
V 1.0
V 1.0
Samuel Hermoso &

scar Santos
Samuel Hermoso &

scar Santos
Fecha: 1 mar. 2016
616097787
616097787
28012 Madrid
Presupuesto Diseo
Jornadas
Cantidad

comentado
290
290
Ajustes Wireframes
0,5
145

1440 px
580

320 px
1,5
435
290
Total
2.030
Descripcin
UX

28012 Madrid

empresa Ecoembes.
Diseo UI
Entregables


UX Designer
Condiciones
con el cliente.
Perfiles

Entregables
del proyecto.


documento.

con el cliente.
!1

ES46 1465 0100 9618 0049 8504
Atentamente,

!2
!1
P R E S U P U E S T O S : VA L O R A C I N
SUPUESTO
O UX-UI
es TBWA
Presupuesto Diseo
Jornadas
Descripcin
l Hermoso &
Santos
787

comentado
PRESUPUESTO
DISEO UX-UI
Ecoembes TBWA
Ecoembes TBWA
V 1.0
V 1.0
616097787
290
28012 Madrid
UX
Samuel Hermoso &

scar Santos
Fecha: 1 mar. 2016
616097787

Ajustes Wireframes
1
0,5
290
145
Presupuesto Diseo
Jornadas
Cantidad

comentado
290
290
Ajustes Wireframes
0,5
145

1440 px
580

320 px
1,5
435
290
Total
2.030
Descripcin
UX

28012 Madrid
rmoso@gmail.com
ta 9, local 2
Madrid
PRESUPUESTO
Cantidad
DISEO
UX-UI
Samuel Hermoso &

scar Santos

empresa Ecoembes.
Diseo UI

Diseo UI
Perfiles

1440 px
320 px
Total

580
Condiciones
Entregables
1,5
1
435
290
2.030
UX Designer

del proyecto.


documento.

con el cliente.

ES46 1465 0100 9618 0049 8504
Atentamente,
Perfiles
!1
!2
UX Designer
Condiciones

del proyecto.
giata 9, local 2
2 Madrid
Diseo UI
1440 px
580
P R E S1,5 U P 435
UESTOS: CONDICIONES

320 px
290
Total
2.030
Perfiles
UX Designer
PRESUPUESTO
DISEO UX-UI
PRESUPUESTO
DISEO UX-UI
Ecoembes TBWA
Ecoembes TBWA
V 1.0
V 1.0
Samuel Hermoso &

scar Santos
Samuel Hermoso &

scar Santos
Fecha: 1 mar. 2016
616097787
616097787
Condiciones
28012 Madrid
Presupuesto Diseo
Jornadas
Cantidad

comentado
290
290
Ajustes Wireframes
0,5
145

1440 px
580

320 px
1,5
435
290
Total
2.030
Descripcin
UX

28012 Madrid

empresa Ecoembes.

del proyecto.
Diseo UI

Desktop 1440 px de ancho
El presupuesto est realizado en base al alcance en jornadas descrito en2. este
documento.
Perfiles
UX Designer
Condiciones
Entregables

del proyecto.

ES46 1465 0100 9618 0049 8504


documento.
Atentamente,


con el cliente.
!1

ES46 1465 0100 9618 0049 8504
Atentamente,
!2
!2
CAGADA 3
EMPEZAR EL PROYECTO
SIN REFERENCIAS
DISEADOR
GRFICO
SENIOR ART
DIRECTOR
ENTENDER
E J E C U TA R
28
PRODUCT
DESIGNER
TESTEAR
NUESTRA EVOLUCIN:
DISEADOR
GRFICO
ARTE-
FINALISTA
DIRECTOR DE
ARTE
SENIOR ART
DIRECTOR
UI
DESIGNER
29
UX
DESIGNER
PRODUCT
DESIGNER
CAGADA 4
DISEAR SIN
WIREFRAMES
WIREFRAMES
LOW-FI
PERFILES
WIREFRAMES
LOW-FI
PERFILES
WIREFRAMES
LOW-FI
PERFILES
Wireframes
Home v1.
Versin Desktop
WIREFRAMES
HI-FI
Catlogo
Venta
Postventa
Promociones
KYMCO Mobility
Prensa
Notas
Mi KYMCO
Lorem Ipsum Dolor Sit Amet
La home presenta navegacin vertical con scroll. El contenido va cargando de manera

dinmica a medida que hacemos scroll abajo.

1. Carn > 2. Prestaciones > 3. Lorem ipsum > 4. Resultados
CARN A
CARN A
No
Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed
do eiusmod tempor incididunt
El men principal se presenta otante sin fondo y queda anclado en la parte superior
cuando se hace scroll.
La distribucin del contenido se hace por mdulos independientes y reorganizables
segn las necesidades del usuario.

do eiusmod tempor
Las miniaturas de toda la web tienen un pequeo movimiento (Zoom) al realizar on

mouse over sobre ellas (Ejemplo: https://www.trefectamobility.com)
SELECCIONAR
SELECCIONAR
1. Hero banner 1: Recomendador de modelos
T E AYU D A M O S A E L E G I R
TU KYMCO
SLIDE 2: ID METUS MASSA

UT BLANDIT PROIN

UT BLANDIT PROIN
2. Mdulo promociones
3. Mdulo contenidos
4. Mdulo contenidos

UT BLANDIT PROIN
5. Mdulo contenidos
6. Mdulo talleres y concesionarios
7. Mdulo Experiencial
8. Footer
Lorem Ipsum
Dolor Sit Amet
1.Recomendador
Type something
Lorem ipsum dolor sit

amet, consectetur
Centrados siempre en el usuario, el recomendador ayuda a ltrar los modelos de

KYMCO en base a las necesidades de este y a su vez nos informa sobre el tipo de
usuario que est visitando el site.
2
Tras un breve proceso de 3 o 4 pasos , mostraremos al usuario un enlace a las pginas

de los modelos que ms se adapten a sus necesidades
Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco
2. Mdulo contenido promociones
MS INFO
Aqu mostramos una campaa promocional (Seguro Gratuito) estar compuesto por
un titular imagen y un CTA/Link. Este enlace nos llevar a la seccin/landing
promocional.
Nota: En caso de tener 2 o ms promociones podemos usar paginacin
Lorem Ipsum
Dolor Sit Amet
3. Mdulos de contenido
Type something

amet, consectetur
Los mdulos de contenido muestran valores de marca, caractersticas de los

productos o contenido dinmico tanto propio como externo (Blog, RRSS, Hashtags.)

3.a El mdulo de contenido principal muestra contenido de valor de marca/producto.

Cuenta con una sola tile con una imagen de fondo titular, subtitular, prrafos y CTA/link
opcional para ampliar la informacin.
3. b Los mdulo de contenido secundario incluyen contenedores para imagenesy una
seccin para texto: titular, subtitular y CTA/link opcional.
MS INFO
3.c Los mdulos de contenido dinmico incluyen contenidos del blog o las redes
sociales, incluyen , prrago y miniatura de la imagen si tuvieran. Se podr mostrar
desde 1 a 4 entradas. Al hacer click sobre la imagen nos llevara a la fuente de origen
de la informacin (Ej. pgina de entrada del blog)
4. Mdulo localizacin talleres y concesionarios

Tras la localizacin previa al acceder en la web, mostraremos,mediante la api de
Google Maps los talleres y concesionarios (cliente potencial/cliente actual) ms
cercanos a la localizacin del usuario.
Type something

consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud



Este mdulo permite ingresar otras direcciones (buscador) y ltrar por talleres y
concesionarios.
Incluye un tfno. y un email de contacto
4a. Cuando realizamos click en uno de los pines mostraremos mediante una modal la
informacin relevante del concesionario/taller: Nombre, direccin, email de contacto,
horario y una foto. Solo se mostrarn los campos que haya completado previamente el
concesionario/taller.
Nota: Tanto el email como el telfono son clicables.

Type something
Este mdulo permite volver a disfrutar de la experiencia en Street View de la PreHome,
incluye el campo form Origen (localizacin actual), el campo Destino y un CTA que
nos redirige a la prehome congurada con los datos introducidos por el usuario.
WIREFRAMES
Catlogo
HI-FI
Venta
Postventa
Promociones
KYMCO Mobility
Prensa
Notas
Mi KYMCO
La home presenta navegacin vertical con scroll. El contenido va cargando de manera

dinmica a medida que hacemos scroll abajo.

1. Carn > 2. Prestaciones > 3. Lorem ipsum > 4. Resultados
El men principal se presenta otante sin fondo y queda anclado en la parte superior
cuando se hace scroll.
CARN A
CARN A
No

do eiusmod tempor incididunt
SELECCIONAR
T E AYU D A M O S A E L E G I R
TU KYMCO

UT BLANDIT PROIN

do eiusmod tempor
La distribucin del contenido se hace por mdulos independientes y reorganizables

segn las necesidades del usuario.
Las miniaturas de toda la web tienen un pequeo movimiento (Zoom) al realizar on

mouse over sobre ellas (Ejemplo: https://www.trefectamobility.com)
SELECCIONAR

UT BLANDIT PROIN
1. Hero banner 1: Recomendador de modelos

2. Mdulo promociones
3. Mdulo contenidos
4. Mdulo contenidos
5. Mdulo contenidos
6. Mdulo talleres y concesionarios

UT BLANDIT PROIN
8. Footer
Lorem Ipsum
Dolor Sit Amet
1.Recomendador
Type something

amet, consectetur
MS INFO
Centrados siempre en el usuario, el recomendador ayuda a ltrar los modelos de

KYMCO en base a las necesidades de este y a su vez nos informa sobre el tipo de
usuario que est visitando el site.
2
Tras un breve proceso de 3 o 4 pasos , mostraremos al usuario un enlace a las pginas

de los modelos que ms se adapten a sus necesidades
2. Mdulo contenido promociones

Aqu mostramos una campaa promocional (Seguro Gratuito) estar compuesto por
un titular imagen y un CTA/Link. Este enlace nos llevar a la seccin/landing
WIREFRAMES
Madrid
Ta l l e r e s
Buscar
TELFONO GENERAL
EMAIL GENERAL
contacto@kymco.es
(+34) 902 123 123
HI-FI
N O M B R E TA L L E R
N O M B R E TA L L E R
Direccin: Kaliurang St. No 104,
Te l . : 6 5 1 0 0 8 9 5 8
E m a i l : s t a f f @ t a l l e r. n e t
Horario: Monday Friday
08:00 AM 18:00 PM
Dnde quieres ir?

Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a.
Cambiar
INTRODUCE LA DIRECCIN DEL DESTINO
IR
Calle Concepcin Jernima 22.
PERFILES SOCIALES
M A PA W E B
Fa c e b o o k
Tw i t t e r
I n s t a g ra m
Yo u t u b e
Flickr
Catlogo
S e l e c to r d e M o d e l o s
Ve n t a
Po s t ve n t a
P ro m o c i o n e s
KYMCO Mobility
P re n s a
M i Ky m c o
SOBRE KYMCO
LEGAL
P re n s a
C o n t a c to
Concenos
Po l t i c a d e p r i va c i d a d
T r m i n o s d e u s o
2015 Kymco Moto Espaa
DISEO
NUEVO.KYMCO.ES
CAGADA 5
PEDIR FEEDBACK
AL CLIENTE
CAGADA 6
ECHAR LA CULPA
A LOS DEMS
CAGADA 7
QUEJARSE Y ENFADARSE
CAGADA 8
DECIR QUE S A TODO
CAGADA 9
N O P R E G U N TA R S E E L
PARA QU
CAGADA 10
ARRIESGAR
EL PROYECTO
A UNA SOLA ENTREGA
CAGADA 10
ARRIESGAR
EL PROYECTO
A UNA SOLA ENTREGA
CAGADA 11
UTILIZAR TERMINOLOGA
QUE NADIE ENTIENDE
CAGADA 12
NO PROBAR OTRAS
H E R R A M I E N TAS Y
TCNICAS
METODOLOGAS PRODUCTIVIDAD
POMODORO
GTD
47
H E R R A M I E N TAS P R O D U CT I V I DA D
RESCUETIME
48
TOGGL
H E R R A M I E N TAS C O M U N I CAC I N
SLACK
INVISION
49
H E R R A M I E N TAS D I S E O U I
SKETCH
ZEPLIN
50
REFERENCIAS
DRIBBBLE
BEHANCE
USEPANDA
51
ENVANOS UN CORREO A:
UXUIMADRID@GMAIL.COM
Esto es todo, amigos.
GRACIAS!

Cactus MrMarcel Samuel - Oscar 28 May 16

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cactus MrMarcel Samuel - Oscar 28 May 16

Uploaded by

Copyright:

Available Formats

NUE STRAS

COMO DIS EADORE S UX-UI

MrMarcel Cactus Sbado 28 mayo 2016

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

TOP JOB TITLES

SAMUEL HERMOSO - SCAR SP

TOP JOB TITLES

SAMUEL HERMOSO - SCAR SP

TOP JOB TITLES

SOCIAL MEDIA INTERN

SAMUEL HERMOSO - SCAR SP

PRECIOS POR HORA FREELANCES USA

SAMUEL HERMOSO - SCAR SP

PRECIOS POR HORA FREELANCES USA

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

COMO DIS EADORE S UX-UI

MrMarcel Cactus Sbado 28 mayo 2016

SAMUEL HERMOSO - SCAR SP

SAMUEL HERMOSO - SCAR SP

Fecha: 1 mar. 2016

UX-UI Microsite Campaa Fotos en Mapa Ecoembes

Samuel Hermoso &

A la atencin de: Diana Benito TBWA

Samuel Hermoso &

Fecha: 1 mar. 2016

Estudio briefing y Documento de referencias

Primera versin Wireframes / Prototipos

Propuesta diseo y Look & Feel versin desktop

Propuesta diseo y Look & Feel versin mvil

Revisiones de diseo y ajustes propuesta

Brief y Documento de referencias

Ttulo del proyecto: UX-UI Microsite Campaa Fotos en Mapa - Ecoembes

Alcance del proyecto

Alcance del proyecto

Se trabajarn dos versiones del microsite:

1. Mvil 320 px de ancho

2. Desktop 1440 px de ancho

2. Desktop 1440 px de ancho

UI Designer, Visual Designer

La finalidad del proyecto es la participacin de los usuarios en la plataforma y

Se entregar el siguiente material:

buenas ejecuciones llevadas a cabo en trabajos similares.

Los precios no incluyen IVA.

1. Documento de referencias comentadas que nos permitir tomar

2. Wireframes versin mvil y desktop en formato PDF/PNG. Para ms de 3

UX-UI Microsite Campaa Fotos en Mapa Ecoembes

UX-UI Microsite Campaa Fotos en Mapa Ecoembes

Samuel Hermoso &

A la atencin de: Diana Benito TBWA

Samuel Hermoso &

Fecha: 1 mar. 2016

Estudio briefing y Documento de referencias

Primera versin Wireframes / Prototipos