Before we delve into the case study, here’s what Brian Richards, the founder of WP Sessions had to say after I submitted the final designs…
Introduction
I published the article “Rethinking plain member area dashboards” on my blog which got quite a good response on Twitter. Brian Richards from WP Sessions loved this and reached out to me to discuss the WP Sessions redesign he was planning. Brian is also known for organizing popular online events such as WP Sesh, WooSesh, and Loop Conf.
Let me just start out by saying that this was one of the most fun projects to work on and Brian was an ideal client.
The very first email he sent me was friendly and laid out what he wanted in detail. We got on a call and discussed this project. Some quick formalities and we started the redesign.
The Problem
WP Sessions sells membership where users can get access to all the videos of the current and past events from different events. Such as WP Sesh, Woo Sesh, and Loop Conf. Plus, a few detailed courses on Web Design and WordPress. All in all over 300 videos.
Brian instructed me to look at the Member Area first and that’s where he wanted me to start. But I was focused on the “selling” part of the business and wanted to focus on what could increase the revenue first. Also, for the member area, I thought “how bad it could be?” But boy was I wrong! The member area dashboard was using the default state – whatever was provided by WooCommerce. And it was simply a list of links to all the videos.
We both had a chuckle out of it.
Also, the visual design of the overall site looked dated and it certainly needed a “fresh coat of paint”. Brian already had best practices for checkout and other pages in place so we had very little to work on there.
So Member Area redesign is where I started.
Process
Research
Since I wanted to turn the list of videos into a full catalog, I started my research with Youtube, Vimeo, and other video sites. Then I looked at Udemy etc. online education sites. Then looked at other sites that may have a catalog design. This included over 50 popular sites such as Creative Market, ThemeForest, Amazon, Shopify Theme Store, App Sumo, Upwork, etc.
Basically, anything that resembled an online catalog, I looked at them and collected ideas into a mood board.
Challenge: We had over 300 videos in the member area. Which is quite a lot! But depending on the kind of design you chose, the options could run out very quickly and make it look like a site with just a few videos. So I needed to make it easy for the users to navigate. At the same time, avoid multi-level filters. Instead, I offered categories, tags, and blocks.
Wireframes
For videos, I followed the pattern which users are already familiar with – Youtube! Along with this, I brainstormed different use cases and decided to not fix the design but keep it “widget” or “block” based. This will help us rearrange the sections as necessary during different times and events of the year.
Eureka! Netflix of WordPress
My job was to just redesign the member area. And improve the design of landing pages.
While I was designing this I was thinking about how we can improve the revenue for this business via design. So this included two things – content visibility and SEO.
On the homepage, we were telling the users all about “how nice the inside of the member area is”. But we were not actually showing any of the videos before the members pay. This also was working negatively for the SEO. We had over 300 videos, content, and transcript. But all of this was behind the paywall.
Instead, I had a eureka moment where I proposed “What if we only ask for the payment when the user actually tries to play or download the video?” This looks like a no-brainer now but it wasn’t so obvious earlier. Brian loved the idea and I came up with a wireframe where before and after the user login would look almost the same except for some sections.
Solution
Netflix of WordPress!
So this new approach we took will change the way users bought the membership. The users will see everything they get inside the member area right away. Be able to browse the entire catalog, speakers, and other content.
In a way, we turned this into Netflix of WordPress.
What started as a member area redesign, now became the theme of the entire site and acted as a landing page both for members and non-members.
Different blocks on the catalog gave a nice touch to the overall design.
The inner pages followed the same theme and we were able to create meaningful inner pages such as categories, speakers catalog, speaker page, etc.
And I incorporated best conversion rate practices wherever necessary.
The “content-gate” concept was designed so as not to interrupt the user unless the real value was provided.
Other wins
Visual Design
Along with the catalog version of the redesign, we redesigned the existing sales pages, landing pages, and other important pages such as blog posts, etc.
Even though we will use the catalog version as the primary page, for paid ads and other special campaigns, a dedicated landing page was necessary. And that is where these designs would be handy.
“Blocks”
Instead of going with a fixed design, we selected a “blocks” based design. This will allow lots of flexibility in the future and the homepage could always show what is in trend. For example, a large number of clients arrive from WooSesh and WordSesh conferences Brian organizes. At the time of the ongoing event, relevant video blocks of current and past events could be highlighted on the homepage.
Design decision matters
Some design decisions are not so obvious but could make or break your project. I have always believed in designing practical design. Design only what could really go live!
In this project, I needed to design a speaker page where the photo, a short bio of the speaker, and relevant videos were to be shown. Now, I could select a nice photo from one of the most popular speakers and Photoshop it to make the page look absolutely gorgeous.
Instead, I went with a boring “circular photo” design for the speaker. Here’s why…
Tech people are usually camera shy. And most of the time, they have merely 1 DP that they use for years (me included!). Getting a high-resolution photo of all 300 speakers, that too from a specific angle would be nearly impossible. And quite a fruitless job even if we were able to collect it. Imagine the time this small design decision could save!
Mobile-first version
It was expected that since this is primarily a video site, users would use this site on mobile as well. And instead of making it merely a responsive site, I designed it a “mobile-first”, app-like design.
I wrote an article on this topic earlier [Optimizing Mobile UX for a high-ticket landing page] and we followed our own advice on this project. Seeing the designs on actual mobile devices helped us optimize the designs a lot.
SEO growth
This catalog version of the redesign will not only let the users see the value they get but with SEO-optimized titles and transcripts of over 300 videos should also bring in lots of organic traffic for the website in the coming days. Ultimately, this should result in more discoverability and more sales for the business.
Misc.
Along with the catalog pages and landing pages, we also designed other important pages such as the pricing page, checkout page, and… that member area as well. However, the member area now had very little importance in this new version so we went with a simple yet better UX.
Design system
A design system was created to work as a guide during the coding phase and future usage.
We used Figma to design and collaborate on this entire project.
For typography, I insisted on special typefaces such as DM Serif Text and DM Sans instead of using the system default. Especially because the default fonts on Windows don’t look as appealing as on other OS and devices.
Result
What started as a “member area redesign” and “visual redesign”, turned out into a change of decision on how WP Sessions was doing business. Both me and Brian consider it to be a major win for this project. I am happy we were able to achieve a “result-oriented design solution” for this business.
As mentioned in the video at the beginning of this case study, here’s what Brian has to say about this…
“When Bhavesh says he is interested in result focused design solutions, he is not kidding. And I suggest you take him seriously.
I at his portfolio and I was blown away with what I saw because of the part of the projects he chose to highlight and focus on in the portfolio. Which were the business outcomes of the redesign and redevelopment effort that he worked with each of his clients.
In 2 decades of working with designers I can count on one hand the number of times that I’ve worked with a designer who understood the business needs of the design project.
Yes its great to get a new UI, yes its great to deliver a better customer experience but most important is that the new design serves the customers needs and the business goals and if you are missing either of those ingredients its just a fresh coat of paint and it doesn’t really matter. Bhavesh understands this implicitly and it was an absolute pleasure to work with him on my project.
I was thinking through some of the different aspects that I wanted to focus on in the design he was kind enough to entertain my ideas and then politely tell me why I was wrong and why we should instead focus on the customers goals. And what the are trying to accomplish in the different scenarios that we were exploring with all of the different layout that we needed to run my website.
So if you are on the fence if you are shopping around looking for designers I am just gonna save you a ton of time right now and tell you to hire Bhavesh. You are welcome. You are going to have a great time and you are going to get a great experience on the other end.”
– Brian Richards,
See Video Testimonial
Founder of WP Sessions.com, WordSesh, WooSesh and MicroConf
Takeaways
If you are a designer or a business owner, here are some takeaways and learning that you might find useful.
- The project started great. And I was coming up with all these different design ideas. Over enthusiastically, I presented brian with 5 different design options. This was actually a bad decision because it ended up confusing him and delaying the project. As a designer, it is our duty to take the decision and offer the best solution to the client. “Decisions, not options.”
- “Think out of the box”. This might sound cliche but I ended up doing totally different than what I was hired for. In redesigning the member area, I thought about helping the business. This helped us come up with the “catalog mode” for the main site. Which turned the site into “The Netflix of WordPress”. Had I taken this just as a “task” or a “job”, this wouldn’t have been possible.
- For mobile versions, we designed app-like versions on the desktop. But when we actually saw the design in real mobile devices, things looked different. The typography looked too small. Clickable areas looked too tiny etc. Experiencing the designs in the real device helped us keep things real.
- Create practical designs. As creative designers, we can make even the boring things look awesome and “dribble-ready”. Sure it could get lots of likes. But could that design go live? Think about the end users and keep it real.
- Most of the time, I start my designs with wireframes. This project helped me iterate the ideas a lot instead of wasting time on concepts that would eventually get rejected.
- Use the power of Figma. Using components, defining a style guide, auto-layout and grid helped us save a lot of time and experiment with different design styles and structures throughout the project. This is a very handy skill that keeps on giving. Spend some time mastering this.
Hope you loved this case study and maybe learned a thing or two. Does your business need design help? Reach out using the contact form on this site and let’s talk.