Client
Client
Timeframe
3 weeks
Timeframe
3 weeks
Tools
Sketch
InVision
Tools
Sketch
InVision
Skills
UI/UX design
interaction design
information architecture
research
Deliverables
style tiles
mockups
prototype
style guide
Skills
UI, UX, Ixd, IA, research
Deliverables
style tiles, mockups,
prototype, style guide
Skills
UI, UX, Ixd, IA, research
Deliverables
style tiles, mockups,
prototype, style guide

 OVERVIEW

Clickx is an all-in-one marketing platform that provides businesses with the tools they need to create effective marketing strategies. Clients can test their website’s strengths and limitations, view their campaign progress on a personalized dashboard, and access resources to increase their marketing knowledge. Clickx’s founder, Solomon Thimothy, is always looking for ways to provide meaningful experiences for his clients, so he teamed up with UX designers from Designation to explore ways to improve his website.

Through their research, the UX team identified Clickx’s target users as small business owners and tech-startup founders with little marketing experience, as well as marketing coordinators within mid-sized businesses. They understand the importance of a good marketing strategy, but lack the time and expertise needed to implement one. Through research and testing, the UX team discovered users were motivated by:

Based on these findings, the UX team created wireframes for educational and walkthrough materials. A few weeks later, our team of UI designers met with Solomon to discuss ways to design a unified platform. He wanted to unite the brand’s current marketing page with the analytics dashboard and the UX team’s wireframes. He was flexible in terms of color palette and typography, but asked that we preserve the current company logo.

 WIREFRAME ANALYSIS

After our meeting, I reviewed the company’s marketing page, as well as the dashboard and Academy wireframes. I highlighted potential areas for UX adjustments, but made relatively few changes.

Marketing Page

Simple line icons add character and contrast to the text. Blue and orange accents complement the various shades of gray that appear across the page. Negative space and colored backgrounds provide organization and guide the user through the information. Consistent visual design creates familiarity and lends the page a professional, elegant feel.

Dashboard

When the user changes the date range, it affects the entire dashboard; however, the current placement of the date range field makes it seem as if it applies to the top section only. I'll resolve this by moving it to the top navigation bar.
Conversion data is the most important factor in providing the user with comprehensive insights into their marketing campaign. I’ll move this data to the top of the dashboard and find a way to display it more prominently and creatively.
Currently, the dashboard has a fixed configuration, so all users view the same information.  I’ll add the option for users to customize their dashboard view by moving cards around, so they can decide what information they see first.

Academy Home Page

This button usually opens a consolidated menu, but here, it collapses and expands the side navigation bar. I’ll  experiment with other visual elements that better represent the button’s function to lessen the potential for confusion.
This dropdown menu transitions to an overlay screen where users have the option to go to the Academy (which is already an option on the side menu) or to access guided walkthroughs. I’ll explore alternative options to reduce repetitiveness.
The button position for the courses creates two “columns” of buttons that stand out on the page. I'll re-position each set of these to provide stronger visual hierarchy.

 INITIAL RESEARCH AND INSIGHTS

 INITIAL RESEARCH AND  INSIGHTS

Our next step was to familiarize ourselves with other companies in the marketing analytics sector in order to better inform and develop our designs. We analyzed numerous direct and indirect competitor platforms, including Found.ly, HubSpot, MailChimp, Moz, SemRush, and UpCity. We discovered some common themes regarding what to avoid and what worked well for our upcoming designs.
[ - ]
[ - ]
[ - ]

Design Shortcomings

Marketing pages are often cleaner and more modern than their accompanying dashboards, which appear outdated and often looked like they belonged to  different websites entirely.
Dashboards often have thick headers and dark muted colors, which lend a heavy, antiquated feel to the pages.
Many dashboards also appeared cluttered and overfull due to the lack of negative space between cards and the arrangement of information within them.

Design Shortcomings

Design Shortcomings

[ - ]
[ - ]
[ - ]
Marketing pages are generally cleaner and more modern than their respective dashboards, which appear outdated and often looked like they belong to entirely different websites.
Dashboards often have thick headers and dark muted colors, which lend a heavy, antiquated feel to the pages.
Many dashboards also appeared cluttered and overfull due to the lack of negative space between cards and the arrangement of information within them.
[ + ]
[ + ]
[ + ]

Design Strengths

Websites that utilize a consistent color palette across their platform create a familiar environment for users.
Bright pops of color, engaging text, and a brand mascot create a fun, welcoming atmosphere and make users feel at ease.
Large amounts of white space make the information accessible and easy to navigate, which lowers the learning curve for new users, and allows experienced users to move  quickly through the site.

Design Strengths

Design Strengths

[ + ]
[ + ]
[ + ]
Websites that utilize a consistent color palette across their platform create a familiar environment for users.
Bright pops of color, engaging text, and a brand mascot create a fun, welcoming atmosphere and make users feel at ease.
Large amounts of white space make the information accessible and easy to navigate, which lowers the learning curve for new users, and allows experienced users to move  quickly through the site.
I also looked at two additional sites for out-of-category inspiration: Slack, a team-based messaging app for professional and academic use, and Udacity, an educational site offering massive open online courses.
Slack welcomes the user with custom illustrations and friendly text. The color palette is warm and professional, and is used consistently across the platform. Ample white space creates a clean, minimalist atmosphere and makes the information easily digestible. Overall, the site makes team communication and collaboration an enjoyable experience.
Slack welcomes the user with custom illustrations and friendly text. The color palette is warm and professional, and is used consistently across the platform. Ample white space creates a clean, minimalist atmosphere and makes the information easily digestible. Overall, the site makes team communication and collaboration an enjoyable experience.
Udacity balances its bright color palette with large areas of white to create a vivid, distinct interface. Shadowed cards with minimal text and pops of color provide elegant organization and draw the user’s attention to the site’s content. Together, these elements establish the site—and the brand—as friendly, approachable, and engaging.
Udacity balances its bright color palette with large areas of white to create a vivid, distinct interface. Shadowed cards with minimal text and pops of color provide elegant organization and draw the user’s attention to the site’s content. Together, these elements establish the site—and the brand—as friendly, approachable, and engaging.
I analyzed our findings from the competitive analysis, and discovered two opportunities to differentiate Clickx from its main competitors and maximize user engagement:

Streamline the design language across the platform to provide users a consistent and seamless experience.

Infuse the website with a fun, friendly tone and bright colors so everyday marketing tasks are more enjoyable.

These insights provided a framework for our team to formulate visual guidelines that would define and inform our upcoming individual designs:
We've got your back.
We want to support users as they strive to become proficient at marketing their business. We will achieve this by using sans serif typefaces, friendly colors, and  straightforward data visualizations.
You've got this.
Our designs will empower users to feel confident as they work to grow their business. We will accomplish this through consistent design patterns, progressive disclosure,  and ample white space.
Tell a story.
We want to highlight relevant information to easily connect users with their goals. We will provide meaning and create connections through the use of simple iconography and color-coded content.
Hustle without the grind.
Our designs will maximize user efficiency and speed in digesting information. We will utilize white space and visual hierarchy to create a clear contrast  so information is easy to find.
We've got your back.
We want to support users as they strive to become proficient at marketing their business. We will achieve this by using sans serif typefaces, friendly colors, and  straightforward data visualizations.
You've got this.
Our designs will empower users to feel confident as they work to grow their business. We will accomplish this through consistent design patterns, progressive disclosure,  and ample white space.
Tell a story.
We want to highlight relevant information to easily connect users with their goals. We will provide meaning and create connections through the use of simple iconography and color-coded content.
Hustle without the grind.
Our designs will maximize user efficiency and speed in digesting information. We will utilize white space and visual hierarchy to create a clear contrast  so information is easy to find.

 STYLE EXPLORATION

Based on our research and style guidelines, as well as Solomon's priorities, I explored three style directions that accounted for our target users, worked well the current marketing page, and displayed information in a clear, consistent manner.

Organized/Professional

The rich color palette, inspired by Slack, is offset by flat white cards and a neutral background. A futuristic yet elegant typeface creates a modern, slightly edgy feel. Simple line icons complement the text, and align with those on the current marketing site. The resulting style is professional, simple, and sophisticated.

Solomon thought they were too angular and decided he’d prefer to keep using their current custom set, since they had invested a lot of time and money in them. He thought the color palette was professional but a little too dark against the gray background. He really liked how the white cards created a sense of organization.

Friendly/Approachable

Shades of green and blue, including the light blue from Clickx’s marketing page, create an easygoing and inviting feel. The lack of icons simplifies the side navigation menu, and the Lato typeface provides a sense of openness and stability. Understated input fields and dashed borders emphasize the surrounding white space.

Solomon agreed that the design felt stable and inviting. He liked the typeface and thought the circle chart was eye-catching. He noted that the brand’s signature orange was missing from the color palette, and preferred a side menu with icons to support the text and create intuitive meaning for users.

Vibrant/Fun

This tile was the most divergent and experimental. Bright pink and the brand’s signature orange draw the user’s eye to the graph elements, and social media icons and a rounded typeface create a playful feel. Bold icons, thick card borders, and darker colors anchor the design and maintain its sense of professionalism.

Overall, this design was Solomon’s least favorite. He disliked the “heavy” borders and icons, and thought it felt less modern than the other designs. He liked the rounded edges on the buttons and cards because they felt open and inviting, and thought the social media icons added visual appeal to the data visualization.

Organized/Professional

The rich color palette, inspired by Slack, is offset by flat white cards and a neutral background. A futuristic yet elegant typeface creates a modern, slightly edgy feel. Simple line icons complement the text, and align with those on the current marketing site. The resulting style is professional, simple, and sophisticated.

Solomon thought the icons were too angular and preferred to keep using their current custom set, as they had invested a lot of time and money in them. He thought the color palette was professional but a little too dark against the gray background. He really liked how the white cards created a sense of organization.

Friendly/Approachable

Shades of green and blue, including the light blue from Clickx’s marketing page, create an easygoing and inviting feel. The lack of icons simplifies the side navigation menu, and the Lato typeface provides a sense of openness and stability. Understated input
fields and dashed borders emphasize the surrounding white space.

Solomon agreed that the design felt stable and inviting. He liked the typeface and thought the circle chart was eye-catching. He pointed out that the brand’s signature orange was missing from the color palette, and preferred a side menu with icons to support the text and create intuitive meaning for users.

Vibrant/Fun

This tile was the most divergent and experimental. Bright pink and the brand’s signature orange draw the user’s eye to the graph elements, and social media icons and a rounded typeface create a playful feel. Bold icons, thick card borders, and darker colors anchor the design and maintain its sense of professionalism.

Overall, this design was Solomon’s least favorite. He disliked the “heavy” borders and icons, and thought it felt less modern than the other designs. He liked the rounded edges on the buttons and cards because they felt open and inviting, and thought the social media icons added visual appeal to the data visualization.

 ITERATIONS AND TESTING

During our design presentation, I learned how important the icons and orange from the existing site were to our client and the brand’s overall identity. Solomon even said, “if we painted our office, it would be this orange,” and thereafter, we referred to it as "Clickx orange." Based on his feedback, I decided to incorporate elements from all three style directions, along with Clickx orange and the custom icons. As a team, we chose to design the dashboard and Academy home page for our first round of user testing. I used a brighter version of the color palette from my first design, along with the circular graph and typeface from my second design. I also included the UX changes I identified in my initial wireframe analysis.

Our team created a series of questions to understand our users’ wants and needs as they interacted with our designs. We wanted to test our assumptions about which elements were functional, delightful, confusing, or distracting. We asked users for adjectives to describe their first impressions, and whether they understood the overall purpose of a page, or specific elements therein. We also asked their opinions regarding color palette, iconography, and typography. We conducted five user interviews with two men and three women, all small business owners or employees with a marketing role. Overall, users responded positively to my initial designs, and described them as friendly, professional, and informative. They also thought they were clean, organized, and easy to understand.

Dashboard

Each user immediately noticed and understood the conversion data at the top of the dashboard, and one user stated that “this shows me exactly what I need to know. It’s easy to see the results, and I feel confident about my marketing campaign.” They also immediately noticed the “Academy” button at the top.
There were also potential areas for improvement:
  • While users quickly found the conversion data, I wanted to explore additional ways to increase its prominence and visibility.
  • The “expand” button needed to be redesigned because users found the dual arrows confusing.
  • Users wondered why there were two links to the Academy, so I planned to eliminate this less noticeable link.
  • Most users thought the light blue strip looked heavy and “old-fashioned,” and some questioned the function of the gear wheels on each card.

Academy Home Page

The color palette and typography were well received and one user said, “I like the balance of white space to color—it makes it look organized and modern.” They also thought the icons contrasted nicely with the large blocks of  text, and accurately represented each course description.

There were also opportunities for improvement:
  • Additional screens, such as a “Completed Courses” page, were needed so users could better understand the Academy section.
  • Users thought there were too many buttons on the Academy home page and one said “I’m really not sure what I’m supposed to be doing here.” I planned to experiment with the layout to make the page feel less busy.
  • Most users expressed an interest in knowing how long the courses were and having the option to save or bookmark them for future reference. They also thought the course descriptions were unnecessary and made the page look too busy.

We met with Solomon to present our findings from the first round of user testing. During the meeting, we learned the Clickx developers had recently designed a mascot—Max, the marketing ninja—to add a cheerful tone to the brand.

Solomon was excited to see the progression of our designs. He liked how I incorporated Clickx orange, but preferred a darker palette that still felt vibrant. He liked my use of the brand’s icons within the Academy, and wanted to see how users responded to my proposed changes. I suggested omitting the course descriptions to facilitate a cleaner interface, and planned to incorporate Max into the Academy section to infuse it with a whimsical feel. I spent the next few days iterating my designs and building additional screens. I tried various visual arrangements for the Academy courses, and different navigation styles.

We conducted a second round of user testing with two women and three men who were small business owners or employees in a marketing role. This round was interactive, taking users through simple flows within our designs. Our questions were similar to our previous round of testing, but included prompts to guide users between pages.

Users described the designs as professional, organized, and modern. One described the dashboard as “really robust. It’s easy to scan and looks like it’s part of something that was thoughtfully designed.” Another said, “I would definitely use this if I were a small business owner and I was trying to do the marketing myself. It would be great for someone who is new to marketing or doesn’t have a huge budget.” I made small edits and added some finishing touches before presenting my final designs to Solomon.

 THE RESULT

Dashboard

I color-coded the conversion funnel icon to draw the user’s attention and create a coding system that provides consistency throughout the page. Rich, vibrant colors are offset by a light background and structured cards. I used simple line graphs that are easy to read, and allow users to view more detailed information when they hover over them.

I used a  variety of chart styles  and lists to provide visual contrast and convey information quickly and clearly. For each card, users have the option to download or refresh the information, and can also reposition the cards. At the bottom, they have another option to customize their dashboard to create a space that is intuitive and comfortable. Orange buttons are used sparingly to highlight relevant calls to action.

Academy (Courses)

Academy (Bookmarked)

I included the marketing ninja in the Academy, along with a fun, informal tagline and welcome text, to make marketing education interesting and exciting. I added “Bookmarked” and “Completed” tabs so users could easily organize and track their progress. The course cards stand out with splashes of color from the dashboard palette. I reduced the text and number of buttons on each card, and added course length and difficulty levels so users could easily gauge their time commitment. I also added a bookmark icon to each course card which, when clicked, moves the course to the “Bookmarked” tab.

Lead Generation Course Page

I designed this page as a blueprint for other courses as they are added to the Academy. I used tabs across the top to organize various course components so users aren’t immediately overwhelmed with information. Users explore the course at their own pace, and mark it completed at the top when finished, which will move the course to the “Completed” tab in the courses section. The “Next” button at the bottom provides quick navigation to the next course in a user’s queue.

Walkthrough Overlay

Due to time constraints, our team only designed the beginning stages of the guided walkthroughs. This screen provides a visual framework for additional walkthrough screens as they are developed by the Clickx team.

Each overlay card provides the user basic concepts and definitions. I added pagination at the bottom to indicate the duration of each walkthrough, along with the ability to exit at any point. Users can also navigate to the Academy for more detailed information. I incorporated the marketing ninja to add personality and another visual connection to the Academy.

In just three weeks, I created designs that resonated with users as elegant, professional, and approachable. Solomon thought my designs were very clean and easy to understand, especially the simple line graphs and how the course information was organized. He liked the prominence of the “Academy” button and “really, really” liked the funnel icon. Overall, he was impressed with how quickly our team’s designs had progressed in such a short time period.

The project culminated in the creation of an interactive prototype which showcased my final screens. I also assembled a comprehensive style guide detailing the visual elements of my designs. It includes brand guidelines and detailed recommendations for future Clickx designers and developers to reference as the brand continues to grow and evolve. Check them out here:

 future considerations

 future  considerations

There are a variety of avenues for future design exploration and development within the Clickx platform. Given more time to pursue this project, I would:

Together, these processes would help streamline the design language across the platform to provide users with a consistent and seamless experience. It would also help discover other ways to make everyday marketing tasks more enjoyable.

© 2018 Alice Gates