Cómo diseñamos Oscar 2.0

En el otoño de 2016, cerré mi primera compañía y me uní a Oscar. La misión de Oscar es llevar el seguro de salud al siglo XXI. Mi tarea era llevar a cabo un rediseño de nuestras propiedades móviles, construidas desde cero, en reacción nativa.

Todo el proceso tomó una tonelada de exploración, creación de prototipos, pruebas y desarrollo. Al final, se nos ocurrió una solución que creemos que hace que la atención médica sea más fácil de entender, más accesible y conveniente.

Esto es lo que se necesitó para hacerlo realidad.

Auditoría e inventario

Cuando llegué a Oscar, comencé rápidamente a programar 1 a 1 con todos nuestros equipos internos de productos para comprender mejor las aplicaciones para miembros y proveedores.

Lo que encontré fue que la versión anterior de la aplicación no se había actualizado en más de dos años. En ese tiempo, Oscar había acumulado una seria deuda técnica y de diseño. Nuestra aplicación iOS fue creada por 1/3 Obj-C, 1/3 Swift y 1/3 React native.

Mi primer proyecto * muy * fue en realidad actualizar la línea de tiempo que ves en el extremo derecho. Desafortunadamente, acabamos de colocarlo en el antiguo

Después de reunirme con todos, comencé a armar un mapa móvil de las aplicaciones iOS y Android en Sketch. Con todo, terminé con alrededor de 50 a 60 capturas de pantalla que tuvieron que reconstruirse. El objetivo era comprender mejor el producto y ver dónde existían inconsistencias. Como estábamos reconstruyendo ambas aplicaciones en React Native, también fue útil hacer un inventario de todos nuestros componentes de la interfaz de usuario y ver dónde teníamos discrepancias de tamaño.

Una cosa que noté de inmediato fue que la marca visual y la identidad de Oscar también habían evolucionado. La aplicación móvil ya no se sentía consistente con nuestro sitio y los materiales de marketing y queríamos asegurarnos de que el nuevo diseño móvil se alineara bien.

Afortunadamente, tuve la suerte de trabajar con algunas personas realmente talentosas en el lado de la marca. Grita Maxwell, Emili y todo el equipo de Salida. Los elementos de marca deliciosos y satisfactorios que verá en toda la aplicación se realizaron en colaboración con ellos y realmente le dieron vida a la aplicación.

Dando un paso atrás y estableciendo metas

Una vez que tuvimos el panorama general, comenzamos a elaborar una hoja de ruta y establecer objetivos más amplios para el rediseño. Inmediatamente supimos que queríamos facilitar que las personas encuentren atención, hablen con un médico y accedan a toda su información de salud en un solo lugar.

También queríamos impulsar el uso de funciones infrautilizadas como la mensajería con Concierge y la reserva de citas. La accesibilidad se mejoraría al introducir tamaños de fuente más grandes y colores más oscuros con mayor contraste para mejorar la legibilidad.

Arquitectura de información propuesta para nuestras aplicaciones móviles

Un objetivo relacionado era repensar la arquitectura de información de la aplicación para acomodar nuevas funciones en el futuro. Tenemos algunas nuevas características interesantes que saldrán durante el próximo año y necesitábamos más espacio para escalar.

Confía en el proceso

Después de establecer una hoja de ruta y alinear nuestros objetivos, Adam Karnas y yo comenzamos a establecer un puñado de entrevistas internas. Charlamos con cada uno de los equipos de productos de Oscar para tener una idea de dónde estaban los puntos de fricción de los miembros clave dentro de la aplicación existente. También utilizamos revisiones en línea y tickets de soporte para recopilar comentarios directos de los miembros.

Después de consolidar las notas, Adam y yo elaboramos un resumen completo del diseño que describía los objetivos del proyecto, los comentarios de las partes interesadas, las historias de los usuarios y las fechas clave de entrega del proyecto. Lo revisamos con el equipo de ingeniería y nos aseguramos de que todo lo que describimos tuviera alcance y sea posible para V1.

Proceso, proceso, proceso.

Cuando llegamos a un buen lugar, reunimos tres diseños diferentes para probar. Uno que cambió dinámicamente en función de la ubicación y los servicios disponibles (Opción A), una versión WYSIWYG donde todas nuestras funciones principales eran accesibles desde la pantalla de inicio (Opción B), y una que fue más curada por nosotros para guiar a los miembros a cosas que nosotros quería que completaran o interactuaran con (Opción C).

Nuestros conceptos prototipo originales para pruebas de usuario (A, B y C de izquierda a derecha).

A continuación, realizamos una ronda preliminar de pruebas de usuarios con miembros de Oscar. Les mostramos los tres prototipos y obtuvimos comentarios en el transcurso de una hora. Todas las entrevistas fueron grabadas y documentadas para que pudiéramos regresar y estudiar comportamientos y reacciones.

Eso es que llevo una sudadera con capucha de Pablo en la parte inferior derecha.

Algunos de los miembros que vinieron no estaban 100% convencidos de los diseños que les mostramos. Otros nos dieron comentarios críticos y dijeron que nos estaban animando. También hubo miembros que estaban muy familiarizados con la aplicación y otros que apenas la habían usado.

Después de procesar todos los comentarios de la primera ronda de pruebas, nos dimos cuenta rápidamente de que la opción B era la ganadora. Luego volvimos y comenzamos a refinar las interacciones, los patrones de navegación y el diseño visual para este prototipo, asegurándonos de que todo funcione de manera consistente en dispositivos iOS y Android.

Bienvenido a casa

Tres cosas que queríamos enfatizar en la pantalla de inicio: encontrar atención, hablar con un médico y hablar con su conserje. La ilustración también cambia dinámicamente según la ciudad en la que se encuentre.

Cuidado a tu alcance

Un gran tema en este rediseño fue la accesibilidad. Queríamos que los miembros tuvieran un contexto detrás de nuestros servicios y aprovecharan los beneficios que eran gratuitos para ellos.

Telemedicina mejorada

Hable con un médico y conserje son dos de nuestras características más importantes. Queríamos crear una experiencia más personalizada y hacer que hablar con un médico fuera menos intimidante.

Todo tu historial de salud en un solo lugar

El seguro de salud es increíblemente complicado. Una gran victoria para nosotros fue poder destilar la información de salud más importante de nuestros miembros en una sola vista. Su plan, resultados de laboratorio, recetas e historial siempre deben estar accesibles.

Embarque mejorado

La educación es una de las piezas más importantes para nuestro producto. Queríamos enseñar a nuestros miembros cómo aprovechar nuestros nuevos servicios y beneficios que estaban cubiertos por su plan.

Experiencias encantadoras

Haz una experiencia agradable. Sincronizar recuentos de pasos fue una de nuestras características más utilizadas. Entonces, decidimos recompensar a los miembros cuando alcanzan su objetivo diario.

Subida de miembro adjunto

Esta fue otra característica que creamos desde cero durante el proceso. Permite a los miembros agregar imágenes contextuales o documentos cuando hablan con su Conserje. Esto nos ayuda a satisfacer mejor sus necesidades.

Viendo resultados

Lanzamos la actualización de la aplicación la semana pasada y hemos estado rastreando cuidadosamente la participación y el comportamiento de los miembros. Aquí hay algunos números tempranos de los últimos 7-10 días. Realmente emocionado de obtener datos y usarlos para tomar decisiones de diseño más informadas.

Para llevar clave

Como equipo, aprendimos mucho sobre el proceso de rediseño y las mejores prácticas para pasar del diseño al desarrollo. Estas son algunas de las principales conclusiones:

  • La sobrecarga cognitiva es real. Los miembros prefirieron un flujo de información más progresivo con menos opciones en cada etapa. No abrumes a las personas con demasiadas opciones de inmediato.
  • Nombrar es importante. La terminología estándar de la industria, como la Encuesta de salud, no es intuitiva para los miembros. Siempre que sea posible, es mejor utilizar un lenguaje explicativo y relatable.
  • Siempre agrupe la información relevante. Al consolidar la información relacionada del plan de salud en una sola pestaña, dejamos en claro y fácil el acceso de los miembros.
  • La personalización importa. Los miembros respondieron bien a las fotos reales de los miembros de su equipo de conserjería y a una ilustración de fondo con orientación geográfica.
  • React Native es las rodillas de las abejas. Si bien tomó un poco más de tiempo refactorizar toda la aplicación en React Native, les da a los desarrolladores más tiempo para crear nuevas funciones en lugar de mantener versiones separadas de la aplicación.

Actualizaciones futuras

En los próximos meses, el equipo lanzará actualizaciones adicionales que ayudarán a los miembros a salvar a los médicos, centros médicos y miembros del equipo de conserjería preferidos en un solo lugar. Todo mientras los ayuda a tomar decisiones más informadas sobre qué médicos consultar y cuándo.

También hemos comenzado a sistematizar nuestro proceso de diseño mediante la construcción de la interfaz de usuario como componentes como parte de nuestra anatomía móvil en React Native. Esto permite iterar rápidamente, acelerar el tiempo de desarrollo y mantener la coherencia del diseño.

Emocionado de ver a dónde va.

Agradezca a todo el equipo de diseño de Oscar por ayudar a que esto suceda. Frank G, Maxwell Holyoke-Hirsch, Gabe Schindler, Josh Long, Adam Karnas, Gabbie Williams, Anthony Zhang, Emili Hsu

PD Perdón por el tiempo de carga en estos GIFS, probé todo tipo de compresión y aún nada