FAQs

This is how we show popular questions to our members

How we design them

  • Keep copy short
  • Start each line with a capital letter (unless it’s a branded term like “giffgaff”)
  • Always end the FAQs with a link to the general site FAQs, in case the reader’s question wasn’t answered

Why we do this

FAQs increase uplift in goodybag purchases

When members use the “Need help” tool on the /buy/goodybag page things go a bit awry and the conversion rate’s lower. So, we had a big think and decided that by removing the data calculator link and adding an FAQ to the page we might be able to up our goodybag sales.

Results: Turns out that having the FAQ as a link rather than a redirect to the calculator leads to a whole 1% increase in goodybag purchases. Nice one.

FAQs increase uplift in port-in

Transferring your phone number to giffgaff means you’re much more likely to stick around but only a small percentage of members actually do it. So it seems likely that if we make number transferring a touch easier we’ll keep hold of members for a tad longer. To do this we decided to add some easy-to-follow FAQs on the relevant page.

Results: We’re on a roll. The test revealed a 3% uplift in successful number transfer after the FAQ was added.

How we use them

Apply the class gg-c-faq-summary to the <dl> tag.

Use gg-c-faq-summary__q classes to apply the question styling to the <dt> tag, and use gg-c-faq-summary__a to apply the answer styling to the <dd> tag.

If using links, please remember to add the gg-c-faq-summary__link class to them to bring in the necessary styling.

FAQ Summary

Use this when you only have a few FAQs to show or your FAQ answers are all quite short.

View demo Open in new window
Open in new window
320 x 568
View code 
    <dl class="gg-c-faq-summary">
  <dt class="gg-c-faq-summary__q">How can I track my delivery?</dt>
  <dd class="gg-c-faq-summary__a">
    Your phone is being delivered by UKMail. Once it's on its way, you'll be
    sent a tracking number which can be used to track your delivery.
    <a href="#" class="gg-c-faq-summary__link">More&nbsp;info&nbsp;here.</a>
  </dd>
  <dt class="gg-c-faq-summary__q">
    I have a question who do I contact?
  </dt>
  <dd class="gg-c-faq-summary__a">
    Please contact us directly at
    <a href="#" class="gg-c-faq-summary__link">contactus@example.com</a>
  </dd>
  <dt class="gg-c-faq-summary__q">Here's something useful you might need to know</dt>
  <dd class="gg-c-faq-summary__a">
    Chuffed. goodybags. Our super helpful members are available to offer support around the clock. We have members, not customers. We're chuffed to be uSwitch Network of the Year.
  </dd>
  <dt class="gg-c-faq-summary__q">Any other questions?</dt>
  <dd class="gg-c-faq-summary__a">
    <a href="#" class="gg-c-faq-summary__link">Have a look at our FAQs.</a>
  </dd>
</dl>

FAQs

Use this when you have a lot FAQs to show or your FAQ answers are all long.

View demo Open in new window
Open in new window
320 x 568
View code 
    <ul class="gg-c-faqs">
  <li class="gg-c-faqs__item">
    <details class="gg-c-faqs__faq">
      <summary class="gg-c-faqs__q">
        <span class="gg-c-faqs__icon"></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</summary>
      <div class="gg-c-faqs__a">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </div>
    </details>
  </li>
  <li class="gg-c-faqs__item">
    <details class="gg-c-faqs__faq">
      <summary class="gg-c-faqs__q"><span class="gg-c-faqs__icon"></span>Sed do eiusmod tempor incididunt ut</summary>
      <div class="gg-c-faqs__a">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </div>
    </details>
  </li>
  <li class="gg-c-faqs__item">
    <details class="gg-c-faqs__faq">
      <summary class="gg-c-faqs__q"><span class="gg-c-faqs__icon"></span>Adipisicing elit, sed do eiusmod tempor</summary>
      <div class="gg-c-faqs__a">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </div>
    </details>
  </li>
  <li class="gg-c-faqs__item">
    <details class="gg-c-faqs__faq">
      <summary class="gg-c-faqs__q"><span class="gg-c-faqs__icon"></span>Labore et dolore magna</summary>
      <div class="gg-c-faqs__a">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </div>
    </details>
  </li>
  <li class="gg-c-faqs__item">
    <details class="gg-c-faqs__faq">
      <summary class="gg-c-faqs__q"><span class="gg-c-faqs__icon"></span>Ut enim ad minim veniam</summary>
      <div class="gg-c-faqs__a">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </div>
    </details>
  </li>
</ul>