21 Days Prayer Experience
The Prayer Experience website underwent a complete redesign to enhance user engagement, streamline navigation, and improve multilingual accessibility. This case study highlights key changes made to the website, comparing the “Before” and “After” states while showcasing the impact on the overall user experience.
Task
Resolve poor navigation and content readability by redesigning the interface to provide clearer structure, better wayfinding, and a more immersive reading experience across web and mobile.
Before the redesign, the Prayer Experience website had several usability, navigation, and layout issues that made the experience difficult to follow, especially during a guided prayer flow. The goal was to identify the main friction points and improve the structure, readability, and navigation while keeping the existing Markdown-based content system intact.
Users struggled to locate prayer station instructions because the navigation menu was hidden behind a menu button. Switching between stations required multiple clicks, making the experience slow and less intuitive, especially on desktop.
The content spanned the full width of the screen, creating excessive white space and making long text difficult to read. The lack of a structured content container reduced visual clarity and made the instructions harder to follow, especially on larger screens.
The site rendered content without proper typography styling. Headings, spacing, and lists lacked visual hierarchy, making the pages feel dense and outdated. This reduced readability and made the content harder to engage with.
The site did not include a visible language switcher. Users had to manually modify the URL in the address bar to change between English and Spanish pages. This created confusion and interrupted the guided prayer experience.
After identifying the main usability and layout issues, the website was redesigned to improve navigation, readability, multilingual support, and overall structure while keeping the existing Markdown-based content system.
The updates focused on creating a clearer layout, reducing user effort, and making the experience more immersive across web and mobile.
Markdown content rendered without proper typography styles.
Pages looked text-heavy and lacked hierarchy.
Layout felt outdated and difficult to read.
Content was parsed using gray-matter and markdown-it, but had no design styling.
- Installed the Tailwind CSS Typography plugin.
- Used prose classes to style already-rendered Markdown content.
- Added proper spacing, heading styles, and readable line width.
- Resulted in a clean, modern, minimal content design without changing the content structure.
- Navigation between prayer stations was hidden behind a menu button.
- Users had to open the menu every time to switch stations.
- Content stretched across the full width of the screen, creating poor structure and excess white space.
Introduced a left sidebar navigation visible on desktop for quick access to all prayer stations.
Content is now displayed inside a structured container for better readability.
The menu button remains for mobile, keeping navigation simple on smaller screens.
Added hover and active states to menu items to improve wayfinding and help users track their current station.
No language switcher in the UI.
Users had to manually change the URL to switch between languages.
English and Spanish pages were not fully connected in the navigation flow.
- Implemented Next.js i18n routing for structured multilingual pages.
- Added a visible language switcher available on every page.
- Users can now switch languages instantly without breaking the flow.
