Design Process
The design process prioritised refining the user journey to create a seamless, impactful, and intuitive experience across the platform. Key tasks included:
1. Structuring Information Hierarchy: Introduced clear section dividers and icons to categorise elements logically, ensuring users can navigate the content effortlessly.
2. Optimising Spacing and Alignment: Established consistent padding, font sizes, and component alignment to create a balanced, polished interface across all screens.
3. Enhancing Visual Flow: Used visual hierarchy to intuitively guide users through the app, prioritising ease of navigation and fluid interactions.
Aligning System Design with Real-World Interaction
As part of our UX strategy, we identified and addressed underutilised spaces within the interface. To maintain a clean, purposeful design, these gaps were selectively filled, reinforcing the visual hierarchy. This approach created a balanced composition that directed user focus on core content, resulting in a seamless and engaging experience.
Illustrations to Bridge Gaps
In underutilised areas, I incorporated targeted illustrations, creating a cohesive aesthetic and visual flow across the interface. This not only enhanced usability but also conveyed the brand's identity in a consistent and engaging way.
Consistency and standards
Issue: The user profile section had a solid foundation but lacked consistency in layout and clarity in information hierarchy, which introduced subtle friction points and impacted user comprehension.
Solution:
1. Information Hierarchy: Introduce section dividers and utilize icons to categorize key elements logically.
2. Spacing and Alignment: Ensure consistent padding and font sizes across all components.
3. User Journey Optimisation: Use visual hierarchy to guide users through the interface intuitively, ensuring a smooth navigation flow.
Key Improvements:
1. Strategic use of information hierarchy.
2. Effective iconography for segmentation.
3. Optimized user journey and seamless interactions.
Aesthetic and Minimalist Design
During the review of the Workout section, we identified that the extensive use of white space created a visually cold experience. To improve the user experience, the design should focus on creating visual balance with warmer tones or inviting elements that promote engagement.
Key Improvements:
1. Introduce Warm Visual Elements: Soften the interface with subtle colors.
2. Clarify Section Divisions: Use imagery strategically to segment content and improve readability.
3. Enhance Design Consistency: Maintain uniformity across all elements to create a more cohesive and friendly user interface.
Suggestions - Improving Consistency: In the proposed design iteration, I strategically emphasized section division by incorporating images to exemplify each exercise for the user. Through meticulous attention to consistency, I aimed to bring prominence to each section, fostering a more visually cohesive and user-friendly interface.
Key Improvements:
1. Sectional Clarity Emphasis.
2. Consistency Refinement.
3. Prominence for User Engagement.
Elevating UI Design Through Brand Integration
Suggestions: Incorporating the brand into UI design, I utilised the logo as a key element, serving as both an inspiration and a focal point for additional design elements. An example of this approach is the implementation of a counter. However, the design possibilities are extensive, offering various avenues for exploration and expression
Improvements:
1. Strategic Brand Integration.
2. Inspired Design Elements.
3. Functional Example.
Registration steps
The Significance of Onboarding in UX Design
Suggestions: Onboarding serves as a valuable mechanism within UI/UX design, presenting essential information about the fundamental functionality of the application. Beyond its informative role, Onboarding also serves as an avenue to empower users by providing the opportunity to initiate their initial configurations and update user data. This strategic approach not only ensures a smooth introduction to the application but also actively involves users in shaping their individualised experience from the outset.
Onboarding example
Unleashing the Power of a Design System at Habitus Health
Suggestions: In the dynamic world of digital design, the creation and implementation of a Design System stand as a pivotal cornerstone for a brand's visual consistency and user experience. While Habitus Health currently doesn't boast a comprehensive Design System, the recent introduction of new colours and a basic UI Kit hierarchy marks an essential step towards establishing a cohesive design language.
1. Consistency Across Touchpoints.
2. Efficiency in Design Iterations.
3. Scalability and Adaptability.
4. Enhancing User Experience.
Looking Forward
While the current introduction of new colours and a basic UI Kit sets the groundwork, considering the development of a comprehensive Design System will be instrumental in unleashing the full potential of design at Habitus Health. This strategic investment will not only elevate the brand's visual identity but also fortify its position as a leader in delivering a seamless and delightful user experience.
3D Simulation and Image Processing Workflow at Habitus Health
1. Creating and Exporting the Simulation in Blender: To ensure ergonomic accuracy, we developed a 3D avatar in Blender, articulating correct postures for the workplace. Using Python automation, multiple cameras were positioned in circular layers to capture various angles effortlessly.
2. Batch Exporting the Rendered Images: The rendered images are batch-exported using custom scripts, ensuring high quality and transparency. This automation streamlines the capture process without manual effort.
3. Image Processing with PHP: Once exported, a PHP web tool resizes, rotates, and optimizes the images to maintain quality and compress the files. This ensures smooth integration across the Habitus Health platform.
The Importance of This Feature for Users
This 3D simulation feature offers an immersive and user-friendly way to educate users on ergonomically correct postures. It promotes well-being by guiding posture correction visually, supporting compliance with occupational health standards. This enhances the user experience while fostering healthier workplace habits.
Habitus Health Logo Evolution From 2D to 3D Design
This section showcases the creative process behind the Habitus Health logo, transitioning from a flat 2D concept to a 3D render using Spline Design. Each step reflects the brand's commitment to innovation and well-being through modern and organic aesthetics.
1. 2D Logo Creation
The initial design explores soft shapes and colors aligned with the brand's identity.
2. 3D Modeling and Rendering
Using Spline Design, the logo gains depth and volume, reinforcing the brand's digital presence and offering flexibility for interactive applications.
Why This Design Matters for User Experience
A well-crafted logo fosters emotional connections with users and builds trust, aligning with Habitus Health's mission to promote well-being. The 3D version also opens new opportunities for animations and interactive experiences, enhancing user engagement.
Conclusion
1. Onboarding Screens: Five screens focused on assessments, insights, and compliance.
2. Design System: Emphasized the importance of a unified visual language.
3. User Flow Optimisation: Improved navigation and consistency for better user satisfaction.
4. 3D Simulation: Enhanced user engagement through ergonomic posture modeling.
5. Brand Identity: Strengthened through logo evolution and consistent visual design.