A cohesive design system for social media analytics
TopicDNA is a web application by Personalyze that allows marketers to understand, target and engage customers across social media channels. Unlike other platforms, TopicDNA can identify an audience’s true interests and provide information on how to engage them.
As a contract designer, I was responsible for working with Personalyze to redefine TopicDNA’s user interface and improve its user experience based on the existing proof of concept.
Product redesign started in 2017 and is currently ongoing.
User ExperienceUser Interface DesignInteraction DesignArt Direction
The Challenge
As a new product in a saturated market, Personalyze felt it crucial that TopicDNA make a positive impression on users during their upcoming closed beta.
As it stood, the proof of concept didn’t align with Personalyze’s future vision for the look and feel of TopicDNA. The combination of cyan, magenta, and cartoonish illustrations made the product feel inexperienced and untrustworthy.
Understanding the problem
In order to inform the redesign of the product, I worked closely with Personalyze – who were users themselves – to understand the users and the problems TopicDNA was meant to solve. This included:
1. Better insights
Currently, large social media companies have a wealth of data, but it’s poorly organized and categorized. This makes it difficult for marketers to use this data to understand and target audiences. TopicDNA organizes and categorizes this data to provide better insights and targeting.
2. Eliminating the reliance on “gut-feel”
As a result of poorly organized data, marketers typically rely on gut-feel to identify and determine their target audience. This often results in broad targeting and wasted marketing dollars. TopicDNA allows marketers to use data to more accurately and narrowly target audiences.
3. Greater audience engagement
By having better data, TopicDNA allows marketers to have a clearer understanding of their audience. This lets marketers target audiences that will be more engaged in their offering.
UI Design
Defining the look and feel
As it stood, the proof of concept didn’t align with Personalyze’s future vision for the look and feel of TopicDNA.
Through exploration of style boards, I was able to communicate the potential look and feel of the product prior to the redesign. Through subtle refinement of their cyan/magenta brand colours, creation of a complimentary colour palette, and reduction in the amount of colour used in the interface I was able to make the product more sleek and utilitarian.
Establishing a design system
After a style direction was chosen, I wanted to ensure consistency as I designed each page. By creating a component library, setting up a grid structure, and defining an 8px spacing system, I was able to quickly build out designs, identify opportunities to refine existing components, and expose gaps where new components were needed.
UX Design
Workflow and onboarding
In addition to redesigning the look & feel of the product, I also provided recommendations for improving the user experience and interaction design of the product.
By understand users’ goals, I was able to propose changes to the project creation workflow to better lead users through the process of creating a project, creating an audience, and gathering insights on their audience.
Although my suggestions were put on the back-burner due to time constraints, early user testing found that users didn’t know what to do after creating a project, further emphasizing the potential for this improvement.
Navigation and orientation
Many of TopicDNA’s dashboards gave users a way to dive deeper for more granular information. Unfortunately, these dashboards didn’t communicate the user’s position, making it challenging to understand where you were and how to get back.
Introducing breadcrumbs, filter tags, and visual highlighting, helped ensure users could see how deep they were and how to get back.
Legibile, sortable graphs
As productivity tool for marketers to better understand consumer data, displaying information clearly, quickly, and efficiently was key. With a number of topics to display, TopicDNA’s graphs made it challenging to find the top or a specific topic.
Understanding that users are either looking for the top topics or a specific topic, we chose to display the graphs horizontally to improve label scanning and legibility. Adding the ability to sort the graph alphabetically or by percentage would help increase the speed at which users could find a specific or top ranked topic.
Simplifying hierarchy
In addition to improving navigation and legibility, I also focused on improving the PoC’s information hierarchy.
Font size and colour was used to create visual hierarchy, reading order and emphasis. Where possible, actions were combined to create more efficient workflows and get users to their goal faster.
In a particular widget, the positioning of components made it difficult to understand how the action of comparing audiences was related to Breakdown and Accounts, and what the user should be looking at or doing first.
By iterating and rapidly testing, I found that visually grouping the breadcrumbs and legend together and moving the tabs to the far right helped users better understand the hierarchy and relationship between actions and navigation.
Dynamic interactions
Thinking about the interface dynamically let me to explore animations that revealed functionality only when needed. This allowed the interface to remain uncluttered and allowed the user to focus on the task at hand.
The Result
The result is a look and feel that is not only professional and utilitarian, but colourful and playful; a component library that can be leveraged when building out new pages; and usability improvements to make hierarchy and tasks clearer and quicker.
The final interface design and usability improvements prepared TopicDNA for its inaugural closed beta, and helped set the groundwork for the look and feel of Personalyze’s future product line.
