Overview
Enara Health provides a program based on the way users eat, user’s physical activity and genetics. The problem was the registration process had a lot of steps and we were losing conversions.
My role
We redesigned the entire registration process optimizing user experience and conversions.
Being the main responsible for the project UI, I managed to implement an atomic design approach, which allowed us to create a solid styleguide. We build a library to combine and reuse components for easy creation of new pages while maintaining unity and aesthetic consistency.
Tasks
• Wireframing
• Prototyping
• UI system creation
• Library maintenance
Tools
Sketch
Invision
Photoshop
Slack
Illustrator
Jira
Principle
Zeplin
Atomic Design Approach
The entire logic of the registration process had to be changed. The user experience had to be improved through simpler and more intuitive onboarding. Many new screens had to be created, re-sorted, tested and modified again if necessary. Many iterations were going to be needed.
To face that process the best way, reusable components were created. The Atomic design methodology was adopted. Within the advantages of using atomic design we found reusability of user interface pieces, visual consistency maintenance.
This approach is composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner:
Atoms
Molecules
Organisms
Templates
Pages
Atoms
Atoms are basic building blocks of matter. In our interfaces they serve as foundational building blocks. In this stage we defined color palette, typography, icons, buttons and different inputs and selectors.
Molecules
Molecules are relatively simple groups of UI elements functioning together as a unit.
Organisms
Already having defined atoms and molecules, we combine them again to create organisms. These organisms are going to lay the foundations of different pages and sections of an interface.
Templates
Here we modify a bit the process. Although in Atomic Design templates appear in a fourth stage, the reality is that we worked them in parallel or even before the atoms together with the UX team.
Pages
Pages creation was the last stage of the atomic design process. Combining atoms, molecules and organisms we could easily create all the onboarding pages.
With a large marketing team involved in decisions we had to be prepared to receive feedback and quickly iterate. That is why the reuse of library components was essential to carry out the project.
Atomic Design in action
Component recycling is key since it simplifies and optimizes production times. Combining atoms, molecules and organisms we can create a new page in seconds.
Molecule overrides
This molecule was created combining 3 atoms: Icon + Heading 3 + Secondary Button Medium Size. By overrides we easily replace the content and create the page with needed information.
Conclusion
Having introduced an atomic design approach allowed us to get a consistent UI. We redesign the onboarding process and we set the bases of an scalable interface. Ready to test, iterate, modify and test again.