Art by: Amanda Albert
The Dura Mater
The Dura Mater is a responsive web app acting as the central hub for all things pathology and the community surrounding the popular Instagram account @Mrs_Angemi. First established in 2019, the site has increased in popularity within the medical community due to an increased censorship ban on social media. By using a subscription-based model, The Dura Mater is able to show all aspects of the “death” industry and continue providing education to medical professionals.
Role
UX/UI Designer
Operations Manager
Tools
• Adobe Xd • FlowMapp
• Balsamiq • Google Survey
Original Design
IHeartAutopsy
2019
When Instagram began implementing stricter censorship, The Dura Mater founder, Nicole, turned to WordPress to continue writing her educational posts. Beginning as IHeartAutopsy.com, Nicole set up a basic blog-style website to transfer her daily medical Instagram posts. At this time, she first established her subscription service, The Gross Room, where users could pay a monthly or yearly fee to access all of her posts.
Eventually, she changed the name of the brand from IHeartAutopsy to The Dura Mater (latin for Tough Mother) as she thought that was more fitting.
Original IHeartAutospy Site
Launch in July 2020
The Gross Room
As the site increased in popularity, the WordPress server could not handle the amount of volume and Nicole sought the help of a formal developer. This developer established an independent server for the site, however, kept the front-end development to WordPress.
This newer version of the site launched in July 2020.
Research + Analysis
Home Page Photo
Family Business
The site was successful in its initial launch but needed more emotional investment mixed with a design background. My mother (aka The Dura Mater founder) approached me to take over the site in 2021. Part of this takeover included redesigning the user flows, conceptualizing cohesive branding, social media marketing, and overall operations management.
Challenges: Being unfamiliar with the site functionality, it took me a few months to fully understand the ins and outs of WordPress, working with a separate server (GoDaddy), and understanding how the developer set up the new site. Typically, I would take a mobile-first approach to designing a responsive web app, however, I mostly worked with the desktop version until I had a more in-depth knowledge of WordPress.
Solutions: My first step to redesigning the site involved a survey with users and a deep dive into customer service emails. From here, I was able to gather new features and better pathways to create in order to improve the user experience.
Updated sitemap - July 2021
User Flows
After getting feedback from current users, I took the existing navigation and reworked it several times to achieve what we currently use on the site.
Challenges: Users requested many features from social media (i.e. liking comments, notifications, favoriting posts, messaging with other users). Since we are working with WordPress Avada theme, MemberPress, etc, it is not always possible to integrate these specific features.
Solutions: After evaluating which plugins the site could handle, we believed the bookmarking feature was the best feature to invest in out of all of the requests.
Branding
Now that we had a new sitemap down and began shifting the site around, a new UI approach was needed to really tie the site together.
Challenges: Working with my client, I wrote a very detailed list of everything she was looking for related to branding. While I can do minor graphic design, what my client desired was above my skills in photoshop.
Solutions: I conducted market research comparing our content and existing imagery to similar companies. After an extensive search, I discovered a graphic designer that met our creative and budgeting goals. I provided the designer, Amanda Albert, with some ideas, and in a few weeks, she provided me with several graphics for the site, font suggestions, and colors that would work well with her images.
Now that we had a design guide for the site and new graphics, I took Amanda’s suggestions and fully implemented this new palette into the redesigned site. During this time, I also took inspiration from the design guide to find a fun Victorian-style font that could work well with the graphics. This font is now used for page titles throughout the site in addition to some marketing materials.
Moving forward, we only refer to this color palette when creating new pages on the site or creating marketing materials for social media.
Iterative Design
Iterative design will be required as the site remains active and The Dura Mater business continues to grow.
Book Page
In Early 2022, Nicole announced her first Book Nicole Angemi's Anatomy Book: A Catalog of Familiar, Rare, and Unusual Pathologies. In several meetings with the publisher, they stressed the importance of a book page on her own site that directed to various pre-order links and general information about the book.
New Mobile Navigation
Most recently, we’ve added new mobile navigation. 92% of The Dura Mater’s users access the site through a mobile device/tablet. If this data maintains or increases, I will continue to add on more mobile-specific features. So far, the addition of these buttons for the main functions of the site have been successful.
Upcoming Features
Currently, we are working on a variety of features including a built-in mailing list and sorting/filtering system for over 1,500 posts. We continue to survey users and sort out the best way to implement their specific needs.
Challenges: Since the site is limited to a WordPress theme, creating wireframe mockups has been a good starting point, although not always successful.
Solutions: I have found it to be most successful to create a test page and practice using Avada builder as I am still learning the limitations within that platform.