[UI/UX] Design and implement static landing website for OWASP VulnerableApp

[preetkaran20]

Summary

Design and implement a static landing website for OWASP VulnerableApp to serve as the primary entry point, routing users to dynamic environments (e.g. app.vulnerableapp.owasp.org).

Objective

• Represent the project clearly as part of the OWASP ecosystem
• Provide navigation from the static site to dynamic/live environments
• Set context for security testing, training, and demos
• Improve usability and credibility of the platform

Suggested Approach (Getting Started)

To keep this maintainable and easy for contributors to pick up:

1. Start with wireframes — rough layout of homepage, nav, and disclaimer placement before writing any code. Doesn't need to be high-fidelity; a simple sketch (Figma, Excalidraw, or even hand-drawn) is enough to align on structure.
2. Build as a simple static bundle — plain HTML/CSS/JS (or a minimal static-site generator) that compiles to a single deployable folder. Avoid frameworks that need a build pipeline unless there's a strong reason — the goal is something anyone can clone and deploy in minutes.
3. Keep navigation flat and obvious — a handful of top-level links (Home, Docs, Labs, About). No nested menus or deep hierarchies; this is a landing page, not a full site.
4. Optimize for low-maintenance — no database, no backend, no build secrets. Future contributors should be able to edit HTML/content directly without needing to learn a new toolchain.

This keeps the barrier to entry low for new contributors and avoids scope creep into a "real" web app.

Please look at other owasp projects and suggest, we are open to everything (All on implementer to think, design and provide)

[preetkaran20]

One important factor out of this is metrics collection like how many visits, referrals, percentages of customers moved from static website to dynamic labs.

It is good to start small and refine slowly.

Cc: @harveenkaur2912

[Suj018300]

Hi @preetkaran20 I'd like to work on this issue.

I have prior internship experience in UI/UX design and I'm comfortable creating wireframes and translating them into clean, responsive landing pages.

If assigned, I'll first share wireframes for feedback before starting the implementation.

[tia-sydorenko]

Hi @preetkaran20 , I'd love to help move this forward — great initiative!
As a first pass I put together two wireframe directions for the landing page — Figma links below.
Learning about the product, it appeared to me that 2 positioning angles would be most beneficial for introducing the product:

Option 1 - wireframe in Figma
"Get running fast" (developer-utility)
Leads with speed and hands-on utility. The hero is essentially the quick-start: what it is, one command to run it, and a link to the docs. Best if the primary goal is getting people to try it with minimal friction. Includes the vulnerability catalog up front and a side-by-side "Docker vs JAR" run section.

Option 2 - wireframe in Figma
"The scanner's proving ground" (benchmark-led & community-built)
Leads with benchmarking. It walks through the problem (few maintained targets exist for testing scanners), the solution, and a clear 3-step "grade your scanner" flow, ending on the community/OWASP angle. Best if the goal is convincing scanner developers why this matters before asking them to run anything.
Feel free to drop comments directly in Figma. These are just starting points — I'm very happy to iterate on your feedback, mix elements between the two, or adjust the tone/positioning.

I also saw your comment above, @Suj018300 — happy to collaborate on this together if you'd be interested!

Also @preetkaran20 , as you mentioned metrics - I'd suggest measuring how the page performs by connecting Hotjar for lightweight behavioural insights (heatmaps + scroll depth to see how far people read, where they click, whether the CTAs land). It's free tier should be more than enough to get meaningful signal for a page like this, and it's a simple script tag — no backend needed, so it doesn't compromise the static/low-maintenance setup

Let me know which direction resonates, and I'll refine from there. 🙌

[preetkaran20]

Hi @preetkaran20 , I'd love to help move this forward — great initiative! As a first pass I put together two wireframe directions for the landing page — Figma links below. Learning about the product, it appeared to me that 2 positioning angles would be most beneficial for introducing the product:

Option 1 - wireframe in Figma "Get running fast" (developer-utility) Leads with speed and hands-on utility. The hero is essentially the quick-start: what it is, one command to run it, and a link to the docs. Best if the primary goal is getting people to try it with minimal friction. Includes the vulnerability catalog up front and a side-by-side "Docker vs JAR" run section.

Option 2 - wireframe in Figma "The scanner's proving ground" (benchmark-led & community-built) Leads with benchmarking. It walks through the problem (few maintained targets exist for testing scanners), the solution, and a clear 3-step "grade your scanner" flow, ending on the community/OWASP angle. Best if the goal is convincing scanner developers why this matters before asking them to run anything. Feel free to drop comments directly in Figma. These are just starting points — I'm very happy to iterate on your feedback, mix elements between the two, or adjust the tone/positioning.

I also saw your comment above, @Suj018300 — happy to collaborate on this together if you'd be interested!

Also @preetkaran20 , as you mentioned metrics - I'd suggest measuring how the page performs by connecting Hotjar for lightweight behavioural insights (heatmaps + scroll depth to see how far people read, where they click, whether the CTAs land). It's free tier should be more than enough to get meaningful signal for a page like this, and it's a simple script tag — no backend needed, so it doesn't compromise the static/low-maintenance setup

Let me know which direction resonates, and I'll refine from there. 🙌

Hi @tia-sydorenko,

First of all, thank you for putting these wireframes together—they're fantastic! I really like both wireframes and appreciate the thought you've put into them. I have a few thoughts that I think would help shape the long-term vision of the landing page.

1. Live Application Navigation – Since the live vulnerableapp ecosystem application is ready to be hosted soon, I'd like the landing page to act as the gateway into the ecosystem. Users should be able to seamlessly navigate to the running applications (for example, /app for VulnerableApp) directly from the landing page. I think this should be one of the primary CTAs so visitors can immediately start exploring the live labs.

2. Metrics – I like the idea of lightweight analytics. I'm happy with anything that's minimal but still provides meaningful insights into how users interact with the page.

3. Ecosystem – One thing I'd like to highlight is that OWASP VulnerableApp is an ecosystem of vulnerable applications. We have VulnerableApp Facade, which acts as the gateway to a distributed collection of vulnerable applications. It routes users to applications such as VulnerableApp, LLMForge, and other tech-stack-specific vulnerable applications while providing a unified experience. I think this ecosystem is one of our strongest differentiators and should be reflected in the landing page. the site should introduce the ecosystem. This also gives us a scalable foundation as we continue adding more vulnerable applications in the future. For more details:
   and https://github.com/SasanLabs/VulnerableApp-facade

4. Growing Platform – One additional thought: the live applications intentionally expose a curated subset of the available vulnerabilities today, and we'll continue expanding them release by release with the help of the community. It might be worth communicating this somewhere on the landing page so users know the platform is actively evolving and that community contributions directly shape its roadmap.

Overall, I really appreciate you driving this forward—I'm looking forward to iterating on it together! 🙌

@Suj018300 Really sorry I was busy and was not able to assign this task to you. please collaborate with @tia-sydorenko on this. it would be really great to get your contributions in this (please review the wireframes provided above by @tia-sydorenko ).

thanks,
Karan

[preetkaran20]

@tia-sydorenko an additional thought just came to my mind, we will be in future show benchmark result of various tools against our vulnerable application so please have that future use case thought too while designing wireframes.

[tia-sydorenko]

Hey, @preetkaran20, thanks for the feedback! I tried to synthesize it into this wireframe here. Feel free to leave any comments or suggestions for improvements

As for the benchmarking section, I think it would be a great addition for a second release. It would require some additional work to collect and organize the information properly, whereas the current content seems sufficient to move forward with the landing page launch.

[preetkaran20]

@tia-sydorenko I have done a review for the dogma and added comments on it. Please have a look.