MOZ Pro Web App

The new MOZ brand was just created and it was now time to apply the new branding to the MOZ Pro application.

THE PROJECT

The new MOZ brand was just created and we were now in the process of taking the PRO web application from Beta into V1. Now that we had a new set of brand standards completed we were able to start thinking about how that would affect the next version of the app. I was also working on building the pattern library that would support the V1 release of PRO. We worked on refactoring the design to support the customer usage we observed in the beta release.

MY ROLE

My role in the project was to work with the product team on updating the beta release to bring it to V1. The update included implementation of the new brand into the design, creation of a new pattern library, and iteration of the beta features based off of customer feedback. I worked on the primary user scenarios of the application to help guide the creation of the secondary and tertiary scenarios that other designers would be working on. I worked with another UX Design who then took the pattern library I had created along with the main path designs started building the other parts of the application.

THE CHALLENGE

We had the unique challenge of taking a freshly created brand and integrating it into a V1 of the MOZ web application. We needed to weigh feedback from internal stakeholders and customers to release a product the met the expectations of both. We had also undertaken the creation of a pattern library at the same time which was a challenge in of itself. Pattern libraries were new concepts at the time and I had the unique challenge of convincing leadership that this was a good use of our design resources. We were also updating the marketing site at the same time, so we needed to be mindful of how the web app design would function alongside it.

THE INITIAL LEG WORK

We did a lot of initial sketches with the team to determine what the evolution of the product would look like when we brought it out of beta. We were able to talk with customers and get feedback on the sketches and wireframes which helped inform our designs. The foundation of the new MOZ brand had been established and it helped us to start thinking about the new look and feel of the MOZ app.

WHAT WAS LEARNED

We were able to get user feedback on features that helped us fine tune experience patterns in the design. The feedback helped us more finely tune our data visualizations and tables with large data sets among other things. We had a fair amount of redundancy in the CSS of the application and we built the pattern library to help cut down on that as well. The pattern library helped us quickly implement the new look and feel of the MOZ brand into the design of the application. This was my first pattern library and I learned how it could help a team of multiple designers build features quickly without creating redundant experiences.

This project was one part of the bigger project of moving SEOmoz to the new MOZ brand. We also updated the marketing site at the same time as the PRO application. We needed to be mindful of how the app design worked with the marketing site design since we were building both in tandem.