DYNOMAPPER

Overview

This is the home page of DYNOmapper

DYNOmapper is a powerful SaaS platform used for visual site mapping, SEO, and data analytics. The software is currently being used by Adobe, Razorfish, and Atlantic Airways.

Our team applied ethnographic methods, conducted rigorous domain research, competitive analysis, and usability testing to design a dashboard for DYNOmapper's user interface.

Our goal was to delicately balance usability with the power of DYNOmapper's robust features. After synthesizing our research based on Indi Young's Mental Models, we restructured the navigation and reorganized the software's tools and features. The results of our research produced an information dense yet easily navigable dashboard. Click here to see the final prototype.


Research

 

Competitive analysis: a graph mapping out DYNOmapper's competitors based on design and feature capabilities

To kick off our research, we began exploring content strategy, site crawling, site mapping, and SEO. Because of the specificity of the domain, getting a perspective on the competitive landscape was key in moving forward with the research. Our client worked in content strategy and web management for over 10 years and found that site crawling software on the market was lacking the ability to manage massive amounts of data, and he created DYNOmapper to fill in the gaps on the market. 

Unlike other site crawling software services, DYNOmapper’s capabilities outweighed the competition in terms of its power and robust features. For example, where other site crawling softwares max out at 5,000 pages, DYNOmapper is able to crawl a site with over 50,000 pages. Further, we found that competitors couldn’t handle a large database of users. 

After domain research, competitive analysis, and a heuristic evaluation of the current software, we developed a research plan detailing our assumptions, research goals, and methods, and target users. Our key assumptions included:

We chose to investigate our client’s business needs, in addition to the usability issues, because we understood DYNOmapper could dramatically increase revenue with a handful strategic of UX changes.

One of the most interesting aspects of this project was conducting ethnographic interviews. Because the domain was so specific, it was challenging to find target users, and we had to leverage our network  to find experts in the field. By identifying a target audience, we saw an opportunity to differentiate the design against DYNOmapper’s competitors. 

We narrowed down our target audience to content strategists, UX designers, and web managers. We asked them about their normal work flow to understand common frustrations and understand the context in which they used DYNOmapper. We started with broad questions and gradually become more granular. Doing this allowed us to gather a holistic perspective on the behaviors and mental spaces of our users and it  assisted us in prioritizing usability issues. We pulled the following key takeaways from our interviews:

The interviews provided a wealth of data for us to synthesize and define. We eventually transcribed the interviews and combed through them using the mental model. This will be elaborated on further in the next section.


Define

To move forward with data analysis, we cracked open Indi Young’s Mental Models. Mental modeling is a design strategy that investigates the mental spaces of users to understand their patterns and behaviors. We believed mental modeling was applicable to synthesizing our data because it represents the goal of the user in the context of their domain (Young; 12.122). We knew that thoroughly understanding the mental spaces of our users would establish the foundation of our design.

“Let the tasks find their own patterns, rather than try and force them into a pre-existing set of groups that you have in mind." - Indi Young

First we thoroughly combed through the interviews pulling out data based on task. Then we mapped the tasks into groups and mental spaces. Task groups are divided into 5 sections:

  • Task: any action to accomplish a goal
  • Third party task: an action that someone else accomplishes
  • Implied task: an ambiguous action
  • Philosophy: the why behind an action
  • Feeling: the way someone feels about a particular topic

The idea highlighted by Young was, rather than forcing tasks into predetermined categories, let the tasks organizes themselves into clusters of relative data. By doing this, the data highlighted common pain points and feature gaps in a highly structured layout. 

Here we mapped out tasks to form the mental spaces of users

Pain points included:

  • Disorganization of pertinent features such as inventory of links
  • Redundancies of inventory information
  • When working in teams, users can’t see when other users edited information such as auditing inventory and commenting on sitemaps
  • Lack of clarity of information in the auditing feature
  • Lacking the ability to export specific information - for example key words , headers, and labels were non exportable
  • Lack of the ability to filter certain information
  Taking a break from mental modeling for a photoshoot

Taking a break from mental modeling for a photoshoot

The visual formatting of the mental model included task groups which were represented in towers, and mental spaces represented as a series of task groups. Below the mental spaces are boxes representing features within the software.

The mental modeling process allowed us to identify broad behaviors and frustrations relating to the user’s understanding of DYNOmapper. Furthermore, it allowed us to validate our assumptions and highlight usability issues. 

 
 
 

Following the mental model, we developed a journey map out of the data gathered from the ethnographic interviews. We pulled data points from the mental model to portray a journey where the user maps and redesigns a client website. We did this to underline the way in which a user engages with the software and to highlight features gaps, pain points, and opportunities. 

After we meticulously synthesized the data into a visual format, we developed a problem statement and a set of design principles based on the research.  We emphasized the idea that scale matters in the digital world. Makers and managers dealing with massive projects deserve a product that can balance complexity with accessibility in dealing with unique challenges of scale. We followed this with principles that guided our design and reflected our user's goals:

Accommodating: an accommodating approach guides managers/makers through the complex process of building great digital products

Adaptive: site mapping can by used by a variety of different roles, and we must adapt our approach to each as far as appropriate

Precise: precise details are required for outstanding executions of complex digital products

Crafting the problem statement and design principles allowed us to define priorities and align the scope of our project. This included:

Dashboard: provide an information dense snapshot to keep professionals up to pace

Inventory: reconfigure the inventory page preserving the original intention while giving the feature new life

Teams Tab: we integrated all stakeholder related functions including user permissions, comments, and recent activity in one tab titled "team"

Analytics: provide detailed analytics information without irrelevant masses of data to hamper your workflow

We presented our research and visual deliverables to our client after the research sprint. This was challenging because we had to explain the variety of issues highlighted within the software. Critical conversations are difficult, but because we had compelling research to back up our ideas, it was much easier to persuade the client to buy in on the design process.


Ideate

How did we restructure the architecture of DYNOmapper into a dashboard that incorporates all of it’s features while emphasizing usability? 

  My first sketch of DYNOmapper retraced in pen for visibility

My first sketch of DYNOmapper retraced in pen for visibility

Users wanted an information dense snap shot of inventory and analytics and emphasized the importance of the inventory section. Users needed immediate access to information that would warrant a notification such as broken links and errors. Furthermore, users emphasized the problem of not being able to see where others previously edited information. My idea was to create an activity feed that listed the actions of users working on a project. Further, users pointed out the usefulness glancing at site analytics, and at the bottom of the dashboard, I created a space for analytics information. 

To allow users access to the many features within DYNOmapper, I decided to go with tabs in the top navigation. The user can easily toggle back and forth between their dashboard, site map, keywords, audit, and accessibility pages. 

Prototype 1: focused on a full-page snapshot of inventory and analytics information with a tabular navigation

Prototype 2: focused on allowing users to understand the status of any given site quickly within large stacks of information

I took ownership of the first prototype shown below.

 

For concept testing, we listed out a series of questions addressing user needs in order of highest priority:

  • Can people find the appropriate functionality and relevant information, at the right time?
  • Can this dashboard handle issues of scale, such as finding the correct site out of many dozens?
  • Does the software allow interactions within large teams and isunobtrusive for people working in small teams?

Again we reached out to the community of content strategists, web managers and UX designers to validate our concepts as useful and viable. The following is a list of feedback we received during concept testing.

The user feedback gave us a solid foundation to converge prototypes. Our goal in converging was to maintain an understandable information architecture and simultaneously consolidate a dense set of key features. To do this we:

  • Assimilated differing versions of our primary and side navigations to create an experience where the user can seamlessly toggle and filter through important categories of information
  • Provided an information rich snapshot of site inventory and analytics, allowing the user access to pertinent information in a glanceable manner
  • Created a team tab in the tabular navigation to accommodate users working in large teams while remaining unobtrusive to users only working in teams of one. We integrated all 3rd-party stakeholder related functions, including user permissions, comments, and recent activity, into this one separate tab

We decided to create the final prototype in Axure because we wanted to gain a deeper understanding of the software and because of the flexibility of Axure to create complex interactions. After converging our ideas into one solidified prototype we conducted usability tests with current users of DYNOmapper. What did we find?

To address these issues we reduced the amount of information in the side navigation. Many users searched for their projects based on the number of pages of a site, so we removed broken links, redirects, and links and kept the number of pages. This reduced the cloudiness of information while still providing users with information important to their work flow. 

Additionally, we trimmed down the size of the inventory section and added a section that included keywords, average time on site, and bounce rate. By doing this we addressed the issue of providing a granule breakdown of analytics information and decreased the visual weight of the inventory section. 

In addition to breaking down the analytics information on the primary dashboard, we added a way to access an in-depth view of site analytics above the page views and channel traffic section of the dashboard. Our goal was to provide detailed analytics, but eliminate irrelevant masses of data that would hamper the user’s work flow.

The final prototype consisted of an information dense dashboard displaying inventory and analytics, a tabular navigation with seamless access to categories of features and information, and a searchable, scrollable, and filterable side navigation consisting of projects and the number of pages. You can see the final Axure prototype here.

FINAL OUTCOMES

DYNOmapper provides massive value to their users through robust and powerful functionality. But this power means that usability and understandability can quickly be lost.

To resolve the design challenge, we created a cohesive way for users to access the complex information and functions of DYNOmapper through an integrated dashboard with an inventory and analytics system for all site content. Our results struck a user-validated and rigorously deliberated balance between precision and accessibility.

We presented the final project and deliverables to the client and he was extremely excited to implement the design. We are in a continuing conversation with him about what we can do to help him implement and if he has questions about future UX needs. 

I sharpened my interviewing and presenting skills, and my teammate Ayon encouraged me to lead every interview and meeting. This is something I struggle with, but I continue to work on as much as possible. Mental modeling is a method I will continue to apply in my design process because it's a thorough way to synthesize data. I really enjoyed reading Young's book and I highly recommend it to any level of designer. Overall, I developed my knowledge of content strategy, SEO, and content auditing. It's a fascinating domain and I feel like I developed my technical skills. If you're interested in my work and would like to build something similar please shoot me an email below. I'd love to hear from you!