My approach to ideation was to look at the foundation of our research and the idea of balancing complexity with accessibility.
I asked myself: how can I restructure the architecture of Dynomapper into a dashboard that incorporates all of it’s features while emphasizing usability?
To do this, I began to sift through the data gathered in the ethnographic interviews and organized key features and usability issues in order of importance. I drew upon our research insights because the only way to implement a successful design is to base it upon detailed feedback from users.
Users wanted a glancable and 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.
Users pointed out the usefulness glancing at site analytics, so at the bottom of the dashboard, I created a space for analytics information.
During usability tests on the original software, users consistently pointed out that the thumbnail of the site map was confusing and took up a lot of screen space. To approach the solution, I created a space conserving side navigation that allowed users to see which site they are currently managing, as well as a search for all current projects.
To allow users easy access the many categories and features within Dynomapper, I decided to go with a tab in the top navigation. The user can easily toggle back and forth between your dashboard, site map, keywords, audit, and accessibility pages. I decided to go with this navigation because during usability tests, multiple users were confused about the sitemaps feature opening up into a different page.
I sketched out a wireframe on paper and then jumped into Sketch to create a mid fidelity wireframe. During this project I honed in on my skills in Sketch, focusing on clarity and usability while using a splash of creativity and color.
Following the completion of the initial wireframes, the team came together and put the differing concepts in front of users.
My prototype focused on a full page snapshot of inventory and analytics information with a tabular navigation while my teammate Ayon's concept focused on allowing users to understand the status of any given site quickly within large stacks of information.
Again, we reached out to the design community and sought out content strategists and current users of Dynomapper to test our two concepts.
Key questions in concept testing:
- 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 is simultaneously unobtrusive for people working in small teams?
Key takeaways and user feedback:
- Users consistently agreed that there needed to be a greater emphasis placed on the visual hierarchy and functionality of inventory information:
- For example, at first glance, a user needs to see all relevant inventory information and be able to quickly export the information that they need.
- Users emphasized the importance of breaking down the analytics as granularly as possible:
- For example, including information related to bounce rate, average sessions, and top channels from traffic.
- Users found the navigation elements of both prototypes useful:
- For example they easily found features within the tabular navigation and they also liked having access to all of their projects in one scrollable and filterable section within a side navigation.
- Some users found information related to recent team activity important:
- For users working in large teams, they found the recent user activity section userful. However, some users only worked in teams of one.
The user feed back gave use a solid foundation on which to converge prototypes. Our goal in converging was to maintain an understandable information architecture and simultaneously consolidate a dense set of key features
We found that users would benefit from:
- A combination of an easily searchable, glanceable navigation with a full page information snapshot.
- Reconfiguration of data, so that the most important information is prioritized.
- More appropriate filtering and arranging options
- A team section to accommodate users working in large teams
So how did we converge?
- 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.
- We provided an information rich snapshot of site inventory and analytics, allowing the user access to pertinent information in a glanceable manner.
- We 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 such as dynamic panels.
1st iteration of converged prototype here
After converging our ideas into one solidified prototype we conducted usability tests with current users of Dynomapper
What did we find?
- Based on the first iteration, users overwhelmingly agreed that the side navigation contained too much information:
- While users agreed upon the usefulness of the glancibilty of information, there were too much data clouding the side navigation.
- Users agreed that the inventory took took up too much space on the dashboard:
- The inventory section took up a generous amount of real estate and users of Dynomapper agreed that trimming down the section and adding another section of relevant information would be more useful.
- Users still felt the analytics could be broken down more granularly:
- Across the board users wanted more analytics information.
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 were able to address the issue of providing a more gradual breakdown of analytics information and simultaneously decrease 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.
Conclusion and resolving the design challenge:
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 means 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 anything we can do to help him implement and if he has any questions about future UX needs.
What I learned
- First and foremost I intensely sharpened my interviewing skills. I was lucky to have a teammate that encouraged me to lead every interview and every meeting with the client because I knew these were skills I needed to improve.
- I feel that I honed in on my Axure skills and am able to make use of the software's robust features.
- Mental Modeling:
- I found mental modeling to be an extremely thorough and insightful way to synthesize data. I will apply this methodology in future case studies.