Noticias

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

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

la red

El equipo web desarrolla y mantiene la mayoría de los sitios canónicos como ubuntu.com, Canonical.com y más.

Deslizador

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

Nuevo sitio certificado

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

marca

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

Logotipos web y de snap

Se nos encomendó la tarea de reunir varios logotipos de productos en un conjunto coherente para que el equipo de gestión de productos los usara en Snap y en los sitios web.

Soporte de mercadeo

En esta iteración, se crearon varios documentos para ayudar al equipo de marketing, desde hojas de datos hasta estudios de casos y documentos técnicos.

Charmed Openstack vs Red Hat Openstack

Hemos creado algunos anuncios carrusel que comparan las capacidades de Charmed Openstack y Red Hat Openstack para el equipo de marketing en LinkedIn.

Ubuntu en Microsoft

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

Al frente:

Después de este:

Banners de marca compartida para Ubuntu Pro y AWS

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

Me ilustraciones

Simultáneamente con las actualizaciones del sitio web de Mir, se nos pidió que creáramos algunas ilustraciones nuevas para usar en todo el sitio web.

Comercialmente

El equipo comercial gestiona 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 de usuario de Advantage para usuarios registrados.

Sabemos que la IU actual en / Advantage causa problemas a algunos usuarios y no expone toda la funcionalidad de las suscripciones de UA a 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 a
  • Los usuarios a veces usan accidentalmente su token personal en lugar de su suscripción paga de UA
  • La documentación se distribuye en varios lugares
  • No hay una forma clara de 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 necesitan administrarlas en línea.

La siguiente etapa del trabajo es un diseño visual donde continuamos refinando los diseños y asegurándonos de que la apariencia de la interfaz de usuario sea consistente con el marco básico.

Aplicaciones

El equipo de aplicaciones está desarrollando la interfaz de usuario para el proyecto MAAS y el tablero de 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 Design Sprint 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 formas diferentes de arquitectura de información y elegimos la que tenía más sentido para probar el nuevo diseño MAAS.

Como teníamos muy poco tiempo para trabajar en este proyecto, limitamos nuestro trabajo a probar tres componentes principales de 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. Al probar este prototipo, nos centraremos en tres aspectos del diseño; Capacidad de aprendizaje, eficiencia y tolerancia a fallos.

El diseño anterior pasó por varias iteraciones de rediseño durante las pruebas, y aquí están nuestros resultados.

  • 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 ha utilizado tanto.
  • Columna de listado de máquinas para acceso rápido: Cinco de cada seis personas estaban realmente entusiasmadas con la posibilidad de cambiar entre diferentes computadoras para ver los detalles, ya que descubrimos que muchos usuarios tenían que abrir varias pestañas por dos razones. 1. Está intentando 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 incluir dos propósitos en un concepto agregando tanto el estado local como el global en el área para obtener suficiente atención. Debido a esto, decidimos incluir solo estados globales en esta área y cambiamos el color de fondo para que se destaquen.
  • Paquete de promoción: En el diseño anterior de MAAS, encontramos que el botón Tomar acción está demasiado lejos del punto de interacción y el menú desplegable tiene demasiadas acciones, por lo que la calificación de complejidad es bastante alta. En este prototipo, hemos desglosado el botón de acción según la acción más popular y lo hemos acercado al punto de interacción. Esperamos hacerlo más contextual mostrando la acción correcta para diferentes estados de la máquina.

Nuestro siguiente paso después de haber completado estos tres componentes es centrarnos en cómo podemos adaptar las funciones de búsqueda y filtrado avanzadas a la forma en que las personas trabajan y crear perfiles de máquinas y el centro de notificaciones como plantillas.

Sprint de migración de MAAS React

Como continuación del trabajo de planificación de la semana pasada para una migración más rápida de MAAS a React, nos hemos asociado con otros miembros del equipo web para convertir rápidamente las páginas heredadas de Angular a React.

En este sprint hicimos un sprint de estilo de programación en pareja en el que presentamos a los miembros del equipo web 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, que es donde ahora se encuentra la página de Zonas de disponibilidad en React.

El siguiente paso para esta migración es resumir nuestro elemento de trabajo, limpiar algunos lugares y rediseñar el código antes de enviarlo.

vainilla

El equipo de vainilla diseña y mantiene el sistema de diseño canónico y la biblioteca de marco de vainilla. 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 programa integral de cambio de marca. Trabajamos con ellos para investigar cómo los nuevos logotipos y la marca podrían afectar los componentes de navegación y los encabezados existentes en nuestros sitios web.

Reubicación 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 una sugerencia de características del producto en MAAS, confiando únicamente en Figma, y ​​recreamos algunos de nuestros estilos y componentes de encabezado en Figma en el proceso.

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

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

Nuestro objetivo es crear un nuevo sitio web para Canonical Design System que combine valores de marca, trabajo de diseño y desarrollo e instrucciones 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 falta.

Luego, se realiza una investigación de la competencia sobre el sistema de diseño en busca de inspiración sobre 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 está trabajando en estrecha colaboración con el equipo de Store para desarrollar y mantener el sitio de Snap Store y el próximo sitio de Charmhub.

Migración de la tienda de la marca

Al migrar funcionalidades del tablero a snapcraft.io, trabajamos en la arquitectura de información para acceder a la página de la tienda de la marca.

Ahora tenemos las páginas que están disponibles si tiene derechos de administrador:

Así como si solo fuera un espectador de la tienda

Usando un patrón de búsqueda en la navegación de la izquierda cuando tiene una lista larga de tiendas:

Alineado a otras herramientas con el mismo patrón (como en el próximo MaaS)

Brand Store: instantáneas de administrador

En esta iteración, hemos mejorado la legibilidad de la navegación de la página, especialmente en puntos de interrupción más pequeños, como tabletas y dispositivos móviles, y hemos limpiado el área de la mesa. La «fecha de lanzamiento» se ha movido a una columna separada donde estaba anteriormente en «Último lanzamiento», creando una columna doble. Debido a que cada fila está en una sola fila, podemos ver más filas en una sola vista.

Los nombres de las tiendas son personalizados. La idea es representar el primer carácter de un nombre comercial en un símbolo circular. Entonces, cuando la navegación lateral está en un estado minimizado, es más fácil ver dónde y qué negocio está buscando. especialmente en una tableta

Contribuciones del equipo

Estamos contratando

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

Con ♥ del equipo web de Canonical.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba