Selina Gerosa

Graphic and Web Designer

home page of the website: minimal header and top navigation bar, large hero image of church, left navigation tab for current events.

The Ramakrishna-Vivekananda Center of New York is a branch of the Ramakrishna Order in India. They have had the same website since the early 90's, and decided it was finally time to give it a complete overhaul. The redesign is coded in pure HTML/CSS/JS and focuses on improving UI/UX and designing a super accessible, completely responsive website.

https://ramakrishna.org

functionality of top navigation drop down on home page functionality of home page what's new tab

Goals

1: Update the aesthetic and brand of the website with an austere and minimalistic attitude, and focus on accessibility.

2: Redesign the navigation hierarchy and systems, making sure they are intuitive and comfortable to use at any screen size.

3: Design responsive and fully scalable layouts, accounting for mobile sizes, as well as large desktop screens that are simple to use and update.

4: Refresh the ecommerce layout with a mobile-friendly focus.

5: Develop metadata and include search engine optimization best practices.

desktop layout of Media page, links to media pages on blue transparent square, on photo of choir event.

The church’s website was originally designed in 1995, and was honestly a beautiful example of early web design (check out the original on the web archive). However, their website needed to be brought into the modern day. I knew I wanted to reflect the church's meditative and reverent attitude, so I took a minimal and clean approach to really highlight their images and teachings.

mobile layout of inner text page
desktop layout of internal text page, Headquarters desktop layout of internal text page, Headquarters, scrolled down
desktop layout of internal text page, Sri Ramakrishna Tributes desktop layout of internal text page, Emblem

I also paid special attention to increasing the website’s accessibility, since it is so important to make sure modern websites are as accessible as possible for a diverse body of users. This means making sure the site is fully responsive, text size is comfortable to read at all scales in a legible typeface, all images have descriptive alt texts, clear link identification, and the navigation is clear, intuitive, and link tab navigable.

mobile layout of teachings navigation page, links to inner pages on blue transparent square, on photo of Swami Yuktatmanda preaching
mobile layout of home page mobile layout of home page, what's new tab open mobile layout of Headquarters page mobile nagvigation drop down open tab

Another aspect of making the site accessible is strengthening and unifying the church’s web presence and adding external tools. This includes adding audio files to SoundCloud, an embedded Google Map to direction pages, and clear links to their social media.

To further improve the site's page rank, I wrote specific and descriptive metadata for every page and secured a number of related urls to alias with the site. Since launching six months ago, the website's traffic has increased 20%!

mobile hamburger menu pop up
image gallery page, slideshow with bottom row mini-gallery navigation image gallery page, pop up carousel bottom row mini-gallery navigation

More Like This

repeating animation of stereo audio bars followed by Jacob Cooper's logo repeating pattern of multicolored sticker design Digital Science's logo on a light green background