Doctar - UX/UI, Styleguide and Design System
Foundation
The benchmark performed served to guide all decisions related to interfaces, functionalities, navigation flows, colors and fonts, carefully observing trends in competitors and applying to the Doctar interface as necessary, so that the solution offered less cognitive effort, aggregating all the improvements and elements to make it´s use as simple and intuitive as possible.
Logo
The development of the logo had a study on colors, in which the use of shades of green was defined, color with various associations with nature, balance, peace and harmony, and which also symbolizes growth, freshness and fertility, having strong emotional correspondence with security.
In chromotherapy, it is stated that it has great healing power, helping to stimulate immunity, and being indicated to fight infectious diseases. It also has refreshing and soothing action, helping to promote physical and mental well-being.
With regard to form, we chose the cross, so it´s a universal simbol used in health, medical and relief activities, to provoke an immediate association with these factors. The name was added using the source Segoe Script, which refers to the medical manuscript, in this case, passing through the infamous that every doctor has bad calligraphy, after all, the brand would need to be clearly readable at first glance.
Styleguide/Fonts
For the fonts, the choice was Opens Sans Hebrew, as it is part of a family common to the Apps of the segment, and is widely used in the digital environment, offering great possibilities of being pre-loaded on users’ devices, thus reducing the load time and improving performance.
Design System/Colors
For interface colors, while maintaining the consistency, strength and meaning of green, this was the logical choice. Thus, we defined a primary palette with light and dark tones, and added a complementary secondary palette in magenta tones, which among its many meanings include physical, emotional and mental purification and healing, also symbolizing respect, dignity, sincerity and transformation.
Design System/UI Components
With two prototypes, for different purposes and devices, patients/professionals - mobile/desktop, it was necessary to use slightly different “finishings” in some interface elements. Therefore, colors, fonts, and most of the icons were used in both versions. However, as not all iconography would be applicable in both versions, each of them features particular icons.
Buttons and input fields, in general, gained, in the desktop version, less rounding and less color load, in addition to the inclusion of a tertiary and quaternary variations of buttons for greater cognitive clarity regarding the signaling of sections, sub-sections, and functionalities at each stage of navigation in which users would find themselves.
We understand the decision for differences as necessary, so they would be used in an environment with much more intensity and frequency than in the mobile version, greater lightness and visual comfort are necessary.
Related articles:
