Real UX Whitepaper by Raona. El secreto para hacer de tus aplicaciones un éxito.

1. REAL UXEL SECRETO PARA HACER DE TUS APLICACIONES UN ÉXITO
SKILLS
WHITEPAPER
JUNIO
2016

2. ABOUT RAONA
Cristina Torné es UX Architect en Raona. Lidera uno de los equipos de UI/UX encargados de
conceptualizar, diseñar y desarrollar soluciones ad hoc para importantes compañías internacio-
nales. Su principal foco es traducir los objetivos de negocio en experiencias digitales tangibles
y usables.
Òscar Oto es UX Architect en Raona. Conceptualiza , diseña y desarrolla experiencias digitales
para aplicaciones de escritorio , móviles y web a través de plataformas y dispositivos. Sus áreas
de especialización incluyen la dirección de arte , diseño web y de aplicaciones , la experiencia
del usuario , diseño de interacción , pruebas de usuario y Design thinking. Está especializado en
aplicaciones de negocio.
Consultora en nuevas tecnologías especializada en el desarrollo de soluciones tecnológicas a
medida que aportan valor al negocio y que ofrece soluciones de intranets sociales, desarrollo de
software, SharePoint, Touch&Mobility, portales web, Cloud integration y user experience.
Nace en 2003 en Barcelona y cuenta con oficinas en Madrid, Londres, Andorra y Argentina. Con
más de 120 ingenieros, es Gold Partner de Microsoft y una de las empresas líderes en el desarrol-
lo de soluciones en el mercado español con fuerte presencia internacional.
Sobre nosotros
REAL UXWHITEPAPER

3. Photo comment: Ude­
mus omplinv eniquesa
conduciordi, cantur.
Basar el diseño de una solución en aplicar una serie de patrones universales, heurísticas, es-
tándares, y las últimas tendencias de diseño visual no garantiza que el resultado final tenga una
buena experiencia de usuario (UX). Ni siquiera garantiza que sea usable.
Una buena experiencia de usuario depende de que el diseño resuelva los problemas adecuados
de la forma en qué sus usuarios esperan. Y eso no se consigue contando con un gran diseñador
y confiando en su intuición o bagaje, sino con un equipo y un proceso centrado en conocer las
experiencias y el contexto del usuario, y modelando la solución en base a ello. Es por eso, que lo
mejor es “matar al genius designer”.
El camino a la mediocridad está plagado de estándares, buenas prácticas y guías de diseño. Os
queremos contar las claves que, después de años de proyectos exitosos, creemos que permiten
desarrollar la aplicación que el usuario necesita y que esté alineada con los objetivos de negocio.
Kill the genius designer

4. 4
User & Business
Centered Design
El campo de la user experience y los procesos de UX es suma­
mente teórico y se ha escrito y se sigue escribiendo muchísimo
sobre ello. Pero lejos de la literatura lo cierto es que la experi­
encia durante estos últimos diez años nos ha demostrado que
para diseñar una solución de éxito es necesario involu-
crar a los usuarios, al negocio y al equipo en construir ese
diseño único y tangible. Es lo que llamamos Real UX.
En Raona trabajamos con clientes que necesitan diseñar o re­
diseñar una aplicación o un software a medida.
Desde el departamento de UX nos encargamos de definir el
modelo de interacción, cómo los usuarios interactúan con la
solución, y su presentación visual y diseño.
Nuestra responsabilidad es identificar con precisión cuál es
la necesidad que quieren solventar usuarios y empresa, así
como saber de qué manera resolverla para adecuarla a lo que
ambos esperan. Disponiendo de esta información podemos
modelar la mejor solución posible. Una solución que a lo largo
del proceso de UX se irá validando y refinando.
REAL UXWHITEPAPER

5. 5
Para asegurarnos una buena experiencia de usuario necesitamos, por tanto, averiguar
qué les preocupa y cómo resolverlo, y en este punto de nada sirven las grandes ideas o
las teorías del mundo de la usabilidad. Las hipótesis en este inicio del proceso no son
válidas, necesitamos la user evidence que obtenemos a través de workshops, entrevis­
tas y otras técnicas.
El diseño centrado en usuario es una idea muy presente en el corazón de la UX,
pero en paralelo también tenemos que trabajar para conocer los objetivos de ne­
gocio y alinear estos dos mundos, en muchas ocasiones divergentes, en una solu­
ción adecuada para ambos. Es lo que llamamos User & Business Centered Design.
Para descubrir lo que realmente necesitan usuarios y negocio es habitual plantear en­
trevistas o rondas de preguntas abiertas, pero nosotros apostamos desde hace tiempo
por un proceso que reúne una serie de técnicas, modelos y patrones focalizadas
en obtener resultados eficaces para poder diseñar una solución.
REAL UXWHITEPAPER
PRODUCT THINKING
Llamada a ser la “next big thing” dentro del mundo de la UX, el product thinking va más allá del concepto de la UX como el
conjunto de características de un producto diseñadas de tal forma para hacer la experiencia del usuario fácil y satisfactoria. Las
funcionalidades son solo una pequeña parte del producto y centrar la UX solo en ellas hace que perdamos el objetivo esencial:
¿para qué sirve?
El product thinking propone un proceso para que esto no pase. Piensa en el usuario y se pregunta qué problemas resuelve el
producto, quién tiene estos problemas (define al público objetivo), por qué lo hacemos (visión) y cómo lo hacemos (estrategia).
Tener respuesta a estas preguntas ofrece la orientación necesaria para crear ahora sí las características y los objetivos de un
producto de éxito. Porque los productos cobran sentido cuando la solución aportada se ajusta a un problema no cubierto, y que
es la esencia de la UX.
Pensar en los productos favorece a que los diseñadores construyan las características adecuadas para las personas adecuadas y
se den soluciones a los problemas reales que tiene la gente.

6. 6
El problema está en que si empezára­
mos a desarrollar nuestra aplicación en
este punto no estaría para nada alineada
con el negocio ni con los usuarios. Oper­
ar de esta manera conlleva entrar en una
dinámica incómoda para todas las par­
tes implicadas con pérdidas de tiempo,
frustración y cambios de reque­rimientos
de forma frecuente.
En Raona hemos introducido varios el­
ementos en nuestro proceso de UX que
nos ayudan a reducir y mucho este ries­
go. Por un lado, establecer una fase de
análisis, la User & Business Centered
Design, en la que a grandes rasgos ex­
traemos toda la información válida del
cliente, los usuarios y el equipo de Ra­
ona mediante workshops, sesiones con
usuarios, técnicas de análisis y Design
Thinking. Una segunda etapa en la que
creamos soluciones usables e intuiti-
vas a través de Creative Briefs, en los
que se trabaja el modelado del concep­
to, para posteriormente iterar, validar y
evolucionar esta idea.
REAL UXWHITEPAPER
El primer paso en el proceso de UX es la confección de la visión. Es el punto de salida
antes de poner en marcha el modelado de la aplicación. Cuando uno explica su visión
o idea, asume que todos entienden los mismo que él, y esto raramente ocurre. Cada
persona crea su propia visión en base a experiencias y conocimientos previos, lo
que en Raona llamamos abanico de visión.
El abanico de visión
AGILE UX
La Agile UX surgió como tentativa para integrar la metodología Agile con
los métodos de los diseñadores de UX, es decir, para unir a desarrolla-
dores y diseñadores en un proceso de desarrollo de producto Agile. El
problema está en que los diseñadores de UX necesitan un tiempo y unas
dinámicas de trabajo diferentes a la de los desarrolladores, los cuales me-
diante la metodología scrum pueden hacer sprints de dos o tres semanas
para trabajar las funcionalidades de la aplicación.
Sin embargo, los diseñadores de UX por las características intrínsecas
de su proceso no pueden realizar sus etapas de análisis y validación en
unos períodos de tiempo ajustados. Por eso, la mejor manera de integrar
la UX dentro de empresas que hacen servir Agile es que la UX parta de un
sprint cero, es decir, antes que los desarrolladores empiecen su trabajo se
necesita tener listo el proceso de visión. Una práctica que se va repitiendo
en todas las fases del proceso, por tanto, antes de desarrollar vendría
siempre una etapa de validación.

7. 7
Y en la tercera y última fase donde se
define, valida y evoluciona el diseño
visual de la solución.
El resultado es un concepto que da res­
puesta a los problemas reales, validada
y alineada. De esta manera consegui­mos
ir reduciendo al mínimo el abanico de vi­
siones y que todos estemos foca­lizados
en una solución muy parecida.
a. Workshops. Son sesiones con grupos
de usuarios en las que se llevan a cabo
una serie de técnicas para descubrir los
principales puntos de dolor de una solu­
ción, definir la estrategia de crecimiento
de un entorno, encontrar soluciones a
aspectos concretos, o para validar con­
ceptos o incluso el diseño visual.
b. Design thinking. Utilizamos una se­
rie de técnicas de pensamiento visual
para encontrar, junto con los usuarios,
soluciones reales a problemas exis­
tentes.
c. Mapeo de objetivos. Utilizamos
técnicas de goal mapping como “job
stories” para identificar los objetivos de
usuario y de negocio.
d. Sesiones individuales con
usuarios. Son idóneas para validar el
concepto con tests de usabilidad y en­
trevistas individuales y ver si se ajusta a
los requerimientos iniciales de los usu­
arios para seguirlo adecuando.
e. Business alignment. Como he­
mos mencionado, lo más habitual es
que las necesidades de usuarios y de
negocio no estén alineadas. En es­
tas sesiones aparecen las métricas de
negocio que modelarán la solución.
f. Entrevistas funcionales. Se­
siones individuales (o en grupos re­
ducidos) con expertos o respons­
ables funcionales que nos aportan
el detalle y contexto técnico para po­
der ofrecer una solución adecuada.
Puede dar la sensación que todo este
proceso de investigación conlleva un
largo periodo de tiempo. Nada más lejos
de la realidad, ya que todos los modelos
de análisis que realizamos no compor­
tan más de una semana de trabajo. En
siete días sabemos qué necesitan los
usuarios, el negocio, tenemos las métri­
cas para medirlo y ya podemos modelar
el concepto. Llegados a este punto te­
nemos un diagnóstico real de lo que los
usuarios y el negocio necesitan.
REAL UXWHITEPAPER
User & Business Evidence
Uno de los grandes problemas que acu­
sa el mundo de la UX es que existe mu­
cha teoría y grandes palabras sobre ella,
pero pocos aspectos prácticos sobre
qué técnicas utilizar.
Desde el departamento de experiencia
de usuario de Raona bajamos al mun-
do real la UX con métodos específicos
para recoger datos de valor de los
usuarios y del negocio.

8. 8

9. 9

10. 10
Crear soluciones
intuitivas y usables
En esta etapa ya disponemos de todos los datos relevantes para
proponer un concepto de solución. Es hora de trabajar a fondo
la idea.
Pero, ¿cómo hacerlo? Poner toda la solución en manos de un
único diseñador (por muy cualificado y experimentado que sea)
no suele ser una gran idea. La inspiración es caprichosa y no
siempre aparece a tiempo, especialmente cuando hay dead-
lines próximos.
En Raona creemos que el mejor modo de obtener una gran
solución es a través de los Creative Briefs.
Estos son reuniones internas de desarrollo y modelado del con­
cepto en base a todo el compendio de información recogida en
la fase de Business User Evidence & User Research.
En ellas se dan lugar una serie de actividades dirigidas a generar
soluciones y a fomentar la creatividad. De hecho, están orienta­
das a que el proceso creativo no dependa de la inspiración, sino
que se genere a partir del consenso y trabajo en equipo.
REAL UXWHITEPAPER

11. 11
El primer creative brief es una sesión con profesionales de UX,
pero en los siguientes se suele incorporar perfiles de negocio
y expertos funcionales para que aporten otras visiones y en­
riquezcan el proceso. El objetivo es que se produzca una
generación de ideas amplia para poder entrar en la fase de
refinar y validar la idea.
El resultado final es definir el modelo de interacción y la arqui­
tectura de la información de la solución en la que se detalla
cómo estará estructurada y como se dispondrán los elementos,
además del comportamiento responsive & fluid o el aspecto vi­
sual, entre otros.
Después ya podemos representar visualmente el concepto en
un wireframe, que nos permite obtener feedback y evoluciona­
rlo. En este proceso utilizamos herramientas para conse-
guir que el diseño, desde el wireframe hasta el resultado
final, siempre esté compartido con clientes y usuarios para
recibir feedback focalizado.
En la siguiente etapa se define, valida y evoluciona el diseño vi­
sual, trabajamos ya en las pantallas de la aplicación a nivel más
estético. Primero se elige el diseño, y se produce la evolución del
concepto hacia un mockup interactivo y, después, se realizan las
sesiones de design review con el equipo de UX, a la vez que se
recoge feedback de clientes y usuarios con el objetivo de mejo­
rar el resultado.
Photo comment: Ro inulpa
doloritio magnatur aut
excepro dolendamusae
iminctium ea con ea.
REAL UXWHITEPAPER
COREOGRAFÍA VISUAL
Se ha empezado a hablar de este concepto hace poco más de un año. La coreografía visual o UX Choreography es
un punto intermedio entre la UX y la animación, y en la que el cómo, el dónde y el porqué de cada elemento se
combinan.
Se trata de utilizar las técnicas necesarias para hacer que los elementos de la interfaz se muevan, aparezcan y
desaparezcan con movimientos, transiciones y reacciones naturales y fluidas.
Esto tiene un gran impacto en que el usuario obtenga una experiencia positiva, realista y emocional al interactuar
con la aplicación y que se pueda establecer un diálogo entre ambos.

12. 12
Diseño visual
"el no va más"
Una de las cosas que más valoran nuestros clientes es que
todo lo que diseñamos en la etapa de conceptualización,
muchas veces con retos que parecen inalcanzables, al lle­
gar al desarrollo es realizable.
De manera que el resultado final responde a lo que se ha
diseñado. Es completamente fiel.
Al contar dentro del equipo de UX con perfiles híbridos de
diseñador, desarrollador y experto en UX hace que en la etapa
de investigación se planteen soluciones que se puedan llevar a
cabo, y que un perfil de diseñador des­conocería.
Aparte de la fidelidad entre diseño y resultado final, otro de los
rasgos diferenciales de Raona en experiencia de usuario es
la personalización que otorgamos a cada proyecto.
REAL UXWHITEPAPER

13. 13
Desde 2014 hay dos líneas de diseño
que sobresalen: Modern UI y Flat UI.
La Mo­dern UI es la que empezó a usar
Microsoft con Windows 8, caracterizada
por los recuadros de colores vivos. Mien­
tras que el Flat UI es el que ha aplicado
Google con el Material Design, y que
podemos encontrar en muchas de las
aplicaciones para Android e infinidad de
aplicaciones web.
A nivel de concepto no hay muchas
diferencias entre las dos líneas. Ambas
persiguen interfaces limpias, claras, ráp­
idas, elegantes y simples.
Donde sí que encontramos disparidades
es en el uso del color, en cómo se utili­
zan los recuadros y se separan las zonas.
En Raona nos sentimos cómodos con
ambas, porque las dos persiguen que
el diseño esté centrado en la infor-
mación, y buscan evitar elementos
superfluos que distraigan el uso y la
experiencia.
Sin embargo, cada vez más y más apli­
caciones se suman a estas líneas de
diseño, hasta llegar al punto en que
todas las aplicaciones parecen iguales,
y tienen el mismo estilo. Es correcto se­
guir unas guías y estándares, pero si nos
quedásemos solo en eso obtendríamos
una aplicación anodina, igu­al que las
demás y que no destacaría.
Nuestro punto fuerte es trabajar
mucho en como presentamos la in-
formación y diseñarla para que sea
muy ágil de leer y de analizar, buscando
que a la par sea bella visualmente. El re­
sultado son aplicaciones que no tienen
nada que ver unas con otras, que siguen
los estándares, pero con un diseño visu­
al único, alineado con el branding de la
compañía.
Además, ponemos especial atención a
la coreografía visual. Un concepto sur­
gido en el último año y que muy pocos
aplican y que tiene que ver con cómo los
elementos aparecen y desaparecen de
la pantalla. No sólo se trata de anima­
ciones, sino de acompañar al usuario
en la comprensión de la interacción.
REAL UXWHITEPAPER

14. 14
Excea namet doluptatia pe re conse re con plibus restis parunt laborpo reculli gnisqui
struntion ratur. Tempor sae non non nonet quam nobitat isciliquid quidis ut doleserum
quaerov itecta venihillata dolupta derchillabo. Lit in res evene plique nullorum receat
et quo verovit atatem que sum et et eturio officia pra qui quas prerum sim aut quid
molorrum eaquatqui reptat ad quundantio. Nam il idel il iusaessuntia vid et aut molupti
oribus quo tem alignim endae. Debitia tecaepe ribus, odi voluptae sandus, in repraec
torerio. Usdaeri assitam, cuptaes ipsunt.
Event rehent pero bearchit delestibus
Eitempostis utet es autat rehent volor rata dolupta sam sequi simaio dolo dolo volut ut
experae rernature, eat plabo. Rae nesti restiisciet fugitionecum volorem quo volut aut
eles enihit quo invent as dolorerio quas entiostiam fugit velent et volorero et idipsam
aces doles di cupturi ossum, aut optatio veliquis dolecte dolor atusanim faceate cabore
sed magnien diorenimet a sanihicium nobissi volupta tusaerc hilitat rehent essunt, sit
od molupti onectis diat aut re lam hitaes natur as audam alitatus eum, inis molorit at.
REAL UXWHITEPAPER
¿TE HAS DADO CUENTA QUE TODAS LAS APLICACIONES SON IGUALES?
Hoy existen dos tendencias predominantes en el mundo del diseño: Flat y Modern UI Design. La Flat Design surge de la mezcla
de varias influencias como el estilo suizo, la interfaz de usuario basada en texto, el modernismo y la herencia de la escuela
Bauhaus. Se caracteriza por ser minimalista, por lo que utiliza pocos elementos estilísticos para dar la sensación de las tres
dimensiones, por ejemplo, con sombras, gradientes y texturas.
También utiliza componentes simples, y tipografías y colores planos para que la navegación por la interfaz sea más ágil y
eficiente al no tener tantas distracciones. El iOS 7 de Apple o el Material Design de Google son algunos ejemplos en los que se
ha aplicado este tipo de diseño.
Por otro lado, se sitúa la Modern UI Design o también conocida como Metro. Aunque tampoco resulta muy diferente a la Flat
Design sí que presenta algunas particularidades como la apuesta por las formas geométricas, la tipografía y la importancia
que le da al diseño basado en el contenido y no tanto en la caja contenedora. Este diseño es el que está presente desde Win-
dows 8 y en otros productos de la compañía como Xbox 360, Windows Phone o Office365.
El uso tan extendido de ambas tendencias ha hecho que gran parte de las aplicaciones que hay en el mercado se parezcan en
exceso las unas con las otras; provocando una uniformidad y la consecuente pérdida de personalidad de cada aplicación.
Microsoft ha apostado decididamente por esta plataforma como el futuro de su negocio y en Raona la implantamos de forma
habitual como parte de las soluciones adaptadas a las necesidades de aquellos clientes que requieren un entorno flexible y
en continua evolución.

15. 15
Por último, en Raona le otorgamos mu­
cha importancia en el proceso porque
todos las aplicaciones y softwares que
desarrollamos están pensados para que
sean responsive y fluidos, de forma que
las aplicaciones se adapten a cualquier
tamaño de pantalla, resolución, o dis­
positivo.
REAL UXWHITEPAPER
Proceso siempre abierto
Por último, cabe destacar que el proce­
so de UX es un proceso siempre abierto.
Intentamos descubrir qué problemas se
deben resolver y qué necesidades tiene
el usuario para después modelar una
solución.
A partir de aquí, desde el primer boce-
to más básico, arranca un proceso
abierto a todas las partes implicadas:
usuarios, empresa y el propio equipo
de Raona. El conjunto de validaciones
y feedback es constante y específico du­
rante todo el tiempo que duran las fases
de UX, lo que nos funciona a la perfec­
ción para poder alinear todos los actores
involucrados.
En Raona llevamos desde el 2003 pensando y creando soluciones para los usuarios y los negocios. Esta larga y valiosa experi-
encia nos ha llevado a saber detectar qué elementos funcionan y los que no.
Hemos querido dejar claro que para nosotros el diseño de una solución no puede estar basado en grandes teorías o en la in-
tuición de una mente genial. Conseguir una buena experiencia de usuario implica resolver problemas de verdad, aquellos que
preocupan a usuarios y negocio, y hacerlo satisfaciendo a todas las partes. Para ello proponemos un método de trabajo que
una diferentes perfiles de UX Architect (arquitectura e interacción), UI Designer (diseño visual), UI Developer (desarrollo de la
interfaz e interacción) y UX Research (evidence, validación y test continuo).
Bajamos la UX del Olimpo al mundo real que es donde se encuentran los problemas y las soluciones, obteniendo la información
necesaria con técnicas eficaces, y en dinámica de validación y test constante con la ayuda de usuarios, negocio y el propio
equipo de Raona.
Esta metodología es lo que nos caracteriza y diferencia. La que nos garantiza poder llevar las aplicaciones al éxito.
Òscar Oto y Cristina Torné - UX Specialists en Raona

16. REAL UX
EL SECRETO PARA HACER
DE TUS APLICACIONES UN ÉXITO