Webrowser: el buscador creado por y para la gente
Aplicando Design Thinking para mejorar el futuro de la web.
1. Contexto
Los últimos meses de este año 2022 que cerramos hace apenas unas semanas nos han traído muchos cambios en todos los ámbitos. Parece que ya no nos sorprende leer y escuchar noticias sobre las constantes crisis que venimos sufriendo desde hace unos años a nivel global.
Pero si nos centramos en el sector tecnológico, podemos decir que 2022 ha sido un año de grandes cambios: algunos para bien, otros para mal y otros que todavía está por ver qué nos deparan.
Ha habido un avance trascendental en campos como el de la Inteligencia Artificial, que seguro que en menos tiempo del que imaginamos, cambiará el futuro de muchas profesiones del sector y me atrevo a decir que de otras que no tienen nada que ver con este. Pero también ha habido grandes fracasos de tecnologías que estaban emergiendo y han colapsado, o productos que no han llegado a cuajar en el público general y que han ocasionado grandes pérdidas tanto a nivel personal como empresarial, lo que ha generado quiebras de plataformas o propiciado despidos masivos, creando una sensación de inestabilidad e incertidumbre.
2. Reto y metodología
Ante este posible cambio de paradigma, y con el reto de asesorar para poder crear un negocio digital exitoso a futuro, nos propusimos actuar a través de la metodología Design Thinking para poder solucionar en un tiempo prudencial las necesidades del proyecto y poder crear un producto lo más novedoso y disruptivo posible.
3 . Investigación y análisis de datos
La primera parte de la investigación fue lanzarnos a realizar un desk research de todas las tecnologías existentes en el mercado actual y las que aún se encuentran en desarrollo, términos y conceptos como: realidad virtual, realidad aumentada, Internet de las cosas, metaversos, Solid, criptodivisas, blockchain, inteligencia artificial… El objetivo era especular sobre la viabilidad de cada una de ellas de cara a crear un nuevo producto, a través de analizar sus pros y sus contras, sus requisitos técnicos, o sus posibilidades para ser combinadas y transformadas en otras nuevas.
De todas las tecnologías analizadas, descubrimos una que nos llamó mucho la atención, que no es especialmente popular y que además fue la base de nuestro futuro producto ya que solucionaba una gran parte de la problemática planteada. Se trata de Solid, que es un proyecto de descentralización de datos inventado por Tim Berners Lee (que para quien no lo conozca todavía, es uno de los creadores de la World Wide Web, o 3W). Tampoco me quiero extender en explicar mucho este punto así que adjunto un link a Wikipedia y una imagen para las personas que estén más interesadas en el funcionamiento de esta tecnología.
También realizamos un análisis de la evolución de la web y sus características a través de sus diferentes etapas: desde la web 1.0, 2.0 y 3.0, (siendo este punto de transición entre la 2.0 y la 3.0 en el que la mayoría opina que nos encontramos) hasta la web 4.0, 5.0, 6.0 y 7.0 (que son combinaciones de las anteriores con tecnologías emergentes o especulaciones de hacia dónde avanzará Internet en los próximos años). Esto nos ayudó a poder posicionarnos cronológicamente de una manera correcta y poder analizar las problemáticas a las que nos enfrentamos actualmente en el entorno digital con mayor perspectiva.
En este punto ya teníamos algunos findings que queríamos verificar, por lo que pasamos a una segunda fase de la investigación.
Lo primero que hicimos fue realizar una netnografía en diferentes foros y chat de ayuda de sitios web, los resultados mostraron que:
Una gran mayoría de personas experimentan problemas con los procesos de login y recuperación de contraseñas.
Para poder analizar y verificar con usuarios reales el resto de hallazgos que habíamos encontrado y conseguir una información más verídica, decidimos realizar una encuesta con algunas preguntas cerradas para obtener datos cuantitativos y otras abiertas para que la gente argumentase sus respuestas y poder obtener algo de información cualitativa. En esta encuesta participaron 102 personas y pudimos obtener datos suficientes para poder contestar a todas nuestras research questions.
Los insights más significativos extraídos de las encuestas y que nos ayudaron a elaborar nuestro producto fueron los siguientes:
- La gente siente una falta de seguridad y privacidad total de sus datos en Internet, debido en gran parte a la forma en que se manejan actualmente estos.
- Los bulos, intereses comerciales y noticias falsas son los aspectos más problemáticos para los usuarios y usuarias de la web actual.
- Hay una preferencia clara por la búsqueda de contenido escrito sobre la búsqueda por voz, los motivos más repetidos para esto fueron la falta de privacidad y la falta de precisión en este segundo tipo de búsquedas.
- De todas las tecnologías analizadas y llevadas a encuesta, la Inteligencia Artificial, fue la mejor valorada por las personas participantes. El motivo más relevante fue que la consideraban la más útil y funcional de todas.
- Las redes sociales, son el sitio web en el que más tiempo pasa la gente en Internet.
Llegados a este momento y tras sacar las conclusiones necesarias para continuar con el proceso y poder continuar con la fase de ideación, decidimos realizar un user persona y un journey map para poder visualizar con mayor claridad a nuestro arquetipo y sus posibles pain points o puntos de fricción al usar servicios web.
4. Ideación y priorización
En esta fase del proceso generamos ideas a través de diversas técnicas. Lo primero fue realizar un brainstorming, teniendo como base todos los datos extraídos del research.
Posteriormente se realizó la técnica de SCAMPER, para conseguir refinar estas ideas iniciales y llevarlas un paso más allá para obtener resultados más inusuales o creativos.
Para priorizar tanto la mejor idea como las funcionalidades que debía de tener, se valoró a través de matrices simples y matrices dobles, en términos de viabilidad, deseabilidad, alto impacto o tiempo de ejecución. Con todo esto armamos nuestro particular monstruo de Frankenstein, al que terminamos llamando Webrowser que no es nada más y nada menos que el único buscador del mercado, seguro, social y semántico.
Para poder verificar que estos datos son ciertos, os dejo una comparativa que realizamos a través de un benchmark en el que se ven los principales competidores y cómo nuestro buscador se diferencia en una gran mayoría de estos, gracias al concepto del que parte y a las funcionalidades que incluye.
Nota: Cuando se realizó el estudio no existía todavía el buscador YOU que sí implementa la Inteligencia Artificial en el motor de búsqueda, aun así la forma en que se enfoca no es la misma y Webrowser sigue ofreciendo 2 funcionalidades que el resto no tienen.
5. ¿Por qué deberías usar Webrowser?
Como comentaba anteriormente, Webrowser es un buscador seguro, social y semántico algo que sin duda aporta grandes beneficios a los usuarios en la forma en que usan y se relacionan con los servicios web. A continuación os explicaré por qué esto es así y cómo funciona.
Seguro
Gracias a la implementación de la tecnología Solid conseguimos que los datos de nuestros usuarios estén seguros en sus pods. Los pods son cápsulas encriptadas donde se almacena la información personal (desde contraseñas, contactos, números bancarios o cualquier dato sensible que podamos usar en Internet). Lo mejor de esto es que podemos alojarlos donde queramos, desde llevarlos siempre con nosotros en nuestra We-key (dispositivo usb protegido por biometría donde puedes llevar tu pod), guardarlos en nuestro ordenador personal, o subirlo en alguno de los servidores disponibles en Webrowser.
Además, cualquiera de las 3 opciones que elijamos mantiene nuestros datos seguros y anónimos, ya que sólo podrás acceder si tienes tu web ID (contraseña única que da acceso a esta información). Para reforzar la seguridad y hacerlo todo un poco más fácil, gracias a las tecnologías que existen actualmente podemos configurar nuestro acceso al buscador a través de biometría. Si tienes un dispositivo con reconocimiento de huella, scanner de retina o reconocimiento facial, podrás configurar el acceso de esta forma. Si no lo tienes no hay problema, con la We-key podrás hacerlo desde cualquier dispositivo que tenga usb-c y lo mejor de todo, gracias a esto podrás olvidarte de las contraseñas para siempre.
¿Cómo es esto posible? Gracias a que somos dueños de nuestros datos, podemos identificarnos al acceder al buscador desde un único lugar en todas las aplicaciones y sitios web que queramos, así como elegir a quién otorgar o quitar cualquier tipo de permiso. Una vez hayas configurado qué quieres compartir y qué no, no tendrás que volver a preocuparte nunca más por qué información poseen sobre ti los sitios que visitas, tú decides.
Social
No es ninguna novedad que pasamos una gran parte de nuestro tiempo en las redes sociales. No podría ser de otra forma ya que el ser humano es el animal social por antonomasia.
Siendo así hemos diseñado nuestro buscador, pensando en que sea la herramienta perfecta para poder conectar con otras personas o empresas. Gracias al apartado social, podrás revisar rápidamente con quién estás conectado y a través de qué redes. Como decía, no hace falta que sea una persona, puedes utilizar el buscador de la sección para encontrar empresas o profesionales de todo tipo y conectar con ellos siempre y cuando hayan hecho sus datos públicos para poder contactar.
Desde esta sección también podrás realizar llamadas, videollamadas y mandar mensajes directos o correos electrónicos, todo desde un único lugar.
Semántico
Uno de los mayores problemas a los que nos enfrentamos a día de hoy en Internet es la búsqueda de contenidos precisos y reales, desde la calidad de los mismos en lo cual influyen muchos factores como intereses comerciales, bulos y noticias falsas, hasta que estos contenidos se adapten a lo que realmente estamos buscando, en lo cual influyen otros como algoritmos de personalización que pueden llegar a ser imprecisos o falta de metadatos que ayuden a agilizar la búsqueda.
Ante esta situación hemos creado la solución más efectiva para luchar contra estas frustraciones que surgen cuando realizamos búsquedas por Internet.
El buscador We, permite gracias al entrenamiento de nuestra IA (We 1.0), realizar búsquedas semánticas. Ya sea que quieras realizar una búsqueda por voz o escrita, We te entenderá como si estuvieras contándoselo a tu mejor amigo, lo que se traduce en resultados mucho más rápidos y precisos. Lo mejor de esto es que no tendrás que pensar más en los términos que quieres buscar, gracias a que se basa en una interfaz de lenguaje natural, simplemente escríbelo o dilo como te surja que We se encargará del resto.
Además gracias a la implementación de nuestro filtro blockchain Weblock, podrás verificar todo tipo de información, sin necesidad de andar contrastando con otras fuentes o buscando reseñas. Cualquier cosa que encuentres a través de We, puede ser verificada, sólo es necesario que la persona o empresa en cuestión certifique a través de Weblock su producto o servicio. Esto queda registrado en la blockchain algo que es imperturbable y que garantiza al 100% la fiabilidad de ese producto o servicio. Los resultados autenticados a través de esta tecnología se mostrarán primeros en la lista de resultados del navegador para facilitarte aún más el trabajo.
6. Justificación de la marca y diseño
En este apartado vamos a hablar de las decisiones de diseño tomadas en el momento de crear la marca, desde el significado del imagotipo, los colores y tipografías usados y el look de la interfaz.
Significado
A la hora de conceptualizar, buscamos crear una combinación de elementos característicos que representaran el producto a través de un símbolo unificado como es la letra “w”. Esta hace referencia a la web, que es el servicio principal para el que está diseñado ya que como indiqué anteriormente se trata de un buscador, pero también hace referencia a We (nosotros, los usuarios) ya que es un producto que devuelve el poder de los datos a las personas.
A su vez en su interior guarda distintas connotaciones que se pueden observar si miramos más detenidamente.
- En la parte central y derecha se hacer un guiño a la AI (Artificial Intelligence) que es la tecnología que utiliza el motor de búsqueda.
- La parte central donde convergen las dos astas de la letra simboliza un punto de conexión, un solo lugar desde el que conectar con cualquier persona o negocio. Si se observa de forma sintética, pueden verse dos personas dándose la mano, esto hace referencia a la parte social del producto ya que es otra de las características que lo hace destacable.
- La última parte del recorrido visual, cierra con un punto y lo convierte en una letra “i” haciendo alusión a Internet y a su vez una persona sentada frente a una pantalla.
Respecto al naming, el objetivo fue el mismo, intentar que representase las características del producto lo máximo posible. El nombre Webrowser, es la combinación de:
- We (nosotros)
- Web (el servicio para el que está diseñado)
- Wser (haciendo referencia nuevamente a los usuarios)
Tipografía y color
La elección de las tipografías se realizó en base a dos criterios:
- La primera, fue una Arial Rounded que es la que se utilizó para crear el símbolo del imagotipo, al que le realizamos algunas modificaciones para llegar a la forma final. La idea era partir de una tipografía sencilla y redondeada para transmitir el concepto de una manera directa pero cercana.
- La segunda elegida, fue una Inter Semi Bold. El motivo de su uso fue que necesitábamos una tipografía que permitiese una buena legibilidad en diferentes tamaños y pesos, ya que también sería la utilizada para la interfaz del producto y debía poder adaptarse a cualquier terreno.
Para escoger los colores, se optó por una gama monocromática entre el magenta y el azul. El motivo de esta elección fue buscar un color que tuviese una buena legibilidad y contraste tanto en fondos claros como oscuros y que aportase valor a la marca con connotaciones tecnológicas. Se realizaron cuatro variaciones de intensidad para poder aplicar sobre fondos claros y oscuros y en plano o degradado dependiendo del contexto. Esta paleta también se usó para la creación de la interfaz.
Estética de la interfaz
La interfaz del navegador es de estilo glassmorfista, la elección fue debido a que es una tendencia muy usada en interfaces de sistemas operativos en los últimos tiempos (MacOS y Windows 11 por ejemplo lo usan). La ventaja principal de este estilo es que ofrece una estética limpia y sencilla con un toque de diseño, yendo un paso más allá del clásico estilo flat.
La versión actual del prototipo es un dark-theme o tema oscuro, se eligió porque este estilo se asocia más a la privacidad, algo que es muy importante en nuestro producto (las pestañas de incógnito de Chrome son en estilo dark) y se visualiza como se vería en un ordenador Mac. Cabe decir que existe una versión light o clara en fase de desarrollo y los cambios respecto al SO se aplicarían solamente a la barra de navegación, por lo que las funcionalidades serían las mismas.
Los elementos de interfaz como botones, inputs, iconos… tienen un diseño standard y acorde con la estética general para crear un resultado homogéneo y facilitar la usabilidad.
7. Funcionalidades y prototipo
Y aquí es cuando todo el trabajo previo, comienza a tomar forma para poder ofrecer una experiencia de uso novedosa y mejorada.
Wireframes
Para empezar había que pensar cómo queríamos organizar la interfaz de nuestro producto. Esto suponía poder visualizar todas las funcionalidades que queríamos incluir, de forma simple y sin perder mucho tiempo para poder hacer las modificaciones necesarias y conseguir el resultado que buscábamos, por lo que decidimos realizar unos wireframes en baja fidelidad para poder tomar decisiones y empezar a construir el prototipo.
Una vez tuvimos clara la estructura de nuestro producto comenzamos a diseñarlo en alta fidelidad.
1. Pantalla de login y flujo de acceso
Lo primero que vemos cuando abrimos el buscador es una pantalla de login con un menú de ajustes arriba a la derecha desde donde podemos modificar cosas básicas como el idioma, el color del tema o el tipo de teclado y un botón en la parte inferior que lleva a una página de FAQS, se incluyeron estas dos opciones para aportar una mayor flexibilidad y documentación a los usuarios. En el centro tenemos una ventana en la que aparece el logo de WeBrowser desde la que podemos escoger la opción biométrica con la que queremos acceder. La distribución de los elementos sigue un esquema típico de este tipo de pantalla y tiene una estética minimalista con el fin de aliviar el exceso de carga cognitiva.
2. Pantalla principal y funcionalidades: social, Pod y ajustes
En esta pantalla podemos observar todas las funcionalidades y operativas que tiene el buscador. Se diseñó con una estética similar a la que utilizan otros navegadores del mercado, con una barra de búsqueda centrada, para que resulte familiar a primera vista y facilitar su usabilidad. Pero aunque podamos encontrar similitudes, el concepto es diferente: la pantalla principal, ha sido pensada para ser un centro de control desde el que podamos gestionar todo tipo de tareas sin salir de esta, desde redes sociales, permisos de aplicaciones y sitios, alojamiento de datos, perfil… Con esto tratamos de conseguir una mayor comodidad a la hora de gestionar las tareas más usadas por los usuarios en el día a día y evitar la apertura excesiva de pestañas. La distribución de los elementos y la estética sigue los patrones del resto de pantallas para no romper la coherencia y que el diseño sea consistente. Si bien se utilizaron iconos con un aspecto reconocible, también se añadió el nombre de cada una de las 3 funcionalidades principales debajo de cada uno de ellos para evitar la carga en la memoria y tratar de prevenir errores.
2.1 Funcionalidad social
El apartado social nos permite saber con qué personas estamos en contacto y a través de qué redes desde una sencilla ventana que aparece al hacer click sobre esta opción. Si pulsamos sobre cualquiera de los iconos que aparecen al lado de la persona o empresa en nuestra lista, nos redireccionará al sitio seleccionado para poder interactuar dentro de este con quien hayamos elegido. Además posee una barra de búsqueda desde la que podemos encontrar a otras personas o negocios que tengan sus datos de contacto de forma visible y agregarlos.
De esta manera por ejemplo, podemos directamente buscar un negocio que nos interese y contactar con él desde la ventana de inicio del navegador. Esto también lo podemos hacer con las personas o empresas que ya tengamos en nuestra lista de contactos. El funcionamiento es sencillo, habría que pulsar sobre el símbolo + que aparece al lado del contacto y se nos desplegarán unas opciones para poder comunicarnos:
- Llamada
- Videollamada
- Mensaje directo
- Correo electrónico
Sólo hay que seleccionar la que queramos utilizar y se nos abrirá otra ventana dentro de la misma pantalla para poder realizar la acción seleccionada.
2.2 Funcionalidad Pod
La funcionalidad de Pod, nos permite elegir de forma rápida y sencilla dónde queremos alojar nuestros datos sin necesidad de salir de la pantalla principal. Tenemos 3 opciones de alojamiento:
- We key
- Mi equipo
- Servidores externos
Para moverlos de un sitio a otro, sólo tenemos que hacer click sobre la nueva ubicación en la que queramos que se aloje nuestra información, al hacerlo, saldrá un botón con una opción de confirmar para verificar que queremos que el cambio se haga efectivo y una vez hecho, veremos cómo el icono de check verde cambia de una ubicación a otra, indicándonos que se ha realizado correctamente. En el caso de los servidores externos y con el mismo funcionamiento, también podremos seleccionar en cuál queremos alojar nuestros datos y ver el precio mensual del servicio. Una vez realizado veríamos la verificación con el símbolo check y la fecha límite del mismo.
2.3 Funcionalidad ajustes
Cuando pulsamos sobre el icono de ajustes, se nos despliega una ventana desde la que podemos revisar la información y realizar los cambios básicos que también nos salen en la pantalla de login, pero al estar ya registrados, nos aparecen más opciones de configuración que tienen que ver con los permisos que damos a las aplicaciones o sitios web que frecuentamos. A través del panel de permisos de aplicaciones podemos gestionar de forma directa qué tipo de información queremos compartir y con qué sitios.
Tenemos 2 tipos de control. El primero es a través de los toogle switch, con ellos podemos dar o quitar permisos a aplicaciones de forma masiva. El segundo es con un patrón muy similar al usado en las funcionalidades de social y Pod. Desde el símbolo + que aparece al lado del permiso, podemos desplegar la opción seleccionada para que nos aparezcan todos los sitios que usamos y poder quitar o añadir permisos a una aplicación o sitio específico, una vez que cambia de escala de grises a color en caso de que queramos otorgar el permiso, o de color a escala de grises en caso de que queramos quitarlo, deberemos pulsar el botón “hecho” para verificar la acción. Finalmente obtendremos feedback de los cambios al terminar de realizar la tarea.
Para el diseño de las tres funcionalidades, se tuvieron en cuenta patrones de diseño que fueran reconocibles, el uso de feedback a través de diferentes elementos (iconos, colores y textos) y dobles verificaciones para evitar cometer errores a la hora de realizar una tarea.
3. Pantalla principal motor de búsqueda: resultados y Weblock
Para poder realizar búsquedas nos tenemos que dirigir a la barra central del navegador desde la que podremos realizar la tarea de una manera fácil y sencilla. Tenemos dos opciones a la hora de buscar, a través de texto y a través de voz. La interfaz ofrece feedback al usuario con una pequeña animación y a través del sistema de color (verde cuando está seleccionada la opción), sobre los iconos de lupa (escrito) o micrófono (voz).
3.1 Resultados
Una vez que comenzamos a realizar la búsqueda, el campo de texto se rellena con lo que vamos escribiendo o diciendo a la IA, que gestiona los datos introducidos y nos carga una página en la que nos ofrece unos resultados precisos. Estos aparecen de forma descendente en orden de coincidencia, agilizando el proceso de encontrar lo que deseamos. La barra de búsqueda se encuentra en la parte superior izquierda, seguida de unas opciones de personalización y búsqueda avanzada. En la parte derecha contamos con las opciones de social, Pod y ajustes por si necesitamos realizar alguna acción en ese momento no tener que volver a la página principal, así como el apartado de perfil, algo que aporta flexibilidad y eficiencia al diseño.
3.2 Weblock
Aparte de que la información obtenida con Webrowser es más precisa, también podemos ver en la página de resultados cómo algunos de estos se destacan con un icono compuesto por un símbolo de check dentro de un escudo. Esto hace referencia a la tecnología Weblock que verifica que el resultado obtenido es 100% verídico y legal. Si nos ponemos sobre el icono, este se destaca en verde y nos da información a través de una tooltip, en el que nos explica en qué consiste.
8. Conclusiones y futuribles
Si bien ya se han realizado algunas pruebas con usuarios reales para saber qué tal funciona el producto y validar el concepto, actualmente se encuentra en fase de testing, por lo que espero que dentro de poco podamos compartir más información acerca de los avances y resultados obtenidos. Mientras tanto dejo por aquí algunos futuribles que se han ido teniendo en cuenta y que por diversos factores no se han incluido en el proyecto inicial:
- Funcionalidad de creación de publicaciones
- Versión desktop SaaS
- Versión mobile
- Sección de favoritos
Para concluir, me gustaría indicar que actualmente seguimos iterando en algunos puntos del proceso y que seguimos trabajando para ofrecer el buscador que hemos imaginado y que la gente necesita. Una herramienta desde la que podamos realizar búsquedas precisas y reales sin miedo a que nos engañen o defrauden, de forma sencilla y segura y desde la que podamos conectar con quién queramos y cuándo queramos manteniendo nuestros datos y nuestra privacidad a salvo.
