🐛 Jean's feedback

[PothieuG]

Requested by: @gilles via Comprehensive UI Review 🔍
cc: @Marxoz @SSWRules

Hi Team!

Pain

A comprehensive UI/UX review has revealed multiple critical issues affecting user experience across desktop and mobile platforms. Issues range from broken functionality to poor visual feedback and inconsistent styling.

Numbers are related to images in comment section bellow.

Acceptance Criteria

⚡ Core Functionality:

1. "Create an SSW Rule" function works correctly
2. Search result filtering/sorting performs optimally with visual loading indicators
3. "See more" functionality loads quickly with proper loading feedback
4. Bookmarking provides immediate visual feedback during processing
5. Profile visiting shows loading spinner before bookmark status updates
6. All footer links function correctly
7. Left navigation links work without 404 errors

🎨 Visual Design & Layout:
8. Rule numbers (#1, #2, etc.) match title size and are vertically aligned
9. Timestamps ("5 hours ago") use smaller/lighter font and proper alignment
10. Author names use consistent gray styling and sizing
11. "Latest Rules" section has clean, aligned bullet points or removes them entirely
12. Contact form Z-index issue resolved (no overlap with "Last Updated")
13. Buttons use consistent styling and proper alignment
14. Image borders added to distinguish white backgrounds from content
15. Icons properly positioned and aligned

📱 Mobile Experience:
16. Mobile search functionality works correctly
17. Button order follows logical pattern on mobile
18. Edit/GitHub action placement is intuitive and properly positioned
19. Actions on mobile are properly aligned (not centered inappropriately)
20. Mid-size resolutions maintain left-column visibility
21. All images display correctly without breaking
22. 50% zoom maintains proper rule formatting

🔧 Performance & Feedback:
23. All loading states show appropriate spinners/visual indicators
24. User interactions provide immediate feedback
25. Page transitions are smooth and responsive
26. Tooltips added to all action buttons
27. Empty states handled gracefully (no empty blurbs)

📋 Content & Navigation:
28. User profiles are clickable and functional
29. Categories maintain consistent ordering
30. Archived rules section restored where missing
31. Padding optimized (reduce top, increase bottom as specified)

Critical Issues by Priority

🚨 High Priority (Broken Functionality):

• Create rule function non-functional
• Mobile search completely broken
• Footer links returning errors
• Left navigation 404 errors

⚠️ Medium Priority (Poor UX):

• Slow search with no loading indicators
• Confusing timestamp and bullet alignment
• Missing visual feedback on actions
• Z-index layering problems

🎯 Low Priority (Polish & Consistency):

• Button styling inconsistencies
• Icon positioning
• Padding adjustments
• Visual hierarchy improvements

Test Scenarios

Desktop Testing:

1. Create new rule workflow
2. Search and filter operations
3. Bookmark multiple rules
4. Navigate between sections
5. Test at 50%, 75%, 100% zoom levels

Mobile Testing:

1. Search functionality across devices
2. Rule editing interface
3. Navigation and button interactions
4. Image display and zoom behavior
5. Form interactions

Cross-Browser Testing:

1. Chrome, Firefox, Safari, Edge
2. Various screen resolutions
3. Different connection speeds

Reference Materials

• Current production site design patterns
• Mobile-first design principles
• SSW brand guidelines for colors and typography
• Accessibility standards for interactive elements

Definition of Done

• All broken functionality restored
• Visual loading indicators implemented
• Mobile experience fully functional
• Consistent styling applied across platform
• Performance optimizations completed
• Cross-browser compatibility verified
• Accessibility requirements met
• User testing completed on key workflows

[PothieuG]

1. “Create an SSW Rule” doesn’t work

2. Search result filter/sort works but is quite slow, and so feels like it’s not working – consider a visual clue something’s spinning

3. Confusing UI… I don’t know, the bullet point + “5 hours ago” misaligned with “Latest Rules” is confusing.
   I find this box hard to read.
   Maybe:

• Lose the bullet point or align them with the “Latest Rules”
• Add the “modified X hours ago” smaller/lighter font (so it’s less visible)
• Perhaps just show the Clock and make the “XXX hours ago” a tooltip ?

4. Init Layout of SSW.Rules #1… before the Title should be same size at the title + vertically aligned
   If you want it to stand out, use a different colour
5. Same as Use of template for pipeline #3 for “XXX ago” on the actual rules (search results)
6. I also feel the “Charles Vionnet” should be the same gray as the “XXX ago” (and probably same size)
7. Users should probably be clickable too ?

8. 🔥 Button order is incorrect (illogical)

9. Actions missing tooltips

10. Consider adding borders to Images (because white background blends in and is slightly confusing as of where’s the image and where’s the actual Rule content

11. Left nav gives not working (404)

12. “See more” very slow + no visual feedback it’s loading = I thought it was KO

13. Why is Chloe and Gilles different from “Brady Stroud [SSW]” ?
    I think we want fullnames + tag whenever possible (might be a setting at the user-level on Rules.com)

14. Broken Z-index on “Last Updated” causes it to appear above the Contact Form

15. Button doesn’t do anything + is inconsistently styled + misaligned

16. Broken Footer links

17. Bookmarking takes a few seconds but missing visual feedback

18. Same thing when visiting profile; the red icon should be a spinner before it’s red (because it was black/empty for a couple seconds on my end before jumping to filled)
    And the below “Loading your bookmarks” needs a spinner

19. Reduce padding-top, increase padding-bottom

20. Mobile search seems busted

21. Busted image

22. Buttons order is wrong
23. Edit/Gtithub action placement is incorrect (I have no idea what I’m editing here)

24. Same here, the actions should not be centered. In fact there’s an argument to not show them at all on mobile if you’re on “Show Blurb” but that’s a designer + PO question.

25. Empty blurb?

26. Mid-size resolution should still show left-column (important numbers + latest rules)

27. Categories order is different – any reason ?

28. Side-by-side: missing Archived rules

29. Move icons up

30. 50% zoom broke this rule

[PothieuG]

1. “Create an SSW Rule” doesn’t work

✅ Done - it has been fixed

[PothieuG]

2. Search result filter/sort works but is quite slow, and so feels like it’s not working – consider a visual clue something’s spinning

✅ Done

[PothieuG]

3. Confusing UI… I don’t know, the bullet point + “5 hours ago” misaligned with “Latest Rules” is confusing.
   I find this box hard to read.
   Maybe:

• Lose the bullet point or align them with the “Latest Rules”
• Add the “modified X hours ago” smaller/lighter font (so it’s less visible)
• Perhaps just show the Clock and make the “XXX hours ago” a tooltip ?

✅ Done – I’ve aligned the bullet points. It was not that great without them.

[PothieuG]

4. Init Layout of SSW.Rules #1… before the Title should be same size at the title + vertically aligned
   If you want it to stand out, use a different colour
5. Same as Use of template for pipeline #3 for “XXX ago” on the actual rules (search results)
6. I also feel the “Charles Vionnet” should be the same gray as the “XXX ago” (and probably same size)

✅ Done

[PothieuG]

7. Users should probably be clickable too ?

✅ Done – Now it redirects to the SSW Profile page.
❗ But after investigation, it should lead to the “user page” where we have the list of updated and created rules by user.
This page build using GitHub Api, and I add some trouble to link data from Tina and GitHub to actually build this page as expected.
I've created a PBI to investigate that issue: #1943

[PothieuG]

8. 🔥 Button order is incorrect (illogical)

✅ Fixed

[PothieuG]

9. Actions missing tooltips

✅ Done

[PothieuG]

10. Consider adding borders to Images (because white background blends in and is slightly confusing as of where’s the image and where’s the actual Rule content

✅ Done

[PothieuG]

11. Left nav gives not working (404)

🤷‍♂️ Couldn’t reproduce de bug.

[PothieuG]

12. “See more” very slow + no visual feedback it’s loading = I thought it was KO

✅ done