Clickx is an all-in-one SaaS marketing platform that works with small- and medium-sized companies. They provide a straightforward way to learn and use digital marketing tools. Clickx tasked us to improve the integration of their educational content and restructure their dashboard by adding more story and analysis to their data visualization tools. Solomon, Clickx CEO and Founder, was our main stakeholder.
A previous team of UX designers at Designation concepted the Clickx Academy. As a former teacher and researcher, I was excited to work on data visualization in conjunction with educational content. I saw an interesting challenge in creating a visual design system that could encapsulate both.
In our kick-off, Solomon described Clickx as easy to use, empowering, friendly, and efficient. We discovered Clickx planned to expand their target customer audience to include mid-size companies, likely meaning the addition of new personas. This created a unique challenge for our team—we integrated previous research with potential future growth to develop a scope and scale for our design solutions.
We dove into domain research to determine visual style directions that could grow and scale with Clickx. This was necessary to determine how the brand should change to meet the needs of their future user base.
Many competitors had outdated platforms and disconnected visual identities between their marketing sites and dashboards, leading to poor alignment of brand tone and voice. Only MailChimp had an aligned, clear, friendly, and professional voice. MailChimp is an example of a company that’s undergone significant growth and rebranding—their slogan recently changed from “Send Better Email” to “Being Yourself Makes All The Difference.” They maintained their professional yet friendly voice and scaled from small to mid-sized businesses; this was our first clue in aligning the Clickx brand for successful potential growth.
We also examined out of category companies for style inspiration. We focused on companies that underwent significant redesign or that infused their users’ data with a story to create systems of engagement.
My approach to concepting style directions expanded during this project—I spent additional time conducting visual research to examine trends, patterns, and visuals used in other data dashboards and online educational platforms. I focused on three ways we could utilize a visual style to make the platform desirable and give the Clickx platform a brand with an appropriate tone of voice.
Before jumping into high-fidelity designs, I evaluated the wireframes and current website to determine areas of improvement. In our previous meeting, Solomon discussed the importance of goal tracking for Clickx users; I utilized my style research to determine how to best tackle this in my dashboard redesign.
With the user’s marketing goals in mind, I redesigned the
marketing performance chart to place emphasis on goal progress.
I improved the keyword hierarchy and trends,
added an empty state, and
converted contacts by source into a pie chart to highlight categorical differences.
I increased the white space and
altered the layout to make it easier to scan.
I removed the course descriptors to reduce noise and incorporated them as hover animations. A data nerd at heart, I enjoyed the opportunity to take apart graphs and put them back together in context of user needs.
We conducted two rounds of desirability and usability testing on static screens and a prototype, engaging with a total of 10 new users. This was a significant learning point for our team, as it was our first opportunity testing client designs with live users.
While users understood the top row was the “heartbeat” of their metrics, many struggled to interpret the data.
Users liked the personalization but felt the circles were overwhelming.
Color-coding of keywords highlighted pertinent information.
Users began understanding the goals and recognized the “marketing funnel.”
Users liked the clarity of the empty state and said it improved their awareness of the ability to personalize.
Users liked the more playful approach for the Clickx Academy.
The white space and removal of course descriptions was successful but users desired information on time length, course difficulty, and bookmarking.
Users reported this page felt static and were unsure how it changed with use.
Courses felt clickable and the new layout gave users a better idea of where to start.
In Lead Generation, the example Clickx Academy course,
Users loved the top progress bar, but were unsure if it was clickable.
Users reported there was too much writing and felt disconnected to the video preview.
An example of an onboarding walk-through screen for new users.
Users responded well to the color palette, but wanted more contrast between the overlay and the dashboard background.
Users were unsure about the main call to action and where the next button took them.
Users were also unsure if bottom elements were clickable.
During testing, we asked our users to describe the person they thought would use the dashboard and Clickx Academy. As new users with no experience using Clickx, their reflections established we successfully implemented our brand and design goals to be modern, friendly, and professional.
I sought to refine the dashboard to ensure novice users clearly and quickly understood the metrics and their personal growth value. I also iterated my implementation of the Clickx brand voice and tone across the dashboard and Academy to create balance between friendliness and professionalism.
This project challenged our team to define and develop our own scope. We used research to ideate, allowing us to become the experts our client needed. I developed a deep appreciation for visual research and exploration during this project, a direct result of how hard I worked to try out new ideas and iterate my designs. Successful project implementation came down to the details of data visualization and interaction states. To see how they all came together, please see my prototype and style guide.
With more time, I’d like to conduct testing on current Clickx users. All interviews were completed with new users—adding existing users to the research ensures our conclusions are an accurate portrayal of their needs. Such user testing helps investigate goal desirability and optimize goal progress tracking. Additionally, I’d like to explore microinteractions and animations to promote “the story” behind the data. Investigating how Clickx can provide more meaning to their users by creating a story within their data will help further foster positive emotional connection.
This project challenged me to become an expert and advisor to my client and a leader for my team. It was my first experience working with and presenting designs to a client with a non-design background. I shifted my communication style to paint a picture of the whole story while incorporating strategy, user and business goals. I also learned how critical research is to my design process—I put in many hours examining dashboards, goal tracking applications, and online educational platforms. This research allowed me to further diverge and try out new ideas.