Web UI/UX Redesign + Improvement
Web UI/UX Redesign + Improvement
2,000 Years of Christian History, at a click.
2,000 Years of Christian History, at a click.
In-A-Nutshell
Magisterium AI provides unprecedented access to the teachings of the Catholic Church. Available 24/7, it supports users in exploring Church doctrine, conducting research, and finding answers quickly. Drawing from over 11,700 Church documents across the Extraordinary and Ordinary Magisterium, Magisterium AI offers an extensive and reliable resource for understanding Catholic teaching.
As someone who uses the platform regularly and as a product designer, I couldn’t help but notice a few areas where the user experience could be improved. I saw opportunities to enhance the site’s design and create a more seamless flow. To explore these ideas further, I decided to redesign the homepage in Figma, testing out some of my concepts to improve usability and visual cohesion.
Magisterium AI provides unprecedented access to the teachings of the Catholic Church. Available 24/7, it supports users in exploring Church doctrine, conducting research, and finding answers quickly. Drawing from over 11,700 Church documents across the Extraordinary and Ordinary Magisterium, Magisterium AI offers an extensive and reliable resource for understanding Catholic teaching.
As someone who uses the platform regularly and as a product designer, I couldn’t help but notice a few areas where the user experience could be improved. I saw opportunities to enhance the site’s design and create a more seamless flow. To explore these ideas further, I decided to redesign the homepage in Figma, testing out some of my concepts to improve usability and visual cohesion.
Homepage Refresh
De-cluttering and reorganizing the
content heirarchy to keep users focused
on what matters most.
Prompt Mode
An enhanced redesign of an existing feature,
refining its integration with the overall
design flow.
Prompt Mode
An enhanced redesign of an existing feature,
refining its integration with the overall
design flow.
Flash Animation
An opening screen animation for the iOS
version of Magisterium AI.
5 Steps, Homepage Refresh
Reducing Clutter & Streamlining the Experience
I noticed the homepage felt crowded with too many widgets, often leading to accidental clicks. To simplify, I limited the initial view to three widgets with a "more..." button and removed widget icons, reducing visual clutter and improving the experience.
Adding a “Surprise Me” Button
To make browsing more engaging, I added a "Surprise Me" button that presents random questions or facts. This adds a fun, interactive element without overcrowding the page.
Enhancing Content Focus
I simplified the main greeting to “How can I help you?” and emphasized it visually to draw immediate attention. This refined hierarchy helps users focus on the main purpose of the site.
Improving Button Interaction
The search button felt too light, so I enhanced it with a solid dark box, giving it more presence and making it easier for users to interact confidently.
Refining the Warning Message
The beta warning was distracting, so I adjusted its placement and size, keeping it informative but unobtrusive to better support user focus on key content.
Reduce Clutter
Interactive, simple
Optimizing Space
Improve Button
Refine Details
Prompt and Advanced Prompt Mode Redesign
After completing the homepage redesign, I turned my attention to the "Prompt" and "Advanced Prompt" features in the search bar. While I really appreciated how these tools filtered the process of accessing specific documents, I felt the interface didn’t align well with the rest of the website’s design and could use a more polished, premium feel.
Expanding the Filter Interface
I started by widening the prompt input area to allow the content to breathe, making it easier to read and interact with. Then, I brought in design elements from the homepage—like outlined buttons—to create a more consistent experience across the site.
Improving Visual Hierarchy & Accessibility
I adjusted the font weight of the text beneath the “Advanced Prompt” section to make the content hierarchy clearer and less visually overwhelming. This makes it easier for users to scan and focus on the most important information.
Making Filters More Intuitive
Next, I reworked the filter section to make it more user-friendly. I added interactive bubbles for each filter, so users can clearly see which ones are active. They also have the option to remove individual filters or clear all at once. This small but important change enhances the overall usability and gives the interface a more polished, premium feel.
After completing the homepage redesign, I turned my attention to the "Prompt" and "Advanced Prompt" features in the search bar. While I really appreciated how these tools filtered the process of accessing specific documents, I felt the interface didn’t align well with the rest of the website’s design and could use a more polished, premium feel.
Expanding the Filter Interface
I started by widening the prompt input area to allow the content to breathe, making it easier to read and interact with. Then, I brought in design elements from the homepage—like outlined buttons—to create a more consistent experience across the site.
Improving Visual Hierarchy & Accessibility
I adjusted the font weight of the text beneath the “Advanced Prompt” section to make the content hierarchy clearer and less visually overwhelming. This makes it easier for users to scan and focus on the most important information.
Making Filters More Intuitive
Next, I reworked the filter section to make it more user-friendly. I added interactive bubbles for each filter, so users can clearly see which ones are active. They also have the option to remove individual filters or clear all at once. This small but important change enhances the overall usability and gives the interface a more polished, premium feel.
Intuitive Design
User Friendly
Before
After
Advanced Prompt Mode Redesign
Before
Before
After
Opening Flash Animation for iOS
Opening Flash Animation for iOS