Skip to content

Instantly share code, notes, and snippets.

@outrunthewolf
Last active October 4, 2017 12:22
Show Gist options
  • Save outrunthewolf/0404a49c76009403a6c49fcc78f0b512 to your computer and use it in GitHub Desktop.
Save outrunthewolf/0404a49c76009403a6c49fcc78f0b512 to your computer and use it in GitHub Desktop.
Twilio Homepage Breakdown

Twilio: Breakdown

I'm going to try and break down the twilio homepage into my thoughts.

I can't defintively say it excels in places, or fails in places, as its purely my opinion. I can however comment on aspects of it, in the hope we can glean some helpful information from it.

Why Twilio?

  • Twilio is primarily a developer tool.
  • Twilio has been and still is incredibly and successfully focused towards the developer in its messaging.
  • Twilio has time tested experience.
  • Twilio is the company we might look to become in the future, rather than a company we would imitate in the now.
  • Twilio has class.

Why the homepage?

The homepage is the online "shop front" of your business. Its the first thing people see, and experience. Its the single most important part of your business for the newest users.

It's also where you want to get your messaging across quickly, and so will have the most time spent on it, and include the most critical points of your sale.

Lets Begin

I'll try to break this analysis down into tangible groups.

  • Style: Overall look and feel.
  • Content: What content and where it is positioned.
  • Communication: The language it uses and how it communicates with the user.

Style

Palette:

  • Very crisp clean lines.
  • Very few curves.
  • Bold crisp text.
  • Lots of bright light text on dark background, and vice versa.
  • Simple with a single bold accenture (Homepage animation/video)

Overall I like it. Looks dependable and solid.

Something I talk about internally a great deal is the analogy of the "Marble Tree".

Marble trees are honed, not grown, stay perfect forever, do not change. The Twilio site is A marble tree. Symetrical, clean, straight, beautiful but not organic, solid.

The balance is centred, again, symettricity rules here.

The logo is simple, bold, stark white against a dark background.

Movements are quick, colour highlights are bright LED's, electronic, binary, on or off.

The page is a circuit board.

Content

I would say there are between 8 and 10 major blocks on the homepage.

  • Sendgrid comes in between 6 and 8 blocks.
  • Moltin falls in between 8 and 10 blocks.

Build software that communicates with everyone in the world.

The page starts with a bold opening statement. Followed immediately by a call to action. Get a free API Key.

A product announement follows. This must be important, it is before the page fold. The fastest way to build with twilio.

The 3 product blocks take a subset of twilio products and highlight them briefly. Perhaps their most high performing products?

Underneath this we see a full list of their API suite and brief overview in popups.

A single stand-out quote highlights how Twilio are helping a big customer.

Simple, powerful API

Add messaging, voice, video and authentication in your software with the programming language you already use.

A distinct statement of what they can do with their API is followed by simple examples of code across multiple languages.

A pricing block gives you an immediate understanding of what this would cost you. Including links to how you could find out more.

A simple logo block shows who is already using twilio. They're backing up their offering with the weight of some of the greatest companies. But more than that, they mix large-scale enterprise logos, with cool developer offerings like Netflix, box, Twitch.

Ready to get started? They ask. Sign up and start building Call to action. "Start Building"... An important statement.

Not ready yet? Talk to an expert There is ample opportunity throughout the site to contact someone, and get help.

We can’t wait to see what you build. Lovely ending statement.

The footer is the phonebook of the website.

Communication

I feel like the page breaks down into the following:

  • What you will do with Twilio. Build software that communicates with everyone in the world.
  • What will Twilio do for you. Programmable Voice... SMS... Trunking... etc...
  • What has Twilio done for others. We are excited to leverage Twilio’s API technology to further enhance the Morgan Stanley client experience.
  • How you will do it. Simple, powerful API

...software that communicates...

Software that communicates with humans is a very hard thing to do, but Twilio states that you will do it with them.

...with everyone in the world.

Twilio will give you the tools to communicate with everyone! They're not limiting you, you're limited by yourself only.

There are no questions. There are statements of power. You will build software that communicates with the world.


The same words are repeated over again, build, api, software, programmeable.

Its very clear this is a technical site. But its light on the technical jargon, it focuses on the product and what you can do with it.

The titles of their products are simple. Does what it says on the tin.

  • Programmeable Voice
  • Programmeable SMS
  • Phone Numbers
  • etc...

They don't hide behind jargon. They re-inforce the Simple, powerful API.

Pay-as-you-go pricing Is a simple and understandable model. Pay for what you use.


Ready to get started?, Sign up and start building. Ready? To get started building communication software that talks to everyone in the world? Simple as that right? As soon as you sign up you can build. <--- I'm joking around here, but you see how that mesaging comse across. If I was asked to implement SMS messaging into an application 5 years ago without twilio... I would have probably been paralysed with fear.

There are a ton of examples like this. instantly, instant, orchaestrate, etc...

Check out all Twilio APIs

Informal, Check it out... Not a formal phrase.

We can’t wait to see what you build. They talk directly to you, informally.

The site is professional and clean, but they talk to you in an informal manner. Bizarre!


Not ready yet? Talk to an expert, QUESTIONS? TALK TO AN EXPERT.

You don't talk to the team, or talk to sales, you talk to an expert.

You're here because you're smart, so you deserve to talk to someone your equal.

You're also here because Twilio is smart, everyone at twilio is an expert. You're in good hands.

@DamianKidd
Copy link

Twilio may do its job well. But from a design perspective it is not well done.

All the elements appear squashed and the menu is a total eyesore. And really hard to navigate.

The nice thing is the communication, the writing is clear and concise. Its clean and tidy, the code example is great.

They have a very limited colour palette which instills a very strong brand.

@outrunthewolf
Copy link
Author

outrunthewolf commented Oct 2, 2017

screen shot 2017-10-02 at 14 31 20

Twilio Colour Palette

@outrunthewolf
Copy link
Author

Purely my opinion, but I disagree with this statement:

All the elements appear squashed and the menu is a total eyesore. And really hard to navigate.

I'll explain why.

All the elements appear squashed

I feel like they are tight. I mean tight like, a well rolled cigarette. Just right.

  • No large areas of whitespace to navigate
  • Good even spacing between elements
  • Main content text, perfect size. (About the same as a document, 10? 11?)
  • Nice even mix of font types. Not too much.

the menu is a total eyesore. And really hard to navigate.

The menu is beautiful:

  • 4 Very specific, very key links. (Docs, sign up, login, help) Paired down. Tight. Simple.
  • Simple text and icons
  • Bold enough to be visible if needed
  • But can still recede into the background when your eye moves elswhere.

The super menu:

  • A thing of beauty.
  • Feels like you're peeling back an expensive suit and seeing the floral lining inside.
  • Or the velvet within an expensive box of chocolates.
  • Takes up EXACTLY my screen dimensions! Perfect, on purpose perhaps?
  • There's a reason the National Socialist flag was Red, Black, and white. Very striking/powerful colour combination.
  • Breaks down the structure very well for me... Product, Engagement, Use Cases...
  • Does not hide things in dropdowns

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment