Clickx

Client
Clickx

Duration
3 weeks

Skills
UI/UX design
IxD design
research
branding

Deliverables
style tiles
mockups
prototype
style guide

Tools
Sketch
Illustrator
InVision

Overview

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.

During this project, I worked on a team of three designers. We collaborated to research, test, and present our design systems to Solomon. We analyzed findings from user testing and gathered team and individual insights to create systems for Clickx. If you’d like to skip to my solution and reflection, please head all the way to the bottom.

Clickxmockup

Defining the challenge

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.

Angela
First-Time Novice

Small Business Owner

Daniel
Tech-Savvy Novice

CEO and Founder


Marketing Coordinator

Mid-Size Business Employee


Customer Coordinator

Agency Employee

Angela and Daniel were our personas; they represented novice users that require a low barrier to entry. They are either new to the domain or wear multiple hats at small companies. To be mindful of potential Clickx growth, we considered the addition of new archetypes during research and the design process. New Clickx users will be more knowledgeable but still need access to the same tools, at potentially a deeper level.

Evaluating the space

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.

Upcity and SEMrush felt outdated with drab colors and heavy borders and shadows.
There was a visual disconnect between the marketing website and dashboard for Upcity, Moz, SEMrush, and Hubspot. The marketing site feels younger and friendlier than the dashboard, which feels outdated.
Mailchimp uses illustrative iconography to breathe life into what is often a drab topic.
Found and Mailchimp use high levels of white space to make data easy to digest and scan.
The exception to the rule, Mailchimp creates a marriage between the brand voice of its marketing page and platform.

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.

Mint

Mint, like Clickx, is an all-in-one Saas platform that emphasizes minimal input with maximum useful output.

Their visual design inspires trust with friendly copy and eases digestion through significant white space. Mint has undergone significant growth and successfully scaled their candid and easy-to-use brand by emphasizing delight.

Fitbit

Fitbit emphasizes minimal input and maximum useful output for health and fitness tracking data.

They use progressive disclosure to highlight important trends and progress meter graphics to emphasize goal achievement. Fitbit uses microanimations, cards, and icons to make data easy to scan.

Slack

Slack creates a system of engagement by transforming the mundane into an enjoyable experience.

A successful marriage of platform and marketing site, their brand tone of voice is friendly, playful, and helpful. They use interesting illustrations and atypical colors to infuse creativity into their platform.

Asana

Asana, a collaborative project management platform, utilizes heavy white space and bright colors to create a fun and friendly platform, correctly mirroring the marketing website.

They use microrewards to boost motivation and help users track their progress. Asana’s rebranding as a clear and quirky platform fostered a position emotional connection with their users.

Research illustrated that platforms that emphasize simplicity, goal-tracking, and a candid voice have been able to grow with a changing user base—this gave our team confidence that our approach met our users’ needs while remaining scalable. We combined our domain research, style inspiration, and client insights to create design principles.

We’ve got
your back.

Clickx supports customers through friendly typography and color, clear visual hierarchy, and simple marketing data visualization.

You’ve
got this.

Clickx creates training wheels for users through progressive disclosure and clear distinctions between elements using ample white space.

Tell a
story.

Clickx is straightforward but like a good story, we have a voice. We provide meaning to visuals using iconography, color coding, and content.

Hustle without
the grind.

Clickx designs maximize digestion. We utilize contrast, white space, and hierarchy to make grasping information headache free.

Our design principles were a direct result of the user interview synthesis we received from the UX designers, our research, and conversations with Solomon and the Clickx team. They connected with the story and mission of Clickx and resonated with Angela and Daniel’s needs and frustrations.

Concepting visual directions

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.

Modern. This style direction emulates the business of today with custom recommendations and color blocking. I explored engaging and active imagery. I used simple and deep blues and purples for the icons to connect to modern users.
Playful. This direction uses illustrations and bolder colors to connect to users by humanizing its interface. I used dark, blocky headers to draw attention and create contrasts in colors and energy. I created quirky UI copy that connected to the imagery.
Straightforward. This visual direction utilizes atypical colors and iconography to create a sense of playfulness while using heavy white space to create a get-it-done attitude. It’s simple and elegant with a touch of fun. The UI copy was simple and candid.

My straightforward direction was a clear favorite. Solomon loved the cleanliness and how the colors and iconography created a candid yet professional energy. He also enjoyed the illustrations in my playful style and was eager to see them incorporated into the educational side of the platform.

Improving the user experience

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.

Dashboard

Redesigning the Clickx dashboard, with the original (left) and my initial design (right).

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.

Clickx Academy

Redesigning the Clickx Academy, with the original (left) and my initial design (right).

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.

Building, testing, and iterating

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.

Dashboard

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.

Clickx Academy

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.

Clickx Academy Course

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.

Onboarding Walkthrough

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.

Our team used colored post-it notes to help organize and synthesize the results from our interviews. It allowed us to connect specific insights with overarching trends across all 10 interviews.

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.

This would be good for a business owner trying to do things themselves, and might not have a huge budget or is new to marketing.”

- Daniel, marketing professional

Overall it feels really robust. It’s easy to scan and looks like it’s part of something well-designed and thoughtful."

- Haley, entrepreneur

This shows me what I need to know. It’s easy to see the results, and I feel confident about my marketing campaign.”

- Lisa, small business owner

Users loved my typographic choices and the friendly-professional balance they created. After our first round of testing, I took a step back and evaluated why users initially struggled to understand my goal panel redesign. I realized that displaying conversion values as goals provided little value. This failure was due to insufficient understanding of what the data represented—my successful interpretation of the data was critical in designing an easy-to-use data visualization. Moving forward, I honed in on my understanding of the statistics and reworked the hierarchy and design to clarify goal progress.

Design solution

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.

Through research on the current Clickx platform and domain, we defined the brand as friendly, professional, and approachable, and created a design system that altered the brand tone to meet both the needs of the dashboard and Clickx Academy. The alteration of tone allowed us to leverage a competitive niche and create a brand voice that will scale and help create a system of engagement.

Our design team with Solomon and Tina from Clickx after our final presentation. They were ecstatic with the design systems we created and eager to create a development plan.

Next steps

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.

Clickx’s core values are people, passion, and performance—redesigning the dashboard to emphasize goals connects with their passion to create long-term client relationships and their commitment to helping businesses grow. My goal-oriented dashboard significantly benefits sales, recruiting, and user results—by emphasizing goal progress, my design eases progress tracking across multiple levels of the marketing funnel. These goals help maintain user momentum, motivate them to do more, and aid business success. This interaction is absent in competitors, giving Clickx a competitive and recruiting advantage. Additionally, the faster that customers can see the tangible results of using a product, the more likely Clickx will retain them as they grow into larger companies.

What I learned

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.

Additionally, although I love data, I had no prior experience in marketing. The product domain was far out of my wheelhouse. Through research, user testing, and dialogue with Solomon, I developed a solid background in organic marketing and SaaS platforms. This taught me that I can quickly gain knowledge on any sector and make a difference for my clients. My love of learning and curiosity to understand patterns, systems, and people allowed me to dive into the unknown and enjoy both my successes and failures. I’m confident that I can jump into any project and use research to implement design and product strategy.

Solomon's testimonial

Caitlin is extremely passionate about design. Her superior communication skills make her a leader and allow her to fully understand her clients’ needs and goals. She is also detail and process oriented. Working with her was enjoyable and a great learning experience.

— Solomon Thimothy, Clickx