🪴 Pranav Mandhare

Search

SearchSearch

StBroseph Website PRD

Feb 15, 2024, 5 min read

Goals

  1. Raise an Issue - Download the App
    1. Report Issues immediately via Whatsapp
    2. Report Issues via App
  2. Get Involved - Contribute to the Cause
    1. Join as a Coordinator
    2. Join as a Volunteer
    3. Donate

Focus

Priority 1: Mobile Web Design (screen resolution as per most devices) Priority 2: Desktop Design

Hamburger Menu (MWEB) & Navbar (Desktop)

Click to view following pages,

  1. Home - User already on this page, highlight current page
  2. About StBroseph - takes user to the About page with following sections
    1. Army Section
    2. Foundation Section
    3. HQ Section
    4. FAQs
  3. Join as a Coordinator - takes user directly to coordinate section within the Get Involved page
  4. Join as a Volunteer - takes user directly to volunteer section within the Get Involved page
  5. Donate - takes user directly to donate section within the Get Involved page
  6. Resources
  7. Contact Us
  8. Primary CTA - Download the App
    • For MWEB, show CTA within hamburger at the end of all the pages.
    • For Desktop, fix the CTA at top right.

Hamburger Menu and Navbar should be fixed at top of the screen in both MWEB and Desktop cases, so these options are always available to the user.

Logo and Language Selector

On Scroll, fixed to top for both MWEB and Desktop designs. Language selector should have all major Indian language translations.

Landing Page

  1. One liner + Pitch
    1. Bigger Font: A single catchy one line to convey what StBroseph does
    2. Smaller Font: Two to Three additional sentences that can play the role of a pitch for users to click on the CTAs
  2. Impact - convey quantitative data
    1. 500+ hrs social work every day
    2. 5000+ volunteers
    3. 300+ coordinators
    4. 3 cities
  3. CTAs that directly relate to the goal
    1. Primary CTA should be allowing user to raise an issue or download the app - allow user to connect on whatsapp for immediate issue or take them to playstore for app download
      • In case app is not launched in playstore, only allow user to connect directly on WA for issues
      • Solid Button
    2. Secondary CTA should be allowing users to get involved - take user to separate get involved page on click
      • Transparent/lighter button with a border
  4. The above 3 points should be within the first section of the MWEB or WEB screen where user can access CTAs without any scroll.
    • On CTA click open an new url and take user to this new url
  5. On Scroll: Fix the Primary CTA on Bottom (bottom because the CTA is more accessible for mobile users - for desktop website it can be at top). ‘Live in Bangalore? Download the App.’
    1. Post scroll the aim of the landing page should be to convert the user to download the app
    2. Convey that the user’s problem are definitely going to be solved — convey this with
  6. Why Reach Out to StBroseph and Testimonials
    • Two three sentences - context about when people reach out to us and how we ensure all queries go unanswered
    • Above followed by anonymised testimonials in quotes type design
    • Featured In: Press Articles with logos and links that open in new tab
  7. Scroll Ends - App Splash: The fixed button opens up into this last section
    1. Explain user Why Download Now? Three points giving the reason.
    2. Allow to connect on whatsapp for immediate issues
    3. Back to Top button
  8. UI Ideas:
    1. Can Freedom Wall images be used across the website or atleast within the Landing page to inspire or subconsciously set a helping tone?
    2. What else can be done to communicate to the user that “your problem will be solved!“?
    3. Colors should be in-line with the logo design, but may be a lighter and mellow shades within the pallet - maybe communicate warmth?
  1. Website Privacy Policy and Copyright
  2. Sitemap — all page links
  3. Socials - IG, Reddit, Twitter, Email

About StBroseph

Goal of this page: Inspire users to Contribute via Volunteering (Primary) or Donations (Secondary)

Following is divided into 4 sections, each section has a CTA. Sections should be small enough for a user to start and end reading through it.

Section 1:

  1. What is our mission?
  2. Why India needs StBroseph?
  3. CTA: Would like to contribute? Get Involved CTA

Section 2:

  1. History: Timeline, with major milestones and publications (this can start with About Dushyant)
  2. About StBroseph Army
  3. CTA: Want to be part of the story? Get Involved CTA

Section 3:

  1. About StBroseph Foundation
  2. NGO Certification
  3. CTA: Contribute via Donations? Scan QR code

Get Involved

Goal of this page: Friction less way to communicate steps to take user from CTA click to Action Completion

The page should be divided into three sections,

Section 1: Join as a Coordinator

  1. What are the tasks of a coordinator?
  2. Skills you can gain by being a coordinator (What’s in it for you)
  3. Steps
  4. Submit Full Name, Contact, and Coordinator Type (dropdown) - we will reach out (email and any other info seems unnecessary - other coordinators can reach out directly or circulate the form on contact)

Section 2: Join as a Volunteer

  1. What are the tasks of a volunteer?
  2. Why be a volunteer, what skills they gain?
  3. Steps
  4. Submit Full Name, Contact, and Volunteer Type (dropdown) - we will reach out

Section 3: Donate

  1. How are the donations utilised? Every 1000 INR donation equates what?
  2. Steps
  3. CTA: QR Code

Section 4: FAQs

  • FAQs related to coordinator, volunteering, and donations. Certificates, NGO status, etc

Resources

Goal of the page: Provide emergency contacts and information. No CTAs.

  1. Emergency Numbers - filter by regions in Bangalore
  2. Basic First Aid - first responders | Nearby coordinators
  3. Kannada Classes

Contact Us

Goal: For enquiries from press, businesses, etc

  1. HQ Address + Map (should this be public?)
  2. Email + WA Contact

V2

Goals are unclear for following items or how they can be used

  1. Separate HQ section
  2. Calendar/Announcements
  3. Activities
  4. Merch
  5. Blog

Graph View

Backlinks