WP Engine: Notification Center

Tools used: Figma, Miro, Dovetail, Pendo

I was the lead designer on our platform's first-ever in-app communication hub. Previously, our methods of communicating with customers included a convoluted system of emails, SMS alerts, and pesky in-app notifications like banners, toasts and modals. The new "Notification Center" would be a streamlined way to communicate with customers and a central location for customers set and manage their notification preferences. Finally, having an in-app Notification Center would allow us to track customer behavior and allow for a more personalized, data-driven product experience.

View Extended Case Study ↗

My Role

Because this was a new feature, and one that would impact not only our external customers, but our internal customers as well, this project required buy-in and involvement from multiple stakeholders. I was able to achieve this by partnering with research and organizing a design workshop at the beginning of this project. I was able to collaborate with the lead PM and engineers working on this project and involve various teams both in and outside of our product department throughout the design process.

My Process

(Click to enlarge)Prior to this work, customers received messaging through multiple different channels and had little control over notification settings and preferences.

Research, Discover & Define

Prior to this work, customers received messaging through multiple different channels and had no way of customizing the types of messages they received. Additionally, there was no central method or process for sending comms to WP Engine customers. I started this project with a kickoff call with the PM and engineers and a representative of our UX research team to better determine the goals and timeline for this project.

I requested an audit of all existing types and channels of messages being sent to customers including things like modals, banners, toasts, etc. all the way to e-mails and SMS messages. In order to gain customer empathy, it was important to understand all of the ways we were currently communicating with customers. My research partner and I then gathered customer feedback from existing customer interviews relating to communication from WP Engine.

Finally, I recognized that this project would impact multiple teams, so my next step was to establish key stakeholders and conduct a design-thinking workshop .

(Click to enlarge)I gathered research from existing customer interviews and internal team members before conducting a design thinking workshop and then gathering inspiration from competitors.

Ideation & Design

After gathering research from customer interviews and the audit, I created a Miro board which I shared with stakeholders from multiple departments including our Customer Support, Marketing, and Customer Success teams. I then invited these stakeholders to participate in a design-thinking workshop. Participants were tasked with helping us pinpoint the key problems to be solved with communicating to our customers and then ideate on "how might we?" create a better experience.

Following the workshop, I then read up on UX best practices for in-product and external customer communication. I read several case studies from similar products and features and was able to gather inspiration from competitors. I also used our sister-product, Flywheel's in-app communication center for inspiration, and was able to take customer feedback from this experience and apply it to my designs.

Our timeline for this project was relatively condensed so I started with mid-fi designs and rough prototypes which were tested with internal team members. After gathering feedback from design crit and getting sign-off from the PM and engineers, we then decided to move onto hi-fi designs which would be released in a Beta-version of the Notification Center.

(Click to enlarge)Our Beta release included messaging and a walkthrough introducing customers this new feature, which we used to track engagement and gather feedback.

Test, Iterate, Improve

Shortly after we released the Beta version of this Notification Center, I had to shift attention to other projects and hand off my designs to a junior designer. However, our Beta release included messaging and a walkthrough introducing customers this new feature. We were able to track user engagement in this way. I also included a link in the design for customers to easily provide feedback on the new feature.

Given more time, I would have loved to observe how customers were engaging with the Notifications and Notification Settings. There were quite a few questions I still had when we released the Beta version, specifically around how users felt about dismissing, archiving and deleting messages.

 However, our Beta release included the Pendo onboarding walkthrough and user feedback link, we were able to track user engagement and gather feedack for future design work. I felt confident handing this off knowing the next designer would be able to use this data to make more informed design decisions.

(Click to enlarge)Our timeline for this project was relatively condensed and we had limited Researchers available, but I was able to use secondary research and test prototypes with internal team members.

Conclusion & Key Takeaways

The work I did on WP Engine's Notification Center was the first step to creating a more streamlined, intellegent way of communicating with our customers. Ideally, I would have liked to have spent longer on this project and been able to apply some of the data we collected with our Beta release. I also would have liked to explore the mobile experience for this feature, but because our app was not fully responsive at this time, this was not a priority. All in all, the work I did on the Notification Center was a lesson in partnering with multiple stakeholders, conducting my own research and collaborating with engineers to get the best possible MVP in a short time period.

Contact

Holler At Me

Follow Me