Moz Analytics would solve for inbound marketing workflows in an all-in-one analytics platform.

Focus 1: Establish a UX framework.

When I joined Moz – then SEOmoz.org – the current product team had already established an initial site map, detailed wireframes, and quite a bit of customer research. I picked up from there, digging into key problems to solve and learning where I could be most effective. The product managers had strong intuitions and product design skills that could be leveraged by establishing a shared UX framework, so I started there. This enabled us work collaboratively towards a cohesive product vision.

I worked closely with Product Managers Miranda Rensch, Sam Brittney, Karen Semyan, Adam Feldstein, and CEO Rand Fishkin throughout the product design process.

Initial UX initiatives:

• Review research and user stories

• Understand the problems to solve

• Revisit initial site map and wireframes

• Establish page type wireframes

• Create an OmniGraffle stencil library

I took a step back on the detailed wireframes and establish high-level page types. This provided a strong product hierarchy to guide navigation and workflow.

There were 3-5 product managers working on different aspects of the product at once. I developed a set of OmniGraffle stencils to keep us moving efficiently within the same interaction patterns. 

We worked quickly without sacrificing opportunities to gather product and usability feedback.

Focus No. 2: Research, research, research.

I squeezed in as many user research rounds as I could within time and resource constraints. I adapted the formal research techniques I developed at EatonGolden (now Crux Collaborative) into scrappy, low-budget feedback loops for an iterative design process.

Jackie Magwire helped out with research in a huge way throughout the design phase.

Research tactics included:

• Interviews, focus groups, surveys

• Usability testing

• Onsite visits and observation

• Competitive benchmarking

We explored product ideas from feature improvements to entirely new problem spaces.

Focus No. 3: Design exploration.

There were many situations to consider from impressing potential investors to exploring unanswered pain points in the market as we worked towards a new product vision. It was an exciting time of ideation and rapid wireframing. 

Though many of these explorations would never launch, the experience helped me to understand how the system may need to expand for future growth. This helped me see the system holistically and had a significant impact on information architecture and design decisions. 

UX and product planning activities included:

• interaction diagrams and user flows

• new feature concepts

• collaborative whiteboard sessions

• rounds and rounds of wireframes

• various prototypes

Content analytics was one of the new product experiences we explored to address the growing need for content marketing tools. It was interesting to look at data sources like search, social, and links metrics from this lens, leading to improvements in other areas of the product.

While this section didn't make it into a v1 product launch, we would revisit these ideas in years to come, and eventually launch a stand-alone product, Moz Content. 

We explored related flows and entire sections for corresponding marketing experiences intended to launch with the new product:

• MozPost wireframes for free education content as part of the content marketing strategy.

• Moz Community wireframes to deepen engagement and retention.

Though many of these ideas didn't launch in full form, the exercise informed content and marketing strategy.

We explored many dashboard views and different opportunities to compare data across marketing channels for reporting, monitoring, and insights.

We obsessed about every UI pattern and interaction detail to ensure the most seamless, intuitive experience we could deliver.

Focus No. 4. Interaction Design & UI Patterns

Each page, global element, and user story had an important product focus and unique set of design challenges. We worked through interaction details, desired functionality and alternate states quickly, looking for patterns and opportunities to steam-line for both easy of use on our customers and simplify technical bloat for our engineering partners.

I typically took the first stab at UI and interaction design details in wireframe-form, like this example of building a search query. We would evaluate these patterns from a product and interaction design perspective, before styling in visual design. 

Common UI patterns were completed in collaboration with the UI engineering team, our UI designer (Ramil), our art director (Derric), and myself. They were typically drafted at the wireframe-level, refined in visual design, and tweaked once again during development. Here's an example of some of these UI components in the high-fidelity stage.

We narrowed focus to critical task-flows. Go time!

Focus No. 5: Prioritization & Production

When it came time to narrow down to an MVP, we focused on primary task flows. Design efforts focused on interface design and messaging details, alternate states, and narrowing scope. We worked with engineering to develop a UI pattern library to improve efficiciency.

Visual design was lead by Ramil Azucena with art direction from Derric Wise. UI details in the wireframes reflect Ramil's design decisions as we worked together on shaping the interface.

UX efforts to achieve a launch state:

• Prioritization based on key task flows

• User assistance messaging

• Feature refinement based on feasibility

• Finalize UI pattern library

• QA, QA, QA

The team was siloed by function, requiring meticulous wireframes and detailed notes. Detailed specs and messaging documents accompanied wireframes.

This experience had a massive impact on how I approach product design and partner with engineering teams.

The Outcome

Sentiment about the design and UX framework was positive, but the product had a slow and fairly buggy rollout. It would take a couple years to stabilize into a reliable product. 

One very positive outcome of this project was greater emphasis on collaboration between silos and acceptance of a more iterative approach. We're proud to share these lessons, like in the UX/Dev Collaboration Talk a few of us gave at a local UX event.

Today, I work to align cross-functional teams around the problems to solve early, and solicit inputs from across the organization long before solutions are set in stone. I keep a big-picture approach, and work with business and technology partners to launch, measure, and iterate on high impact solutions.