Raul. J
Comm Program
Designing Core Product Features: Navigation, Inbox, and Forms
Project Type
Work Management Software
Role
UX/UI Designer + UX Research
Industry
Enterprise SaaS / Productivity Tools
Introduction
🖥️ The Product
The Comm Program is an internal tool for managers and staff to handle project approvals. One of it’s main features are CSWs and Orders requests made by managers or staff that are related to tasks, roles, promotions, and more. These are the features I focused on redesigning.
👥 The Users
Internal team members, and executives/mangers who need transparency over ongoing initiatives, status updates, and performance indicators.
🏆 Business Goals For Product
Increase productivity by giving managers and staff workers that ability to easily view their CSW’s and submit CSW’s and Order forms. We want to close the feedback loop and improve team outcomes by making sure they see the CSW’s and work on them ASAP.
👨💻 What I Worked On
I focused on redesigning key areas of the Comm Program to help improve usability. My work included:
- Sidebar navigation — creating a clear and intuitive layout for faster access to tools and sections.
- CSWs and Order Inbox view — designing an inbox-style layout with tags and priority indicators to help managers quickly identify urgent items.
- Create & Review Order form — simplifying the form flow to make submitting and reviewing orders more efficient and less error-prone.
- Design System — I helped establish a design system with reusable components, consistent styles, and interaction guidelines to ensure a cohesive and scalable user experience.
Discovery & Research
⁉️ Kickoff Meeting
I met with stakeholders, the product owner, business analyst, lead developer, and other UX/UI designer to get aligned. We reviewed progress, discussed communication and stat-tracking challenges, clarified objectives, and defined success. I left with a clear understanding of the program’s gaps, the team’s support, and documentation for next steps.
Understanding
I began by understanding the problem space through stakeholder meetings, user interviews, and surveys. I created an affinity map to help me see themes and patterns.
In the affinity map, I organized insights by color: red sticky notes for pain points, green for positive feedback, and yellow for suggestions.
Define Problem
🤨 What Is The problem?
After gathering research and analyzing feedback, one issue kept surfacing. User were losing track of CSW forms, the CSW forms are what are used to approve task and other important stuff. This gap wasn’t just an inconvenience, it was a breakdown that directly affected accountability, project progress, and team morale.
Other Learnings
While talking with stakeholders, managers admitted they often didn’t know where to find certain CSW’s, or they felt buried under too much information. Team members, on the other hand, felt like their progress or requests were not being acknowledged, which led to frustration and missed opportunities for improvement.
Exploring Solutions
✍️ Sketching And Wireframing
With the research insights in mind, I began sketching and wireframing ideas to simplify the user experience. Early concepts was an inbox style screen that organized CSWs with clear tags and priority indicators, making urgent items stand out immediately. The intention was to move away from the scattered, reactive communication patterns of the old system and replace them with a tool that felt proactive, structured, and easy to act on.
This is what the first set of lo-fi wireframes looked like.
For the lo-fi wireframes, I focused on adjusting the spacing between tags and information.
This is what the mid-fi wireframe, before usability testing, started looking like.
After several iterations, the mid-fi wireframes for the stats screen began to take shape, showcasing a more polished and user-friendly design with clearly displayed tags and the information users want to see.
Design System & Forms
As part of the redesign, I helped with the first version of the design system that brought consistency and scalability to the Comm Program. The system included typography, color palettes, spacing rules, and reusable components such as buttons, form fields, and navigation elements.
Another major area of focus was the Create & Review Order forms. In the old program, forms were cluttered, difficult to scan, and prone to errors. I applied the new design system to simplify inputs, improve labeling, and introduce clear validation states. The goal was to make completing a form feel effortless while reducing mistakes and back-and-forth corrections.
Key improvements on forms included:
- Breaking complex forms into logical sections for easier completion.
- Using inline feedback and error states to guide users in real time.
- Adding progress indicators to show users how far they were in the process.
- Ensuring accessibility with clear contrast, legible fonts, and keyboard navigation.
While designing the inbox and forms, I was simultaneously developing the first version of the Comm Program’s design system.
Design & Iteration
📃 Hi-Fidelity Designs
The product owners approved the mid-fi wireframes for the inbox and form. Before moving into hi-fi designs I wanted to get some feedback so I can revise the designs if needs, so I conducted some usability testing.
Usability Testing
After the designs were in hi-fidelity ready, we did some usability testing. We asked participants to complete common tasks, such as reviewing a CSW, responding to an alert, or approving an order. We observed where friction occurred.
What worked: Users quickly understood the layout and appreciated the inline validation in the forms.
What didn’t work: The layout could be simplified further, and each CSW could include more context to clearly explain what it’s about.
Iteration
Using these insights, I refined the designs by:
- Simplifying the inbox screen even more.
- Adjusted the card layout for a cleaner, more scannable overview.
- Provide more information on the CSW, without the user having to click anything.
Here are what the final designs look like after applying the feedback from the usability testing and fine tuning the designs from mid-fi to hi-fi wireframes.
The stat screen evolved into a refined and user-centric interface, highlighting an improved search feature.
Once the stats screen was finalized, I began exploring how to incorporate the form and came up with a lightbox solution.”
I designed for all scenarios, including cases like a no-results screen.
The form I designed made it easy to provide the information needed to successfully submit, with elements like fill-in fields, dropdowns, and checkboxes.
Handoff
🤝 It’s Time
After finalizing the design conducting usability testing, I handed off all screens, design system specs, and interaction notes to the developers. I worked closely with them to make sure everything was implemented as intended and stayed on standby for any questions along the way.
A look into the hand-off file.
The hand-off file included components that made it easy for developers to build for all states.
Every major feature and screen included notes explaining its purpose and functionality.
Impact & Learnings
🎇 Impact
The redesign of some of the key Comm Program features improved efficiency and engagement across multiple departments. Managers could quickly scan prioritize urgent CSWs, staff workers felt like they were being seen and heard. Redesigned forms reduced errors and streamlined workflows, saving time for both staff and managers. Establishing a design system ensured consistency across screens and laid the foundation for future scalability.
Learnings
Some stuff that I learned from this project were:
- User-centered research — Understanding real workflows and pain points helped make design decisions.
- Testing — Validating ideas at mid-fi and hi-fi stages prevented costly mistakes later.
- Collaboration — Close work with stakeholders, developers, and other designers ensured alignment and smooth handoff.
- Design systems — Building reusable components early not only improves consistency but also speeds up future updates.
Overall, I learned that thoughtful design paired with clear communication and iteration can transform complex designs into efficient, user-friendly products.
Raul @2025
jraul2723@gmail.com
Navigation
Home + Work
About Me + Contact
Creative Space
Resume
Projects
Comm Program
HMS Software
DHC Website
Rasu AI
90 Day App
Design System
Raul. J
Home + Work
About Me + Contact
Creative Space
Resume
Comm Program
Designing Core Product Features: Navigation, Inbox, and Forms
Project Type
Work Management Software
Role
UX/UI Designer + UX Research
Industry
Enterprise SaaS / Productivity Tools
Introduction
🖥️ The Product
The Comm Program is an internal tool for managers and staff to handle project approvals. One of it’s main features are CSWs and Orders requests made by managers or staff that are related to tasks, roles, promotions, and more. These are the features I focused on redesigning.
👥 The Users
Internal team members, and executives/mangers who need transparency over ongoing initiatives, status updates, and performance indicators.
🏆 Business Goals For Product
Increase productivity by giving managers and staff workers that ability to easily view their CSW’s and submit CSW’s and Order forms. We want to close the feedback loop and improve team outcomes by making sure they see the CSW’s and work on them ASAP.
👨💻 What I Worked On
I focused on redesigning key areas of the Comm Program to help improve usability. My work included:
- Sidebar navigation — creating a clear and intuitive layout for faster access to tools and sections.
- CSWs and Order Inbox view — designing an inbox-style layout with tags and priority indicators to help managers quickly identify urgent items.
- Create & Review Order form — simplifying the form flow to make submitting and reviewing orders more efficient and less error-prone.
- Design System — I helped establish a design system with reusable components, consistent styles, and interaction guidelines to ensure a cohesive and scalable user experience.
Discovery & Research
⁉️ Kickoff Meeting
I met with stakeholders, the product owner, business analyst, lead developer, and other UX/UI designer to get aligned. We reviewed progress, discussed communication and stat-tracking challenges, clarified objectives, and defined success. I left with a clear understanding of the program’s gaps, the team’s support, and documentation for next steps.
Understanding
I began by understanding the problem space through stakeholder meetings, user interviews, and surveys. I created an affinity map to help me see themes and patterns.
In the affinity map, I organized insights by color: red sticky notes for pain points, green for positive feedback, and yellow for suggestions.
Define Problem
🤨 What Is The problem?
After gathering research and analyzing feedback, one issue kept surfacing. User were losing track of CSW forms, the CSW forms are what are used to approve task and other important stuff. This gap wasn’t just an inconvenience, it was a breakdown that directly affected accountability, project progress, and team morale.
Other Learnings
While talking with stakeholders, managers admitted they often didn’t know where to find certain CSW’s, or they felt buried under too much information. Team members, on the other hand, felt like their progress or requests were not being acknowledged, which led to frustration and missed opportunities for improvement.
Exploring Solutions
✍️ Sketching And Wireframing
With the research insights in mind, I began sketching and wireframing ideas to simplify the user experience. Early concepts was an inbox style screen that organized CSWs with clear tags and priority indicators, making urgent items stand out immediately. The intention was to move away from the scattered, reactive communication patterns of the old system and replace them with a tool that felt proactive, structured, and easy to act on.
This is what the first set of lo-fi wireframes looked like.
For the lo-fi wireframes, I focused on adjusting the spacing between tags and information.
This is what the mid-fi wireframe, before usability testing, started looking like.
After several iterations, the mid-fi wireframes for the stats screen began to take shape, showcasing a more polished and user-friendly design with clearly displayed tags and the information users want to see.
Design System & Forms
As part of the redesign, I helped with the first version of the design system that brought consistency and scalability to the Comm Program. The system included typography, color palettes, spacing rules, and reusable components such as buttons, form fields, and navigation elements.
Another major area of focus was the Create & Review Order forms. In the old program, forms were cluttered, difficult to scan, and prone to errors. I applied the new design system to simplify inputs, improve labeling, and introduce clear validation states. The goal was to make completing a form feel effortless while reducing mistakes and back-and-forth corrections.
Key improvements on forms included:
- Breaking complex forms into logical sections for easier completion.
- Using inline feedback and error states to guide users in real time.
- Adding progress indicators to show users how far they were in the process.
- Ensuring accessibility with clear contrast, legible fonts, and keyboard navigation.
While designing the inbox and forms, I was simultaneously developing the first version of the Comm Program’s design system.
Design & Iteration
📃 Hi-Fidelity Designs
The product owners approved the mid-fi wireframes for the inbox and form. Before moving into hi-fi designs I wanted to get some feedback so I can revise the designs if needs, so I conducted some usability testing.
Usability Testing
After the designs were in hi-fidelity ready, we did some usability testing. We asked participants to complete common tasks, such as reviewing a CSW, responding to an alert, or approving an order. We observed where friction occurred.
What worked: Users quickly understood the layout and appreciated the inline validation in the forms.
What didn’t work: The layout could be simplified further, and each CSW could include more context to clearly explain what it’s about.
Iteration
Using these insights, I refined the designs by:
- Simplifying the inbox screen even more.
- Adjusted the card layout for a cleaner, more scannable overview.
- Provide more information on the CSW, without the user having to click anything.
Here are what the final designs look like after applying the feedback from the usability testing and fine tuning the designs from mid-fi to hi-fi wireframes.
The stat screen evolved into a refined and user-centric interface, highlighting an improved search feature.
Once the stats screen was finalized, I began exploring how to incorporate the form and came up with a lightbox solution.”
I designed for all scenarios, including cases like a no-results screen.
The form I designed made it easy to provide the information needed to successfully submit, with elements like fill-in fields, dropdowns, and checkboxes.
Handoff
🤝 It’s Time
After finalizing the design conducting usability testing, I handed off all screens, design system specs, and interaction notes to the developers. I worked closely with them to make sure everything was implemented as intended and stayed on standby for any questions along the way.
A look into the hand-off file.
The hand-off file included components that made it easy for developers to build for all states.
Every major feature and screen included notes explaining its purpose and functionality.
Impact & Learnings
🎇 Impact
The redesign of some of the key Comm Program features improved efficiency and engagement across multiple departments. Managers could quickly scan prioritize urgent CSWs, staff workers felt like they were being seen and heard. Redesigned forms reduced errors and streamlined workflows, saving time for both staff and managers. Establishing a design system ensured consistency across screens and laid the foundation for future scalability.
Learnings
Some stuff that I learned from this project were:
- User-centered research — Understanding real workflows and pain points helped make design decisions.
- Testing — Validating ideas at mid-fi and hi-fi stages prevented costly mistakes later.
- Collaboration — Close work with stakeholders, developers, and other designers ensured alignment and smooth handoff.
- Design systems — Building reusable components early not only improves consistency but also speeds up future updates.
Overall, I learned that thoughtful design paired with clear communication and iteration can transform complex designs into efficient, user-friendly products.
Raul @2025
jraul2723@gmail.com
Navigation
Home + Work
About Me + Contact
Resume
Projects
Comm Program
HMS Software
DHC Website
Rasu AI
90 Day App
Design System
Raul. J
Home + Work
About Me + Contact
Creative Space
Resume
Comm Program
Designing Core Product Features: Navigation, Inbox, and Forms
Project Type
Product Design (Dashboard Feature)
Role
UX/UI Designer + UX Research
Industry
Enterprise SaaS / Productivity Tools
Introduction
🖥️ The Product
The Comm Program is an internal tool for managers and staff to handle project approvals. One of it’s main features are CSWs and Orders requests made by managers or staff that are related to tasks, roles, promotions, and more. These are the features I focused on redesigning.
👥 The Users
Internal team members, and executives/mangers who need transparency over ongoing initiatives, status updates, and performance indicators.
🏆 Business Goals For Product
Increase productivity by giving managers and staff workers that ability to easily view their CSW’s and submit CSW’s and Order forms. We want to close the feedback loop and improve team outcomes by making sure they see the CSW’s and work on them ASAP.
👨💻 What I Worked On
I focused on redesigning key areas of the Comm Program to help improve usability. My work included:
- Sidebar navigation — creating a clear and intuitive layout for faster access to tools and sections.
- Stat screen for CSW’s & Orders — designing an inbox-style layout with tags and priority indicators to help managers quickly identify urgent items.
- Create & Review Order form — simplifying the form flow to make submitting and reviewing orders more efficient and less error-prone.
- Design System — I helped establish a design system with reusable components, consistent styles, and interaction guidelines to ensure a cohesive and scalable user experience.
Discovery & Research
⁉️ Kickoff Meeting
I met with stakeholders, the product owner, business analyst, lead developer, and other UX/UI designer to get aligned. We reviewed progress, discussed communication and stat-tracking challenges, clarified objectives, and defined success. I left with a clear understanding of the program’s gaps, the team’s support, and documentation for next steps.
Understanding
I began by understanding the problem space through stakeholder meetings, user interviews, and surveys. I created an affinity map to help me see themes and patterns.
In the affinity map, I organized insights by color: red sticky notes for pain points, green for positive feedback, and yellow for suggestions.
Defining The Problem
🤨 What Is The problem?
After gathering research and analyzing feedback, one issue kept surfacing. User were losing track of CSW forms, the CSW forms are what are used to approve task and other important stuff. This gap wasn’t just an inconvenience, it was a breakdown that directly affected accountability, project progress, and team morale.
Other Findings
While talking with stakeholders, managers admitted they often didn’t know where to find certain CSW’s, or they felt buried under too much information. Team members, on the other hand, felt like their progress or requests were not being acknowledged, which led to frustration and missed opportunities for improvement.
Exploring Solutions
✍️ Sketching And Wireframing
With the research insights in mind, I began sketching and wireframing ideas to simplify the user experience. Early concepts was an inbox style screen that organized CSWs with clear tags and priority indicators, making urgent items stand out immediately. The intention was to move away from the scattered, reactive communication patterns of the old system and replace them with a tool that felt proactive, structured, and easy to act on.
This is what the first set of lo-fi wireframes looked like.
For the lo-fi wireframes, I focused on adjusting the spacing between tags and information.
This is what the mid-fi wireframe, before usability testing, started looking like.
After several iterations, the mid-fi wireframes for the stats screen began to take shape, showcasing a more polished and user-friendly design with clearly displayed tags and the information users want to see.
Design System & Forms
As part of the redesign, I helped with the first version of the design system that brought consistency and scalability to the Comm Program. The system included typography, color palettes, spacing rules, and reusable components such as buttons, form fields, and navigation elements.
Another major area of focus was the Create & Review Order forms. In the old program, forms were cluttered, difficult to scan, and prone to errors. I applied the new design system to simplify inputs, improve labeling, and introduce clear validation states. The goal was to make completing a form feel effortless while reducing mistakes and back-and-forth corrections.
Key improvements on forms included:
- Breaking complex forms into logical sections for easier completion.
- Using inline feedback and error states to guide users in real time.
- Adding progress indicators to show users how far they were in the process.
- Ensuring accessibility with clear contrast, legible fonts, and keyboard navigation.
While designing the inbox and forms, I was simultaneously developing the first version of the Comm Program’s design system.
Design & Iteration
📃 Hi-Fidelity Designs
The product owners approved the mid-fi wireframes for the inbox and form. Before moving into hi-fi designs I wanted to get some feedback so I can revise the designs if needs, so I conducted some usability testing.
Usability Testing
After the designs were in hi-fidelity ready, we did some usability testing. We asked participants to complete common tasks, such as reviewing a CSW, responding to an alert, or approving an order. We observed where friction occurred.
What worked: Users quickly understood the layout and appreciated the inline validation in the forms.
What didn’t work: The layout could be simplified further, and each CSW could include more context to clearly explain what it’s about.
Iteration
Using these insights, I refined the designs by:
- Simplifying the inbox screen even more.
- Adjusted the card layout for a cleaner, more scannable overview.
- Provide more information on the CSW, without the user having to click anything.
After a few refinement stages, the stat screen started looking more complete.
The stat screen evolved into a refined and user-centric interface, highlighting an improved search feature.
Once the stats screen was finalized, I began exploring how to incorporate the form and came up with a lightbox solution.”
I designed for all scenarios, including cases like a no-results screen.
The form I designed made it easy to provide the information needed to successfully submit, with elements like fill-in fields, dropdowns, and checkboxes.
Handoff
🤝 It’s Time
After finalizing the design conducting usability testing, I handed off all screens, design system specs, and interaction notes to the developers. I worked closely with them to make sure everything was implemented as intended and stayed on standby for any questions along the way.
A look into the hand-off file.
The hand-off file included components that made it easy for developers to build for all states.
Every major feature and screen included notes explaining its purpose and functionality.
Impact & Learnings
🎇 Impact
The redesign of some of the key Comm Program features improved efficiency and engagement across multiple departments. Managers could quickly scan prioritize urgent CSWs, staff workers felt like they were being seen and heard. Redesigned forms reduced errors and streamlined workflows, saving time for both staff and managers. Establishing a design system ensured consistency across screens and laid the foundation for future scalability.
Learnings
Some stuff that I learned from this project were:
- User-centered research — Understanding real workflows and pain points helped make design decisions.
- Testing — Validating ideas at mid-fi and hi-fi stages prevented costly mistakes later.
- Collaboration — Close work with stakeholders, developers, and other designers ensured alignment and smooth handoff.
- Design systems — Building reusable components early not only improves consistency but also speeds up future updates.
Overall, I learned that thoughtful design paired with clear communication and iteration can transform complex designs into efficient, user-friendly products.
Raul @2025
jraul2723@gmail.com
Navigation
Home + Work
About Me + Contact
Resume
Projects
Comm Program
HMS Software
DHC Website
Rasu AI
90 Day App
Design System