How to communicate a 3 step process clearly and concisely?

by

I have the following section in our website, and now when I look at it, I feel it looks unprofessional, and a bit unclear.

I tried to break the “How It Works” section into 3, with the second section highlighted only for stylistic purposes (not that it’s important than other section).

I figure this site is mainly about design, so I will try to stick to that, but if you feel certain paragraphs could be reworded, kindly advise.
enter image description here

If anyone requires additional clarification, let me know!

Thanks for all of the feedback kindly provided, have a look at the revision, and please let me know
enter image description here

UPDATE 3
enter image description here

UPDATE 4
enter image description here

UPDATE 5
enter image description here

Answer

Less is more

  • Remove tiny icons from paragraphs.
  • Shorten space between first and second paragraphs in each column (by about half).
  • Remove the color highlight in center column — If you want to separate by color blocks, use three different colors. But I’d suggest simply using one, and letting white space divide them.

Stay consistent

  • Make headlines similar lengths across columns — take up one line or two; not both.
  • Make paragraphs similar lengths across columns.
  • Make the numbers inside circles be the same point size as headlines, and probably bold the numbers.
  • Use consistent margins.
  • [Copywriting] Use consistent voice and tone.

Example

Mockup of 3 sections

Attribution
Source : Link , Question Author : jon220 , Answer Author : Paul Shryock

Leave a Comment