Web Design Swipe File

Swipe specific sections

Hero section elements

Double visual

Voucherify uses examples of the product as a visual-a hero section visual you’ll see pretty often. 

The interesting thing is that it converts into a video when you click it.

This way, you cater to people who want a quick idea as well as people who want more detail.

Glia uses a video to show what they are capable of. 

I especially like the progress tracker at the bottom with three features.

The caption also changes every time a new part of the video starts.

Video sections

Social proof ideas

Specific social proof

ConvertKit social proof

ConvertKit uses a mix of social proof to show how popular their tool is. 

  • a specific number of users
  • a specific result: how many fans they reach
  • famous users

Fellow‘s testimonial stands out because it gives lots of information:

  • quote
  • name
  • photo
  • job title
  • company

Moreover, highlighting the text helps skimmers.

Eye-catching Testimonial

Simple Testimonial

Hone‘s testimonial is almost the same as Fellow’s.

The design is a bit more low-key making the copy stand out more.

I would add his job title.

If you have a video testimonial, make it look like Hone‘s.

The design is neat, and it offers a written highlight or summary for people who aren’t interested in watching the full video. Bravo.

Great Video Testimonial

Mini testimonials

Sleeknote‘s wall of mini testimonials is a great way to display how many happy clients they have.

I also love how they incorporated case studies. 

A lot of focus on reviews and I love it.

Triple Reviews

Honest reviews

Lemonade displays its superior rating with a funny twist. It doesn’t always have to be complicated.

FranShares uses a sticky bar at the bottom of the page to show some impressive numbers.

It’s a great idea if you want to put social proof front and centre. You can include any social proof you want. 

Sticky social proof

In your face social proof

Brex spreads it social proof across the landing page with three of these huge testimonials. 

They’re very easy to notice and I love that they link to a case study. Testimonials backed up by a case study have much more credibility.

Call to action ideas

Summary in the CTA

Maven cta 2

Maven uses a CTA that’s visually attractive and summarises the main info of the course. 

The first one is easier to read, and the colour stands out more. “Join Today” is more inviting than “Apply today”.

“Get reimbursed by your employer” is a great link because the price might be a stumbling block for many.

Finally, I love how they use cohort numbers. It gives the course more credibility.  

Paymentcloud displays their phone number in the top right corner (cta position).

They reduce friction by showing the waiting time and the number of online agents.

The number of agents varies, so it feels real. (I wonder if it is, though…)

Reduce friction

Personal CTA

Sleeknote adds a very personal touch to the demo button. I like it because demo feels very corporate. Sleeknote has made it human.

Customer profile ideas

No-nonsense customer profile

Modern treasury use cases

Perhaps not the most attracting design, but Modern Treasury‘s customer profile answers a lot of questions thanks to packing many elements in one design:

  • how they help
  • testimonial
  • use cases
  • clients

Stripe‘s customer profile is more result-based. It shows

  • which companies use Stripe
  • how they benefit
  • what products they use
  • A case study

Inviting customer profile

Clean customer profile

Design doesn’t have to be fancy. This clean section on Semonto‘s website has all it needs: clear customer profiles, three bullet points with specific information for each, screenshots and a link to the landing page for each profile.

Process ideas

Clean process

Voucherify uses this clean design to display how their software works.

It doesn’t take up a lot of website real estate, it’s visually attractive and it’s clear. 

The only thing missing is the result of the process. That would make the idea stronger.

Pricing ideas

Clean process

Pricing is difficult to get right. While I don’t like Ahrefs‘ design and colour scheme, this pricing section is pretty good because it’s clear.

I especially like how they incentivise annual plans.