[Blog] Portfolio - Fred's Oral Prep launched the damn thing!

So I'm going to walk you through a couple of the really neat features that we've got going on.

And there's a lot of neat animations and movement on this site that you just can't see screenshots.

So, first and foremost, Fred's World Predator.

Yes, they know how that sounds.

I know how that sounds.

And they actually don't care.

Which is one of the reasons why I wanted to work with Emma and Fred.

They are the coolest, most hip piece people that you might ever meet.

they were dubbed Fres or by the students and they just went out of it.

They actually do have a medical name.

so basically they provide education for super yacht deck crews to pass their oral examination, which apparently has a very high failure rate.

but not if you take their exam.

So, I think their pass rate is near 100% and, and they've taught hundreds of students at this point over the years and they have a very good reputation in the industry.

So it was really fun to work with them.

We actually migrated from 7.0 to 7.1 in span of about two and a half weeks.

Two weeks with a little spillover and there was about 30 pages.

So this is a pretty big site.

Let's just start going through it.

So a couple of things that we've got going on here is a liquid effect on the background just to give it kind of a dreamy, watery kind of feel and how it fit with the industry really well.

They also have a fun button effect.

So when you click down on a button, the shadow disappears.

we also have a couple of mega menus right here because just require so much organization and so many different links that it really just needed more than a standard drop down.

So we have images here that are also buttons and that works for the online and the immersive.

So this immersive is the in person.

Currently they are winterized due to Covid, so they are not currently clickable.

And the cool thing is that Emma and Fred can control this and manage this themselves.

So of course you have hover effects on the images so that people know when they're hovering over the button and the same thing on the link.

We got the links organized into info and types of events.

All the information will be a link to decide which course works best for them and links to the Apple apps, and the bug report.

There's also a micro menu for the libraries because they have a blog, a video library, photo libraries and various things.

And of course they want to draw attention to the videos, the login button actually links to an external site where they have their web app and it goes right to my wallet.

As you scroll down, it actually scrolls sideways to get your attention one more time.

Put your eyes on the online courses and show you what the comparison actually looks like.

Working with Fred.

So then, Fred pointing to why the exam exists.

And we've got some, innovation moving around.

Back in the background, we've got the link to the photo gallery so that you can see the wall of fame, which is really cool.

some pull quotes from past students and a link to that.

And as you can see as you scroll around, there's awesome.

So it's very clear that Fred is not the standard, teacher that one might expect.

The students seem to love him, do really well with him as a teacher.

So as we get down to the navigation, again, we have a lot of links to navigate, so we've separated things into navigate and investigate.

And we've got all of the mailings down here.

If we scroll back up to the top the online courses, it gives you the option to buy up front.

Then we also have a description of what comes inside the course with lots of movement, lots of videos, lots of content, student reviews, the study checklist and a gallery.

As you can see, just a handful of some of the wallet members.

And these are all students that have passed.

They're holding up their passive certificates, more information.

And that's the same for both versions of the online course.

We also have the pricing and we're using the squarekicker plugin to do the split screen and a bunch of other stuff, wider buttons, styled text blocks so that this is very easy for them to come in and change prices as, needed.

We even created a table with a text block.

So the details, the price, everything in here is easily editable for the client side.

For the immersive, there's actually accommodations included, so you can take a look at those and then links to the app Store, what to expect if they need extra time.

The stats.

We've got this neat little animated thing where there's.

It's going to tell you approximately how many have graduated, how many have passed, how many have failed.

So that is a very long failure rate.

Obviously, working with Fred and Emma is very advantageous.

We've got a how it works and you can pick the journey from here.

So we've got this fun little video and, in the library we have a blog and we also have a subscriber YouTube channel.

So if that is clicked it actually someone to subscribe before they get.

Before they give me media actually get to the channel itself.

So that is pretty handy.

You can see categories here and then of course all of the posts.

But if one were to click on the video library, you actually have a summary block displaying all of the videos that are in the blog, but just by themselves.

And so if any of these are clicked on, got the video and the data.

And then another summary block displaying the rest of the videos so that someone can move around in here really easily.

Okay, for the wall of paint, we have separated by years, mostly because there were so many pictures that we just could literally could not put them all in one page.

So we have about 100 in each section.

And then if you get back to the tabs by clicking that, it scrolls back up.

You click on another here.

All of these are lightboxed so you can see the larger chart, so you can see the sheer amount of students that they have here.

and then what our students say is actually student reviews, so you can click through.

This is actually just another block collection, but I've styled entries so that they look individual and you can read what they say without having to click through.

And they've got lots of comments added to this all the time.

In the photos, there's photos of the app, some of the accommodations, some of the students, some of the online order, and there's also the accommodations so you can get an idea of what your stay might be like when they reopen the immersive course.

We also have a job listings area.

They're going to allow people to recruit through this.

and the information will be listed down here.

Then on the about page, you've got lots of square picker split screens going on so that we can fill up images, keep things interesting, but still explain how they started this business and how it became Fred Squirrel Prep from Fred Olsen Marine.

And yes, they know how it sounds.

On the Q and A.

We have some more tabs.

We've got this broken up into different sections, different types of things that people will ask.

We've got an events page with a style, accordion block.

This is a native in app feature of Squarespace, so there's lots to take a look at on this website.

I encourage you to take a look around yourself and check out all of the features.

This site actually launched in early January, so Citizen and Fred have been tweaking things and, maintaining the site themselves.

And they actually had two sales in the first 12 hours.

That is impressive and I am so happy for them and cannot say enough good things about working with them.