En esta publicación de blog, profundizaré en el proceso de expansión de una pequeña función en ubuntu.com, desde el requisito original hasta la etapa de diseño y la transferencia a la ingeniería. Está destinado a brindarle una buena descripción militar de cómo en Canonical User Experience (UX) estamos haciendo el diseño para una pequeña característica como esta.
Tabla de Contenidos
historial
Nuestros clientes pueden sufragar sus suscripciones a Ubuntu Advantage anualmente o mensualmente, pero actualmente solo reciben una suma por correo electrónico. Esto está acertadamente para un MVP, pero no es una experiencia de heredero muy completa.
Queremos que nuestros clientes vean una nómina de sus facturas, las descarguen y administren sus métodos de suscripción.
Este es solo un pequeño punto en una hoja de ruta ajetreada, por lo que debemos ser eficientes y encontrar una gran decisión en solo unas pocas semanas.
Investigación de usuarios
Gracias a nuestro Reunión de entrevistas de usuarios, tenemos una comunidad próspera de cientos de clientes listos y dispuestos a participar en las entrevistas de los usuarios (puede unirse al asociación si está interesado).
Realizamos entrevistas a usuarios con un asociación diverso de usuarios de Ubuntu, entre los que se incluyen:
- Un administrador de sistemas en una gran universidad
- Un director de TI a nivel de reunión responsable del soporte
- Co-fundador de una empresa de tecnología especializada
- Un profesional de TI con menos experiencia que dirige una agencia multicliente
De esto aprendimos mucho sobre las diversas razones para comprar Ubuntu Advantage y cómo nuestros clientes disfrutan comprando y usando el servicio.
Algunas de nuestras conclusiones esencia de esta investigación son;
- «Para algunas máquinas suscripción con mi propia polímero y necesito una suma para poder pasarla a Finanzas».
- «Nos ocupamos de muchas máquinas, por lo que preferiría que me facturaran por un año de soporte en zona de un mes a otro».
- «A veces me olvido de entregar las facturas y es complicado buscarlas en mi correo».
Todos los conocimientos verdaderamente bártulos que podemos incorporar a nuestro diseño y validar nuestras decisiones de diseño.
Historias de heredero y funciones
Basándonos en nuestra investigación, mejores prácticas y conocimiento del producto, podemos crear una nómina simple de historias de usuarios en el formato:
«Como un [type of user] me gustaría [do something] Así que puedo [achieve a goal or complete a task]».
Por ejemplo, a partir de nuestra investigación, sabíamos que los usuarios quieren un golpe obvio y directo a las facturas, por lo que deberíamos adicionar una historia a eso.
Esta es una metodología UX de larga data que ayuda a los diseñadores a obtener una imagen completa de lo que los usuarios quieren que sea una función. Es posible que no capturemos todo en esta primera lectura, pero debemos estar seguros de que estamos satisfaciendo las deyección expresadas durante nuestra etapa de investigación, así como las deyección comerciales que conocemos.
Hacia lo alto: un conjunto esencial de historias de usuarios para esta función.
Luego especificamos estos casos de uso y los asignamos a las funciones requeridas. Esta es una buena técnica para asegurarnos de que no nos hemos perdido falta. una condición del heredero no satisfecha a la izquierda o una función que no es verdaderamente necesaria a la derecha.
En nuestro ejemplo, igualmente, podríamos ofrecer a los usuarios una descarga directa de un PDF de cada suma con un clic para completar la historia del heredero.
Hacia lo alto: asignación de historias de heredero a funciones.
Conexión API
En este punto, tenemos algunas ideas claras sobre las características que debemos presentar a nuestros usuarios.
El front-end (la interfaz de heredero que ve en el navegador) se cimiento en el back-end para proporcionar sus datos, que vienen a través de una API. Solo podemos ofrecer al cliente una experiencia que se puede entregar a través de nuestra API compatible. Así que ahora es el momento de susurrar con nuestro equipo de ingeniería y ver si nuestras ideas son posibles.
En este caso, nuestra API admitió obtener el valencia en dólares individual de una suma cuando se solicitó la nómina de facturas de heredero, no se incluyó el monto en dólares. Esto significaría que el front-end tendría que suceder por las facturas, lo que es cachazudo y requiere muchos posibles.
En cambio, nuestro equipo de back-end enriqueció la respuesta de la API con el monto en dólares de cada suma en la nómina.
Si nos hubiéramos saltado este paso, habríamos tenido una experiencia de heredero mucho peor o habríamos realizado algún trabajo de ingeniería de última hora, los dos resultados no deseables.
El diseño y la ingeniería de la experiencia tienen como objetivo trabajar en estrecha colaboración para alcanzar los mejores resultados posibles para nuestros clientes.
Wireframes
Los wireframes son diseños de página muy toscos diseñados para mostrar cómo se verán las vistas de la aplicación, ¡sin la distracción de hacer que se vean hermosas!
Los wireframes se crean rápidamente y permiten a los diseñadores e ingenieros visuales comprender la intención del diseño de UX para una función.
En los siguientes ejemplos mostramos tanto un «arquetipo» – cómo debería encontrarse la paisaje en última instancia, como un «MVP» – un producto leve viable que, en nuestra opinión, es la funcionalidad mínima absoluta que podemos editar y sigue siendo nuestra Ser útil para los clientes.
Este enfoque permite a nuestro equipo comprender no solo el diseño de esta iteración, sino igualmente con destino a dónde vamos en el futuro, para que puedan tomar mejores decisiones sobre su trabajo.
Hacia lo alto: el ‘arquetipo’ de esta paisaje.
Hacia lo alto: la lectura ‘MVP’ de la paisaje.
Revisión por pares de UX
¡Nunca trabajamos solos! Creemos que nuestro mejor trabajo proviene de trabajar juntos. Por lo tanto, nuestros colegas revisan todo nuestro trabajo para cerciorarse de que no nos hemos perdido falta y se tienen en cuenta otras perspectivas.
No siempre aceptará todos los cambios y sugerencias sugeridos por sus compañeros de equipo, pero a menudo habrá un «¡Ajá!» O dos. Momentos en los que una nueva perspectiva disuelve poco con lo que estás atrapado.
Hacia lo alto: una sugerencia útil de una revisión por pares.
Diseño visual
El extremo paso antaño de entregar nuestro trabajo a los ingenieros de front-end es la etapa de diseño visual. En colaboración con Vanilla Framework, nuestro diseñador visual senior toma los wireframes básicos y los convierte en maquetas simples y elegantes de suscripción fidelidad de las páginas.
Al pensar en la categoría de la información, la tipografía y atenerse a los patrones interiormente del situación esencial, se aseguran de que la función sea servible y coherente con el resto del producto.
Hacia lo alto: una maqueta de suscripción fidelidad de la paisaje nómina para su expansión.
Durante la etapa de producción, el diseñador ayuda al ingeniero de front-end con cualquier problema / cortapisa y revisa el tesina desarrollado para cerciorarse de que todos los componentes visuales y técnicos se muestren y funcionen correctamente.
Y eso es todo para esta inmersión profunda. Puedes ver más de nuestro trabajo en Instagram @ubuntudesigners, síguenos en Twitter @ubuntudesigners – y no olvide corroborar las posiciones abiertas si desea unirse a nuestro equipo.
