|
| 1 | +# Website UX/UI Review |
| 2 | + |
| 3 | +**Review date:** 2026-10-21 |
| 4 | +**Scope:** Root static website (`index.html`, `styles.css`, and `script.js`) |
| 5 | +**Review type:** Senior UX/UI and accessibility review |
| 6 | + |
| 7 | +## Method |
| 8 | + |
| 9 | +The review examined the page structure, content hierarchy, interaction behavior, responsive CSS, accessibility attributes, and primary user journeys. This was a code and content review; browser-based visual QA at multiple viewport sizes remains to be completed. |
| 10 | + |
| 11 | +## Findings |
| 12 | + |
| 13 | +### High Priority |
| 14 | + |
| 15 | +1. **The primary event directory requires JavaScript** |
| 16 | + - References: `index.html:114`, `script.js:21-39` |
| 17 | + - The event list starts empty and disappears if JavaScript fails or is disabled. |
| 18 | + - Render event cards in HTML first, then enhance them with search and filters. |
| 19 | + |
| 20 | +2. **The event count is incorrect before JavaScript runs** |
| 21 | + - Reference: `index.html:51` |
| 22 | + - The page says `12 events listed`, while `script.js` contains 13 events. |
| 23 | + - Keep the static content accurate or generate the count from a shared source. |
| 24 | + |
| 25 | +3. **Event status and chronology are unclear** |
| 26 | + - References: `index.html:100-115`, `script.js:1-14` |
| 27 | + - Current and future events are presented together without clear upcoming, past, or tentative grouping. |
| 28 | + - Default to upcoming events and clearly label past and tentative entries. |
| 29 | + |
| 30 | +4. **Community cards promise action but provide none** |
| 31 | + - Reference: `index.html:165-168` |
| 32 | + - “Workshops,” “Local events,” and “Get involved” are non-clickable cards. |
| 33 | + - Convert them into actions such as finding local groups, submitting an event, volunteering, or contributing on GitHub. |
| 34 | + |
| 35 | +### Medium Priority |
| 36 | + |
| 37 | +5. **Filtering is too limited for a regional directory** |
| 38 | + - Reference: `index.html:100-115` |
| 39 | + - Filters only support year and free-text search. |
| 40 | + - Add country, event type, and upcoming/past filters, along with a visible result count. |
| 41 | + |
| 42 | +6. **The PyCon APAC to PythonAsia transition requires repeated interpretation** |
| 43 | + - References: `index.html:68-72`, `index.html:119-126`, `README.md:5-10` |
| 44 | + - The explanation is useful, but the relationship is distributed across several sections. |
| 45 | + - Add a concise positioning statement near the hero: “PyCon.asia is the directory. PythonAsia is the regional conference. National and local PyCons remain community events.” |
| 46 | + |
| 47 | +7. **Mobile navigation needs stronger keyboard behavior** |
| 48 | + - Reference: `script.js:51-60` |
| 49 | + - The menu updates `aria-expanded`, but does not handle Escape, focus placement, focus return, or outside clicks. |
| 50 | + - Add those behaviors for a complete mobile navigation experience. |
| 51 | + |
| 52 | +8. **The directory appears after substantial promotional content** |
| 53 | + - References: `index.html:40-117` |
| 54 | + - The hero, transition banner, and featured event create a long path for users who only want to find an event. |
| 55 | + - Keep the storytelling, but strengthen the early “Explore events” shortcut and consider shortening the featured section on mobile. |
| 56 | + |
| 57 | +9. **External event links should communicate their destination** |
| 58 | + - Reference: `script.js:30-35` |
| 59 | + - Event links open new tabs without telling users they are leaving the directory. |
| 60 | + - Add accessible context such as “opens external event website.” |
| 61 | + |
| 62 | +10. **Responsive behavior needs intermediate-width testing** |
| 63 | + - References: `styles.css:148-150` |
| 64 | + - The main breakpoints are `800px` and `480px`. |
| 65 | + - Test at 320px, 375px, 480px, 768px, 820px, and 1024px, especially the event toolbar, navigation, featured event, and event card wrapping. |
| 66 | + |
| 67 | +## Strengths |
| 68 | + |
| 69 | +- Strong visual identity and consistent typography. |
| 70 | +- Clear hero message and prominent event CTA. |
| 71 | +- Good use of semantic headings, skip navigation, reduced-motion support, and button states. |
| 72 | +- The transition banner helps explain the PyCon APAC rename. |
| 73 | +- Event cards are visually scannable and link directly to official sites. |
| 74 | +- The Code of Conduct is easy to find. |
| 75 | + |
| 76 | +## Recommended Order |
| 77 | + |
| 78 | +1. Make event content available without JavaScript and correct the static count. |
| 79 | +2. Add upcoming, past, and tentative event status. |
| 80 | +3. Make community cards actionable. |
| 81 | +4. Improve mobile navigation accessibility. |
| 82 | +5. Add richer event filtering and result feedback. |
| 83 | +6. Validate the visual layout at intermediate viewport widths. |
0 commit comments