Thinkific Blog

Completed in 2020

How might we design a blog experience that better showcases Thinkific's stand as a market leader on online education through better user navigation and content strategy?




Lead UX/UI Designer 



Problem


Thinkific's blog receives one of the highest traffic of their website, however, conversion was always low in comparison to the rest of the website. After analysing usability of the site, including looking at traffic data and heatmaps, we concluded that users were not navigating from one blog post to another, they were not singing up and there was no button to sign up to a newsletter. We essentially had a blog where prospects landed on a post and bounced right out of the page.

Business Goal


The ultimate goal of the redesign was to make Thinkific's Blog a known resource within the course creators community and increase brand awareness to consequently increase conversion from prospects to customers.

The secondary goal was for the blog to become a free resource for Thinkific's course creators to learn how to be succesful on their online business.





Blog Audit: Addressing Legacy UX Problems


In the old version of Thinkific's blog, there was plenty of usability and functionality issues. There was not a lot of user generated data at this point, except for conversion rate. So I decided to do an audit on the blog and listed out the main UX problems, based on industry standards and research of other successful blogs to ensure the new design was solving as many of them as possible.

These include:
• CTAs and buttons that didn't pass the minimun accessibility standards;
• Lack of discoverability between blog posts or categories;
• An almost hidden drop-down category filter, with no clear organization, which made navigation incredibly hard for the user;
• No hierarchy to ensure the user can quickly scan the page for most relevant content;
• No way for the user to subscribe for our newsletter;
• Image selection was not optimized for the component it was being used for. Below you can see an example where the image's text and a photo lose readability once it's placed as a background image.





User Flow


During the process, we had multiple conversations on what the primary goal of the redesign should be: creating a blog that course creators would use for thought leadership pieces to grow their business or a high conversion blog that would generate lots of marketing leads. We decided to focus on the former, as the latter would come naturally as we design a blog with the user in mind and produce more thought leadership content.





The previous design only allowed the user to navigate from a blog post to the previous or next post. This often meant the articles on the footer of the post they had just read were irrelevant to where they were on the customer journey.

I redesigned this section so it would be pre-populated with relevant blog posts of the same category, so discoverability of new content was a lot more intuitive from a user perspective. Thinking about the thought leadership goal in mind, we also wanted to ensure our posts could be easily shared on social media, so other course creators could easily find our blog and learn how to build a successful online courses business as well.





Finally, another important feature was adding a sticky side bar that would be on the right side of the screen as the user reads the post. The side bar adds more relevant blog posts the user could be interested in, along with a spot for ads, where we could promote other Thinkific initiatives, like our free online summits or webinars.







Result


As we worked to test the new blog navigation (including the new categories menu and the side bar), it was crucial to run quick wireframe tests with subjects that were easily available despite the quick turnaround of the project. I decided to consult people accross the company, including the product designers and discover how they navigate their favorite blogs.

I also had to work closely with the content team to ensure the final design allowed them to do everything they needed as they were the primary stakeholders working on the blog full time, including adding a banner at the top of the category pages to promote featured guides.

The final homepage redesign addresses all the issues we uncovered during the discovaribility phase – including navigation between categories and the discoverability of new articles. After the redesign, our conversion throughout the blog went from 1.4% to 4.7%. 






Mark

clio.com

Completed in 2019

Understanding user insights to better deliver Clio's brand story and products to prospects and customers. 




UI Designer & Strategist 


Lead design by Alejandra Porta
Other designers on the project: Renee de Valle and Jeff Bates


Clio’s website to better reflect Clio’s growth and market leadership. The website is a key asset in driving Clio’s growth. A high percentage of the company leads enter the funnel through it, and as we neared a big product launch, it was crucial that Clio’s website was addressed.

This project was more than changing the UI. It was a multi-disciplinary effort, where all of marketing teams collaborated to achieve the main goal of launching Clio's new website by end of January 2019. During the process, we went through a content audit, brand audit, moodboards to guide the art direction, wireframes, site map, user experience research, UI design of components, and much more.






The Process


This was a huge project at Clio and we hired an external UX designer to support the team. My part was mostly involved in the UI and brand, but it was crucial to work closely to the UX designers to ensure alignment on our target audience. Our timeline for this project was short – around 2 months –, including brand and content audit and user testing. It was important that all parts were working harmoniously so project deadlines weren't delayed. We wanted to ensure continous user testing throughout the project to understand how our target audience would make a decision on which practice management software to choose from.






Strategic Focus



Content

Perform a content audit,  restructuring and component-base website development to better support marketing and SEO goals.
Navigation

Address website way-finding with our ideal target audience in mind to improve prospect task completion and lead conversion.
Brand and Design System

Audit and update our brand to better demonstrate Clio's value
proposition on the market and facilitate further website scalability.






User Insights 


During the project we got direct feedback from customers and Clio Consultants. From these conversations we had a couple valuable insights:
• A lot of practice management software looks similar, so it was important to showcase the value Clio brings to lawyers on banner images, more than a simple product screenshot.
• The original header menu was designed with a focus revolving around solutions: manage my work, my clients, my practice. After user feedback, we discovered they weren't as important as knowing our actual offered products or firm size. Prospects wanted to learn right away that Clio catered to their company size, so we decided to add it to the solutions tab, and used UI to focus hierarchy on that versus the practice areas. Practice areas werent as important as others, since a lot of lawyers practice in more than one specialization. 











Not forgetting Clio's customers


Even though prospects were our priority target audience, it was important to take into consideration Clio's customers as well. Since Clio's product was browser based only, they often would go to clio.com to log into their accounts. So we tested a couple of flows: using the login button to take them to the next page, or surfacing the two products right away. We went with the latter since it involved less clicks for our customers and we wanted to ensure the new website didn't affect their usability.

Another reason why Clio's customers browse through the website was to look at the numerous thought leadership resources the company offers. Therefore, it was important to surface the most important resources, including their podcast, yearly conference and most relevant blog posts.




Results


After 3 months of the new website, we saw an 18% conversion increase on clio.com.

Our design components allowed the team to build new pages more efficiently. A couple months later we redesigned the careers and leadership pages. Time was greatly reduced on design and engineering sides.

Amplify 2020

Completed in 2020

Designing a seamless online experience for Thinkific's biggest online summit.




UX and Visual Designer
Other designer on the project: Alex Harris





Process


Since this was the first time we designed a complete summit website, I started with defining the site map on the drawing board. This involved multiple iterations and conversations with the main project stakeholders. After we got an overall understanding of the user flow, I started sketching some wireframes. It was important to understand the limitations of the client and the project: they wanted to use Unbounce so the main marketing team stakeholders could easily login and make changes to the content.  






Results


Based on previous summits, the goal was to convert about 1% of the registrants to paid accounts. We converted over 9% to free account, and 2% to paid account. The overall convertion rate of the homepage was over 40% from visitor to participant. It is hard to benchmark this last data against something else, since this was the first time we actually built an ecosystem for our summits, and conversion was split through multiple pages. However, considering the 2x increase on conversion from registrants to paid account, we believed the new web experience better delivered the value of the summit and therefore the quality of registrants was high. We continued to use this approach on our summits ever since.




Learnings


The stakeholders wanted a way to interact with the audience during the summit. Even though the talks were pre-recorded, we decided to build the live experience by embedding a YouTube live window + ChatRoll into an Unbounce landing page. We thought that we would be able to switch between variants instantly, which was not the case, since Unbounce landing pages have a delay on updating changes. This was remedied by the live chat since we could connect directly with the audience, even through glitches like that. To top if off, having an actual livestream in between the pre-recorded talks may have helped boost our conversion as the team was able to address questions from the audience live.

For the event that happenned in 2021, we decided to do an audit on the previous experience and to look into a new tool that would support us to build a better experience for our attendees. This would also ensure participants were engaged with the content throughout the entirety of the event. After researching multiple tools, we decided to go ahead with Bizzabo. It allowed us to
adjust the experience for prospects & attendees, like being able to create a schedule that allows each talk to be saved directly by the attendants, having an uninterrupted live stream and chat, while also offering a community feature for attendants to network. 




Mark

Clio Con 2019 - Brand

Completed in 2019

Designing an extraordinary conference experience for lawyers interested in modernizing their practice with the industry's leading legal software.




Lead Designer and Art Direction

Other designer on the project: Kate Kim
Make Today Matter artwork by Tierney Milne

Clio highly invests in branding for their annual conference. Branding is a way of not only differentiating themselves from the competitors but also a way to build trust with their customers. One of the goals of the conference is to establish Clio as thought leaders on the legal industry.

The Clio Cloud Conference is Clio's legal tech conference. With the intent to connect the old fashioned law industry with modern insights, Clio Con is one of the biggest legal conferences in the US.





Imagery


The theme for 2019's conference was Thrive. "To thrive is to live up to your full potential, and feeling good about yourself while you’re doing it." The imagery and brand are intended to evoke a feeling of success and growth.

Below you will find some imagery that served as inspiration for the Clio's brand. It was really important to keep the organic elements and evoke a SoCal feel with the visual execution of it.




Banners


Take your practice from one point to another.
Growing in a healthy way.
Accelerating your growth.

These were the concepts that were top of mind while creating these banners. I worked closely with the content team to ensure the banners were telling the story we intended with the original theme.

Since I had not been to the hotel, I studied photos and videos of the location, printed out the map of the hotel, and drew paths to visualize how the attendees would walk through the hotel and understand the space and the experience of being at the conference. 



















Mark

Clio Con 2019 - Website

Completed in 2019

The Clio Cloud Conference is Clio's legal tech conference. With the intent to connect the old fashioned law industry with modern insights, Clio Con is one of the biggest legal conferences in the US.




Lead UI Designer


In early 2019, the website was still branded with 2018 look, it felt outdated and created a gap between what potential attendees would see on emails, ads and campaigns and what they'd see once they landed on the page. In an effort to improve their experience and avoid users bouncing out of the page, we updated the website to reflect the 2019 brand and experience.

With the goal of making the website resonate both with attendees but also exhibitors (which are also a big portion of revenue at the conference), we made sure to improve the previous iteration of the website into something that would deliver more value props to these two main target audiences.





Homepage


For the homepage, it was important to showcase the video that loops on the header background showcasing some of the conference highlights.

One of Clio Con's biggest strengths is the social proof aspect. Many attendees love the conference, they post about it on social media and often return for the following year. Our goal was definetly to tap into this throughout the entire website. It can be seen in multiple instances on the homepage specifically: there are quotes from media sources and a component block that highlights the twitter feed, which is quite active during Clio Con.

Due to a very quick turnaround, the entire website was built with components that were reused throughout multiple pages, making it easier for developers to finish their part of the work quickly and efficiently.





Location


As it's common in many conferences, the hotel and location are  important value props to get attendees to the conference. In Clio Con's case, the hotel is also a big aspect of the conference's revenue. It was important to highlight these two on the final version of cliocloudconference.com






Sponsorship


With an increase demand of sponsorship spots every year, one of the focus of this project was to highlight some benefits into sponsoring the conference. We added the three main value props for sponsors, along with a grid that showcased other important information that would streamline selection of sponsors and would therefore, enhance the process of acquiring new conference sponsorship. 


Mark

Want to chat? Get in touch.

© Copyright 2021 Thaira Bouhid