ClarityCheck: A Visual Experience Analysis

A case study using the ReimagineWeb AI tool to conduct a detailed UX and visual analysis of Lankadeapa.lk, identifying key areas for improving user engagement.

Comment

Inspiration

Our inspiration came from the hackathon's challenge to use AI for real-world analysis. We noticed that many prominent local websites in Sri Lanka have great content but could benefit from modern UX improvements. We wanted to see what an AI-powered tool like ReimagineWeb would suggest for a high-traffic site, leading us to select Lankadeepa.lk as our case study subject.

What it does

ClarityCheck is a case study website that presents a detailed visual experience and accessibility analysis of the Lankadeepa.lk news portal. It doesn't just show problems; it presents the raw AI-generated feedback from ReimagineWeb in a clean, structured report. The report highlights key findings on headline effectiveness, call-to-action clarity, and overall design, concluding with actionable recommendations for improvement.

How we built it

We followed a rapid, agile process due to the tight deadline:

  1. Analysis: We used the ReimagineWeb web platform as our primary analysis tool, feeding it the Lankadeepa.lk URL to gather data and insights. We took detailed screenshots of the AI-generated feedback.
  2. Synthesis & Design: We designed a simple, single-page report website to present our findings in a professional and easy-to-understand format.
  3. Development: We built the static report website using fundamental web technologies: HTML5 and CSS3.
  4. Deployment: The final site was pushed to a GitHub repository and deployed globally via Netlify, making it instantly accessible.

Challenges we ran into

Our biggest challenge was a crucial pivot in strategy. Initially, we assumed we had to build a tool that consumed a public API. However, after clarifying with a mentor on Discord, we discovered that no public API was available. With only a few hours remaining, we had to completely change our approach from "building an analyzer" to "presenting an analysis." This required quick thinking and adapting our plan under pressure.

Accomplishments that we're proud of

We are most proud of successfully navigating the strategic pivot and still delivering a complete, polished project on time. Going from the confusion of "there is no API" to a fully designed and deployed case study website in under 3 hours is an accomplishment that demonstrates our agility and commitment.

What we learned

This hackathon was a powerful lesson in the importance of clarifying requirements and adapting quickly. We also gained a deep appreciation for how AI tools like ReimagineWeb can democratize expert-level UX analysis, providing valuable insights that can significantly improve a website's effectiveness.

What's next for ClarityCheck

This single case study could be expanded into a series called "ClarityCheck Sri Lanka," analyzing other major local websites to create a public benchmark for web design standards in the country. The report website itself could also be enhanced with more interactive data visualizations in the future.

Built With

Share this project:

Updates