Adtech Dashboard

Company

A web app platform that helps communities across the U.S. manage and deliver thriving publications and digital content that connect residents to hyper local stories.

Users

Business owners looking to target a local audience with advertising.

Challenge

New features are being added to the platform that disrupt the information architecture and, as it is currently, customers are already missing critical deadlines on a regular basis.

Role

An end-to-end Product/UX designer working with in-house Engineers.

Goal
Re-evaluate the IA and landing page of the customer web app to improve outcomes for both the company and it’s customers.

Discovery

User Persona

I first created a user persona to help humanize these problems. I have access to the details of each publications’ customer accounts but no access to discuss issues with these customers directly. So I had to look outside of direct user interviews to gather more details.

This work helped me identify key points about the customers’ needs:

  • Always on the go, so needs to be very mobile-friendly
  • Wearing multiple hats, so needs to be efficiently actionable
  • Focused on leads, so needs to highlight marketing outcomes
Audit of Existing Web App

The existing landing page is solely focused on print ads by issue. This is currently not a huge issue but definitely will be with an upcoming new service.

New Service

In an effort to meet more of the company’s customer needs, it is expanding to digital marketing through paid social media ads. This content will be equally important but would be secondary in the current UI and hierarchy.

Business Needs

In my assessment of needs based on these large-scale company changes, their customer web portal needs a new landing page within a revised sitemap that addresses new features being added and ongoing issues with the customer’s deadlines.

User Needs

The platform must be responsive to fit the needs of users who are always on the go.

The UI should also focus on immediate needs to streamline the mental load and facilitate efficiency in meeting important deadlines.

And the content should not give priority to one subscription service over another as a user may have either one, print or digital, or both.

Design

Information Architecture

In an effort to reduce complexity, I decided to rethink the information architecture to streamline content and create efficiency to house new ventures like social media. I led a card sorting workshop with stakeholders to rethink the structure and combine similar content.

Page Structure

I really went on a journey exploring different page structures in sketch format. I wanted to show all relevant content for both print ads and digital ads equally, which would look great in two columns. However, not all customers would have subscriptions for both ad formats. I pondered losing a column in that case, or keeping an empty state that might be a great marketing opportunity for the subscription, but it would take up significant amount of valuable screen space.

Then I was reminded of my user persona who is always on the go. They need to be able to focus on what the immediate need is, probably on a mobile phone. So I landed on a single column with stacked cards.

Low to High-Fidelity Wireframing

After narrowing down the structure to a single column, I worked to refine what content would be most essential for these cards. Each card would contain an important need to address. Users would be able to open up a page within a section to access more pertinent details. In this phase, it is absolutely essential to keep efficiency top of mind to not burden the user with extraneous details, which is a skill I particularly excel at.

Card content:

  • Category
  • Title and details
  • Actionable links
  • Optional illustrations for important service content
Design Details
New sidebar menu to reflect the new information architecture
Most important tasks appear first
Opportunities to complete related tasks
Illustrations to quickly identify related tasks
Opportunity to finish with most urgent tasks
Feature interesting content from performance pages
Engaging blog posts or help articles displayed in a different color
Columns within each card can stack vertically for mobile responsiveness
Useful context for the task
New design system applied
Allow users to rank tasks to determine their order
Overall User Experience

Instead of requiring actions to be discovered via email notifications or across multiple pages in this customer portal, the solution simplifies important content in a list format. The content also resembles the linear flow of social media and offers resources on advertising best practices alongside tasks sorted from most important to least.

Responsive Web

While I prefer to design at desktop size first, I continuously consider how content would adapt to smaller screen sizes. This was a key user need I defined in the discovery phase.

Illustration Details

I created illustrations to add an element to the UX that delights the users as well as builds recognition with recurring processes to reduce the mental load. This is important because users will likely be visiting the app on a monthly basis.

Illustrations in web apps can reduce mental load on infrequent users by providing visual cues, enhancing understanding, and creating a positive emotional connection. This can lead to faster learning, improved memory retention, and a more inclusive user experience.

Conclusion

Final Thoughts

I have handed off this project as a future opportunity for the team to use once the new digital services are up and running. It was very rewarding to prevent future user issues by defining and anticipating their needs.

My suggestion is for the company to begin tracking Customer Satisfaction (CSAT) scores, along with existing revenue reporting, to see how their investment in better user experience pays off.