Avalian
Be precisely when your members need you to be. The Avalian essence should always be availability.
The app that integrates everything that Avalian has to offer as a medical coverage company.
The focus is to provide dynamic and frequent solutions directly from the app. The design of the experience is completely focused on the people involved: doctors, members, providers, partners, beneficiaries, etc.
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad589b0ec2fcd9_Home%20Privada%20Sin%20tra%CC%81mites%20%E2%80%94%20All%20Hands%20%E2%80%94%20Left%20hand.png)
The Research
Digital experience
1. Dialogue: App / User - User / App
2. One thing at a time
3. I know where to start: Visual Order
4. I dare to tap: Predictable and safe
5. Immediacy: Actions for every day
6. Significance: Brand personality
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad581ffdc2fce7_Avalian%20-%20Ana%CC%81lisis%20Disen%CC%83o%20UI%20-%20Benchmark%201.png)
The Design System
Foundations
Color Styles
The Avalian design system establishes a purposeful set of color styles as the perfect starting point. When it comes to color, contrast is critical for ensuring readable text. We've added WCAG 2.1 contrast ratios to our color system to ensure accessibility standard.
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad583152c2fce8_Colors.png)
Typography
A purposeful set of typographic styles was develop to establish the hierarchy and consistency of the design system. We’ve tested this typographic scale to make sure it’s robust enough to be used across the project, while remaining as accessible as possible.
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad588684c2fce9_Tipography.png)
Icons
System Icons
Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
Company Logos
Avalian logos were added to the design system according to brand guidelines.
Featured Icons
A set of Icons in containers to give emphasis on specific actions.
Grid layout
Layout grids define structure, hierarchy, and rhythm in the design. Working from a defined layout system allows better and more consistent production, removing guesswork as responsive designs are lay out.
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad58150cc2fcea_Grid.png)
COMPONENTS
Atoms, Molecules & Organisms.
A design system based on "the atomic design" methodology. We defined symbols, components, templates and assets that allowed us to maintain order and consistency during all the design springs.
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad58d13dc2fce5_Componets.png)
The result
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad582e92c2fcd5_avalian%20app%20screms.png)
Users can navigate the application with ease and security. The app provides clear and recognizable actions, not burdening the experience with unnecessary explanations while also making progress in flows more dynamic.
![](https://cdn.prod.website-files.com/6369496804ad58032ec2fc6f/6369496804ad5844abc2fcda_Walking%20with%20iPhone%20X%20mockup%20(Mockuuups%20Studio).png)