Ubuntu

Resumen del equipo de diseño y web – 28 de junio de 2021

Resumen del equipo de diseño y web - 28 de junio de 2021

El equipo web de Canonical ejecuta iteraciones de dos semanas para crear y mantener todos los sitios web de Canonical, interfaces web de productos y mucho más. Estos son algunos de los aspectos más destacados de nuestro trabajo completo de esta iteración.

Web

El equipo web desarrolla y mantiene la mayor parte de Sitios de Canonical como ubuntu.com, canonical.com, y más.

Deslizadores

Creamos un control deslizante para la página de OpenStack para mostrar la diferencia de costo entre la nube pública y privada.

Nuevo sitio certificado

El antiguo sitio certificate.ubuntu.com ha sido retirado a favor del nuevo sitio de hardware certificado. Si intenta acceder al sitio anterior, será redirigido al nuevo sitio.

Marca

El equipo de la marca desarrolla nuestra estrategia de diseño y crea la apariencia de la empresa a través de muchos puntos de contacto, desde la web, documentos, exposiciones, logotipos y videos.

Logotipos de Snap y Web

Se nos encomendó la tarea de alinear una serie de logotipos de productos en un conjunto coherente para que el equipo de gestión de productos los usara en Snap y en las páginas web.

Soporte de mercadeo

Se creó una variedad de documentos en esta iteración para respaldar al equipo de marketing, desde hojas de datos hasta estudios de casos y documentos técnicos.

Charmed Openstack vs Red Hat Openstack

Creamos un par de anuncios carrusel que comparan las características de Charmed Openstack con Red Hat Openstack para que el equipo de marketing se ejecute en LinkedIn.

Ubuntu en Microsoft

Con el tiempo, la consistencia de nuestra presencia de marca en Microsoft se había convertido en un desastre. Trabajamos con el equipo de WSL para aportar coherencia y orden a la forma en que mostramos nuestros logotipos y descargas para que a los usuarios les resulte más fácil obtener la versión de Ubuntu que necesitan.

Antes:

Después:

Banners de marca compartida de Ubuntu Pro y AWS

Desarrollamos algunas ilustraciones nuevas y luego creamos más de 16 banners sociales diferentes en varios tamaños para nuestra campaña de marca compartida con AWS.

Ilustraciones de mir

Junto con las actualizaciones que se están realizando en el sitio web de Mir, se nos pidió que creáramos algunas ilustraciones nuevas para usar en todo el sitio.

Comercial

El equipo comercial mantiene y desarrolla todas las interfaces de usuario de servicios comerciales proporcionadas por Canonical. Incluida la tienda UA.

Rediseño de la interfaz de usuario de Ubuntu Advantage

En esta iteración, el equipo de UX ha estado trabajando en un rediseño completo de la interfaz Advantage para los usuarios que iniciaron sesión.

Sabemos que la IU actual en / Advantage causa problemas a algunos usuarios y no expone toda la funcionalidad de las suscripciones de UA de los usuarios de una manera obvia y utilizable.

Algunos de los problemas que identificamos a partir de las entrevistas y métricas de los usuarios son:

  • Es difícil para los usuarios encontrar el token correcto para conectar máquinas.
  • Los usuarios a veces usan su token personal por error, en lugar de su suscripción paga a UA
  • La documentación se distribuye en varios lugares
  • No hay una ruta clara para obtener apoyo o abrir un caso
  • Los usuarios pueden haber comprado suscripciones “sin conexión” a través de ventas telefónicas, pero aún así, deben administrarlas online.

La siguiente fase del trabajo es un diseño visual en el que refinaremos aún más los diseños y nos aseguraremos de que la apariencia de la interfaz sea consistente con la Marco de vainilla.

Aplicaciones

El equipo de Apps desarrolla la interfaz de usuario Para el Proyecto MAAS y el Panel de control JAAS Para el Proyecto Juju.

Arquitectura de la información y el nuevo diseño MAAS

En esta iteración de dos semanas, ejecutamos un sprint de diseño para crear rápidamente un prototipo del nuevo diseño de diseño MAAS. En la versión anterior, creamos un experimento para descubrir tres posibilidades diferentes de Arquitectura de información y seleccionamos la que tiene más sentido para probar el nuevo diseño MAAS.

Debido a que teníamos una cantidad de tiempo muy limitada para trabajar en este proyecto, definimos nuestro trabajo para probar tres componentes principales en la interfaz de usuario; la nueva arquitectura de información MAAS, el paquete de acciones y la barra de estado inferior. Hicimos un estilo de creación rápida de prototipos de pruebas de usuario con seis usuarios de MAAS de diferentes categorías de entornos. Mientras probamos este prototipo, nos enfocamos en tres aspectos del diseño; capacidad de aprendizaje, eficiencia y tolerancia a errores.

El diseño anterior pasó por varias iteraciones de rediseño durante la fase de prueba y aquí están nuestros hallazgos.

  • Navegación: Algunas personas encuentran el concepto de espacios fuera de lugar en la navegación, porque sienten que pertenece a la pestaña Redes y su funcionalidad no se utilizó con tanta frecuencia.
  • Columna de lista de máquinas de acceso rápido: Cinco de cada seis personas estaban realmente entusiasmadas con la posibilidad de cambiar entre diferentes máquinas para ver sus detalles porque descubrimos que muchos usuarios tenían que abrir varias pestañas por dos razones; 1. Están tratando de comparar configuraciones entre diferentes máquinas, 2. En un entorno MAAS enorme, puede llevar más tiempo cargar la lista completa de máquinas.
  • Barra de estado inferior: En nuestro prototipo anterior, descubrimos que estábamos tratando de encajar dos propósitos en un concepto agregando estados locales y globales en esta área y el color de fondo blanco hizo que esta barra fuera de la vista, por lo que mucha de la información que surgió no fue recibiendo suficiente atención. Como resultado, decidimos incluir solo estados globales en esta área y cambiamos el color de fondo para que se destaque.
  • Paquete de acción: En el diseño anterior de MAAS, nos dimos cuenta de que el botón “Actuar” está demasiado lejos del punto de interacción y hay demasiadas acciones dentro del menú desplegable, por lo que la puntuación de complejidad es bastante alta. Entonces, en este prototipo, dividimos el botón de acción por la acción más popular y lo acercamos al punto de interacción. Esperamos hacerlo más contextual mostrando la acción correcta para diferentes estados de máquina.

Nuestro siguiente paso después de finalizar estos tres componentes es centrarnos en cómo podemos adaptar las funciones de búsqueda avanzada y filtrado para que coincidan con la forma en que trabajan las personas, así como la creación de plantillas de perfiles de máquinas y el centro de notificaciones.

Sprint de migración de MAAS React

Continuando con el trabajo de planificación de la semana pasada para migrar MAAS a React más rápidamente, hemos unido fuerzas con otros miembros del equipo web para convertir rápidamente las páginas heredadas de Angular en React.

En este sprint, hicimos un sprint de estilo de programación en pareja, en el que incorporamos a los miembros del equipo web con la arquitectura MAAS y cómo funciona la API. Luego, dividimos las tareas en diferentes componentes y páginas para cada par. Hasta ahora, hemos logrado un progreso realmente bueno en la interfaz de usuario, donde la página de Zonas de disponibilidad ahora está en React.

El siguiente paso para esta migración es resumir nuestra tarea de trabajo, limpiar y refactorizar el código en algunos lugares antes de enviarlo.

Vainilla

El equipo de Vanilla diseña y mantiene el sistema de diseño Canonical y Biblioteca de Vanilla Framework. Garantizan un estilo coherente en todos los activos web.

Exploraciones de navegación

Nuestro equipo de marca está trabajando en nuevos logotipos como parte de un importante esfuerzo de cambio de marca. Colaboramos con ellos para explorar cómo los nuevos logotipos y la dirección de la marca podrían afectar los componentes de navegación y los encabezados existentes en nuestros sitios.

Traslado de nuestro sistema de diseño a Figma

Estamos en el proceso de migrar nuestra biblioteca de diseño de Sketch a Figma. En esta iteración, hicimos un aumento de características del producto en MAAS, confiando únicamente en Figma, y ​​en el proceso, recreamos algunos de nuestros estilos y componentes de encabezado en Figma.

Una de las agradables sorpresas en esta etapa inicial fue la capacidad de replicar exactamente el relleno y los márgenes convirtiendo los títulos en componentes. Esto tiene el potencial de eliminar por completo las conjeturas sobre los espacios en blanco al crear maquetas:

Investigación de UX en el nuevo sitio de Design System

Nuestro objetivo es diseñar un nuevo sitio de Canonical Design System que incorpore activos de marca, trabajo de diseño y desarrollo y orientación en un solo lugar.

Primero desglosamos la Arquitectura de Información de los 2 sitios actuales, para comprender el alcance del proyecto e identificar el contenido que nos falta.

Luego, se realiza una investigación de la competencia sobre el sistema de diseño para inspirarse en cómo alinean los componentes clave en la estructura de su sitio, en diferentes tamaños y usos del sistema de diseño.

También analizamos los casos de uso y las necesidades de diferentes personas en cada etapa del uso del sistema de diseño.

Mercado

El equipo de Marketplace trabaja en estrecha colaboración con el equipo de Store para desarrollar y mantener el Sitio de Snap Store y el próximo sitio Charmhub.

Migración de Brand Store

En el proceso de migrar funcionalidades del Tablero a snapcraft.io, trabajamos en la arquitectura de la información para acceder a la página de la tienda de la marca

Ahora tenemos las páginas disponibles cuando tiene derechos de administrador:

Así como cuando eres un espectador solo de una tienda

Con un patrón de búsqueda en el panel de navegación izquierdo al tener una lista larga de tiendas:

Estar alineado con el mismo patrón en otras herramientas (como en el próximo MaaS)

Brand Store: instantáneas de administrador

En esta iteración, hemos mejorado la legibilidad de la navegación lateral, particularmente en puntos de interrupción más pequeños, como tabletas y dispositivos móviles, y también hemos ordenado el área de la mesa. La “Fecha de publicación” se ha movido a su propia columna donde anteriormente estaba debajo de la “Versión más reciente”, lo que creaba una columna doble. Con cada fila en una sola línea, podemos mostrar más filas en una sola vista.

Los nombres de las tiendas los define el usuario. La idea es tomar el primer carácter del nombre de una tienda y representarlo en un ícono circular, por lo que cuando la navegación lateral está en un estado contraído, sería más fácil identificar dónde y qué tienda está mirando; especialmente en una tableta

Publicaciones del equipo

  • Pista técnica del equipo UX

Estamos contratando

  • Basado en el hogar – EMEA
    Investigador de usuarios sénior ›
    El equipo de diseño de Canonical está buscando un investigador de usuarios sénior, experto en la práctica de investigación actual, con intereses en tecnología e innovación.
  • Basado en el hogar – EMEA
    Diseñador UX ›
    Únase al equipo que diseña y construye nuestras aplicaciones web empresariales, para servicios en la nube, IoT y el centro de datos. La experiencia del usuario en Canonical es una colaboración entre la ingeniería de front-end, la gestión de productos y el diseño visual.
  • Basado en el hogar – EMEA
    Desarrollador web >
    Una oportunidad excepcional para que un desarrollador web trabaje dentro de un gran equipo de UX y diseñadores y desarrolladores visuales que crean sitios web y aplicaciones.

Con ♥ del equipo web de Canonical.

Leave a Comment

You may also like

Más