Therapeutic Module
Therapeutic Module
Therapeutic Module
The therapeutic Module is a desktop application tailored for military therapists, addressing a spectrum of challenges from workplace dynamics to domestic issues. Integrating VR technology and heart rate monitoring, this tool immerses patients in realistic scenarios, guiding them through appropriate responses and behaviors.
The therapeutic Module is a desktop application tailored for military therapists, addressing a spectrum of challenges from workplace dynamics to domestic issues. Integrating VR technology and heart rate monitoring, this tool immerses patients in realistic scenarios, guiding them through appropriate responses and behaviors.
The therapeutic Module is a desktop application tailored for military therapists, addressing a spectrum of challenges from workplace dynamics to domestic issues. Integrating VR technology and heart rate monitoring, this tool immerses patients in realistic scenarios, guiding them through appropriate responses and behaviors.
Client
SEDENA
DELIVERABLES
Interface Redesign
Documentation
Interface Redesign
Documentation
Year
2024
Role
Jr. UX Designer
The biggest issue...
Due to the state of the existing app, our team embarked on an overhaul of the product architecture. Our primary goals were to streamline the user flows, eliminate redundant features, and adopt a minimalist design that facilitates quick access for users to locate their patients and initiate simulations promptly. The focus was on simplifying the interface to enhance usability and efficiency throughout the application.
Due to the state of the existing app, our team embarked on an overhaul of the product architecture. Our primary goals were to streamline the user flows, eliminate redundant features, and adopt a minimalist design that facilitates quick access for users to locate their patients and initiate simulations promptly. The focus was on simplifying the interface to enhance usability and efficiency throughout the application.
Looking back at the old design
When reviewing the old design, it became apparent that the emphasis was primarily on visual aesthetics, aiming to resemble a game rather than prioritizing user experience. This approach neglected fundamental design principles, resulting in confusion regarding each step of the process.
When reviewing the old design, it became apparent that the emphasis was primarily on visual aesthetics, aiming to resemble a game rather than prioritizing user experience. This approach neglected fundamental design principles, resulting in confusion regarding each step of the process.
Consequently, the team identified a critical need to completely re-architect the product with a strong focus on adhering to established design patterns. At this point, the decision was made to base the UI of the product on Microsoft’s Fluent Design System. This shift ensures a more intuitive user interface that not only improves usability but also aligns with recognized standards in user experience design.
Consequently, the team identified a critical need to completely re-architect the product with a strong focus on adhering to established design patterns. At this point, the decision was made to base the UI of the product on Microsoft’s Fluent Design System. This shift ensures a more intuitive user interface that not only improves usability but also aligns with recognized standards in user experience design.
Ouch! Look at these pain points
01
01
Excess on visuals
Excess on visuals
The previous design was overloaded with excessive graphic elements that contributed little to the user experience and often cluttered the interface without adding significant value.
The previous design was overloaded with excessive graphic elements that contributed little to the user experience and often cluttered the interface without adding significant value.
02
02
What’s hierarchy?
What’s hierarchy?
The old design lacked clear hierarchy among its elements, leading to a disorganized layout where users struggled to navigate and initiate workflows. Addressing this issue was crucial to establishing a more structured and intuitive user experience.
The old design lacked clear hierarchy among its elements, leading to a disorganized layout where users struggled to navigate and initiate workflows. Addressing this issue was crucial to establishing a more structured and intuitive user experience.
03
03
Give me the right information at the right time
Give me the right information at the right time
Rather than overwhelming users with every detail upfront, our focus is on understanding their specific needs and preferences at any given moment. This approach ensures a streamlined user interface that remains uncluttered by presenting information in a manner that aligns with user expectations and workflow requirements.
Rather than overwhelming users with every detail upfront, our focus is on understanding their specific needs and preferences at any given moment. This approach ensures a streamlined user interface that remains uncluttered by presenting information in a manner that aligns with user expectations and workflow requirements.
04
04
Functionality > Aesthetic
Functionality > Aesthetic
Our goal is to deliver valuable data and features to users throughout every step of their journey without overwhelming them. This necessitates a significant simplification of the UI, ensuring that essential information and functionalities are presented in a clear and accessible manner, enhancing the overall user experience.
Our goal is to deliver valuable data and features to users throughout every step of their journey without overwhelming them. This necessitates a significant simplification of the UI, ensuring that essential information and functionalities are presented in a clear and accessible manner, enhancing the overall user experience.
My role as the Junior Designer
My role as the Junior Designer
Before continuing with this presentation, I want to show what my responsibilities in this project were. This is to have full transparency, as I wasn’t part of the wireframing process, or the Information Architecture construction, but I was handed the following tasks.
Before continuing with this presentation, I want to show what my responsibilities in this project were. This is to have full transparency, as I wasn’t part of the wireframing process, or the Information Architecture construction, but I was handed the following tasks.
01
High Fidelity Mockup Creation
High Fidelity Mockup Creation
I was tasked with creating all the high-fidelity mockups for the app, following our decision to adopt Microsoft’s Fluent Design System for the desktop interface and Meta’s FloatGrid Design System for the in-app VR experience. To prepare for this responsibility, I familiarized myself with the distinct components of each system and applied them thoughtfully to the redesigned IA.
02
Researching different data visualization options
Researching different data visualization options
Given the nature of the app, which requires data visualization in various parts of the UI, I was assigned the task of researching and presenting the optimal charting solutions tailored to specific use cases.
03
Presenting and discussing with stakeholders
Presenting and discussing with stakeholders
As part of my training, my team lead entrusted me with organizing and leading meetings with the Product and Development teams. While my project lead was present to provide guidance if needed, I took responsibility for understanding the rationale behind design decisions and meticulously tracking feedback from all teams involved.
04
Creating the documentation for component and screen anatomy for handoff
Creating the documentation for component and screen anatomy for handoff
When preparing for handoff, I was responsible for creating comprehensive documentation detailing the anatomy and behavior of every component used in each screen. This documentation was essential to ensure that the development team could implement the design accurately and effectively. It aimed to provide clear guidance on the specifications and interactions required to maintain fidelity to the intended user experience.
Creating the Mockups
Creating the Mockups
As I mentioned earlier, I was responsible for creating the high-fidelity mockups, which presented a significant challenge due to ongoing iterations driven by new requirements and feedback from various teams. While the project lead iterated on the design based on these inputs, my role was to bring these iterations to life using the appropriate UI components, ensuring that the evolving design reflected the latest specifications and user needs. This dynamic process required flexibility and close collaboration to deliver a polished and functional UI design.
As I mentioned earlier, I was responsible for creating the high-fidelity mockups, which presented a significant challenge due to ongoing iterations driven by new requirements and feedback from various teams. While the project lead iterated on the design based on these inputs, my role was to bring these iterations to life using the appropriate UI components, ensuring that the evolving design reflected the latest specifications and user needs. This dynamic process required flexibility and close collaboration to deliver a polished and functional UI design.
How many data viz options are there!?
How many data viz options are there!?
Exploring various data visualization options for tracking heart rate and comparing progress across different sessions was a key responsibility assigned to me. After evaluating and presenting several alternatives, the product team ultimately chose line charts. This decision created a point of friction as my design lead advocated for grouped bar charts, arguing they might better display comparisons of minimum, maximum, and average heart rates. However, in alignment with the product team's decision, we proceeded with implementing line charts for this functionality.
Exploring various data visualization options for tracking heart rate and comparing progress across different sessions was a key responsibility assigned to me. After evaluating and presenting several alternatives, the product team ultimately chose line charts. This decision created a point of friction as my design lead advocated for grouped bar charts, arguing they might better display comparisons of minimum, maximum, and average heart rates. However, in alignment with the product team's decision, we proceeded with implementing line charts for this functionality.
I now have to present?
I now have to present?
As part of my training my design lead tasked me with presenting the designs, so we rehearsed how to lead a presentation with stakeholders where he help me fix various mistakes like defining an agenda and sticking to it, or creating an actual presentation. This helped me understand the product even more because now I was the one answering questions.
As part of my training my design lead tasked me with presenting the designs, so we rehearsed how to lead a presentation with stakeholders where he help me fix various mistakes like defining an agenda and sticking to it, or creating an actual presentation. This helped me understand the product even more because now I was the one answering questions.
Full on documentation
Full on documentation
One of my final tasks was to create comprehensive documentation aimed at facilitating the front-end development of the app. This documentation primarily focused on detailing the anatomy of each component and specifying their interaction behaviors. It was a significant undertaking due to the diversity of components, each requiring precise documentation of their unique behaviors and layouts.
Through this task, I gained deep expertise in Microsoft’s design language and behaviors, ensuring that the development team could accurately implement the design with fidelity to the established guidelines and user expectations.
One of my final tasks was to create comprehensive documentation aimed at facilitating the front-end development of the app. This documentation primarily focused on detailing the anatomy of each component and specifying their interaction behaviors. It was a significant undertaking due to the diversity of components, each requiring precise documentation of their unique behaviors and layouts.
Through this task, I gained deep expertise in Microsoft’s design language and behaviors, ensuring that the development team could accurately implement the design with fidelity to the established guidelines and user expectations.
My part regarding accessibility
My part regarding accessibility
I took on the critical responsibility of converting the designs into dark mode, which was a crucial aspect of ensuring accessibility. As we based our design on Microsoft’s Fluent Design System, I immersed myself in studying their approach to color usage and the transition from light to dark themes. This involved understanding how Microsoft applies color theory and design principles to create a seamless and visually appealing dark mode experience.
By leveraging this knowledge, I meticulously adapted our design elements to maintain consistency and readability in dark mode, enhancing accessibility for all users. This task required careful consideration of contrast ratios, color saturation, and usability under different lighting conditions to achieve an effective and user-friendly dark mode implementation.
I took on the critical responsibility of converting the designs into dark mode, which was a crucial aspect of ensuring accessibility. As we based our design on Microsoft’s Fluent Design System, I immersed myself in studying their approach to color usage and the transition from light to dark themes. This involved understanding how Microsoft applies color theory and design principles to create a seamless and visually appealing dark mode experience.
By leveraging this knowledge, I meticulously adapted our design elements to maintain consistency and readability in dark mode, enhancing accessibility for all users. This task required careful consideration of contrast ratios, color saturation, and usability under different lighting conditions to achieve an effective and user-friendly dark mode implementation.
What are my takeaways
What are my takeaways
This project was my first experience with such a large-scale endeavor. As a junior designer, I felt a significant sense of responsibility, impact, and visibility throughout. While I didn’t have expertise in every area, I was consistently guided by my lead designer, which enabled me to deliver each task to the best of my ability.
Handling these responsibilities made me fully appreciate the complexities involved in designing a complete application. Although I wasn’t involved in every step of the process, I took ownership of numerous aspects of the project, contributing actively to its success.
This project was my first experience with such a large-scale endeavor. As a junior designer, I felt a significant sense of responsibility, impact, and visibility throughout. While I didn’t have expertise in every area, I was consistently guided by my lead designer, which enabled me to deliver each task to the best of my ability.
Handling these responsibilities made me fully appreciate the complexities involved in designing a complete application. Although I wasn’t involved in every step of the process, I took ownership of numerous aspects of the project, contributing actively to its success.
Realizing my next steps
Realizing my next steps
Looking ahead, my focus will be on monitoring the implementation of the design and addressing QA tickets to ensure the final product closely aligns with the intended design.
Additionally, I've been tasked with studying various books on design and information architecture for my upcoming project. This will be my primary focus moving forward as I prepare to enhance my skills and knowledge in these areas.
Looking ahead, my focus will be on monitoring the implementation of the design and addressing QA tickets to ensure the final product closely aligns with the intended design.
Additionally, I've been tasked with studying various books on design and information architecture for my upcoming project. This will be my primary focus moving forward as I prepare to enhance my skills and knowledge in these areas.