OrthoPrax app
At-A-Glance
I am the product designer leading the reconstruction and redesign of the OrthoPrax mobile app for the Orthodox church of America. In the past couple of months I led the negotiation process of setting up the MVP, delivered a complete set of app design, created a design system, light and dark theme, all while having a productive back-and-forth communication and regular status update meetings with both the client and the development team. In the UX validation A/B testing of OrthoPrax app navigation, 80% of respondents in variant group found the new design’s navigation to be clear and understandable, compared to only 10% of satisfaction of respondents in control group with the old design’s navigation.
Timeline
March 2023 - present
Platform
Figma
My role
UX/UI Designer
Collaboration
1 Team of SWEs
Problem
Orthodox church of America has provided its followers with a modern resource—a combination of a Church calendar, a prayer book, and a collection of readings—in the form of a mobile app. After careful consideration, the founders reached out to us In order to help them reorganise the app architecture and make it more approachable to their users, as the previous design prioritised aesthetics over usability and the complex app navigation was giving its users much headache.
Solution
I created the restructure and redesign of a Calendar and Prayer book mobile app called “Orthoprax” where users can easily access the daily readings, daily prayers, as well as find the app settings. Users encountered many problems searching for these options in the previous app design which resulted in a high bounce rate. The app can be downloaded on Google Play & iOS App Store.
Process
App architecture
Typography
Color library
Buttons
Inputs
Design comparisons (Before VS. Now)
The final design solution has used the bottom sheet as the architectural focal point, where the user can find holiday message, fasting information, thought of the day, daily readings, daily prayers and saints of the day. The previous design solution’s bottom sheet contained only saints of the day list, while daily prayers and readings were accessed by clicking the icons in the header.
The bottom sheet in the final design, when expanded, distinctively shows all the app information available in the Orthoprax app.
To access the daily prayers in the previous app, the user needed to click on the header icon to open them, choose the type of daily prayers they want to access (e.g. Morning Prayers), choose its exact group (e.g. Trisagion Prayers) and only then read its content. And if the user wanted to suddenly change the prayer, they would need to go back and select another group.
In the new app the user will only need to click on daily prayers box in the bottom sheet, which will open a new screen with all the prayers collected in one place. Whenever the user opens the following prayer, the previous one would close, in order to avoid the user losing the thread.
Clicking the date in the previous design would open a bottom sheet with a yearly calendar, and only after selecting a specific month, a monthly calendar would pop up in another bottom sheet, where the user could finally select a specific date they are looking for.
In order to avoid so many unnecessary steps, we first excluded the yearly calendar, which was found unnecessary by the app founders. In that way the user would only need to click on the date in the header to open the monthly calendar and switch to another date. In this new calendar view, the user will be able to instantly select today’s date and they will at all times see a calendar legend signalising what type of fasting applies to each date.
To access Settings screen in the previous app, the user first needed to open the calendar and then click its button “Show Options”.
The user of the new app will have the settings button visible at all times on the home screen. If they click it, the Settings screen with more comprehensible differentiation of its multiple options would appear.
New design iterations
The final design’s home screen went through two rounds of iterations as we wanted for the background image to have enough screen space, for the date and time to be present but not attract too much attention, for the calendar (both Julian and Gregorian), search and settings buttons to be unified in some way that is not disturbing the general layout, and for all reading and listening content to be combined and incorporated into the bottom sheet.
Product successes
In the A/B testing conducted, where we were trying to evaluate the navigation functionality of the new Orthoprax design compared to the previous one, new design took a clear win. App founders have also found the new design to be the most convenient; quoting one of them, “The new design achieves exactly what it was asked to achieve: complete restructure which ensures the app navigation runs smoothly, without any unnecessary interruptions. ”
What I learned
Throughout my time working on the Orthoprax app project, I’ve learned the importance regular meetings and great communication with both the client and the development team have when you are in charge of not only the design, but also the project organisation. Respect all the client requirements, but also make them understand the bigger picture and reconsider some decisions when the project success depends on it, has been the greatest challenge of this project.