As Inedo's sole visual designer, I design, code, and maintain a large majority of inedo.com, you can view the full live site here.
This was the design of Inedo's new training video section of the website, which I designed, coded and deployed in less than a week, You can view the live mini-site here.
Brief
In Q4, 2018 Inedo hosted a seminar/ lunch n’ learn.
Inedo wanted to take the master video and cut it into short takes that could be published publicly. They then wanted to maximize views on these short takes specifically highlighting that this is “more than just a seminar” but in fact an example of their training product that users can purchase for their teams remote, or onsite, and for all products.
Sub-Project: Cutting videos and uploading to Youtube
I cut the full seminar into short takes, included Inedo's animated intro for each video, and edited the videos for clarity. You can see the playlist of all the short cuts here.
Designing the Pages
I included an edited version of the transcript of each video, and also embeded the video at the top to give them the option to watch the video or read the full transcript. The copy utilizes screen-grabs of the actual video, graphics already on the site, and made-for-the-page graphics.
I also included a large CTA section at the bottom of the page linking to the training courses and the gated full seminar page.
Why I included the transcript section:
Often, people may not want to watch a video while at work, sitting in a coffee shop, riding the train, etc. and want to be able to consume the content by reading it. This gives them the opportunity to still get the information in front of them, so they can see the value of what they could get out of training. If they start reading, and decide they want to watch, having the video embeded at the top gives them the option to watch it if they like.
The Gated Seminar Page
The gated training page has all the benefits above the fold, as well as a short "trailer" of the training. If a user wants more information they can scroll down for the seminar details.
I put a button above the fold that will scroll them down to the form when they're ready to sign up to watch. I chose to put the actual form below the fold so as not to distract the user from the "benefits of the video" content.
There is a CTA section in the middle of the page directing users to the training courses, and a training contact form. Though it seems counter intuitive to include a CTA on a gated content piece, Inedo wanted it there since the goal of these videos is to encourage the purchase of our training. I kept it a muted blue so it didn't draw attention away from the "register to watch the full seminar" button, but the section is there if a user is ready to take next steps.