Atomize the welcome card
What I see now is a pitfall of being too verbose. While it is important to make every sentence count, presentation of the welcome card leaves a lot to desire.
Giant block of text almost looks like "Lorem ipsum" level of formality that I don't know who it's addressed to, actually. It fills the gaps, but fails to convey the message because it tries to glue together several sections into one.
Presentation
Outline
Let me digest this for a dear reader into an outline, some atomic view of the current welcome card.
- The Beginner’s Guide to Data Privacy & Cybersecurity
- Let's help you take back control of your data and personal privacy.
- Watch out for online habits that your acquaintance may have.
- ...
-
👀 using same bad passwords -
👀 oversharing personal information -
👀 taking risks with the internet
-
- It doesn't have to be that way.
- A solution doesn't have to be hard, either.
- ...
- How would you like to feel and be safe online again?
- Welcome to The New Oil!
- Here you can learn how to:
-
🛡 own your data, -
🛡 remedy mass surveillance, -
🛡 retain your identity, -
🛡 be safe from hacks.
-
- Conveniently, you do not need to be a tech expert to follow along.
- These skills are not necessary:
-
🙅 programming, -
🙅 system administration, -
🙅 operating networks, -
🙅 hacking.
-
- The only qualifications you need to tackle our advice are:
-
👌 downloading apps, -
👌 signing up for an email account, -
👌 understanding what a password is.
-
- These skills are not necessary:
- Once again, welcome to privacy made easy.
- (This may serve as a smooth transition to guide cards.)
Imagine every top-level item as a section. Some parts were modified or stripped out - please compare and see if it improves on existing work.
Proposed presentation
As you might have seen above, this outline really puts structure first and foremost. One might say, it's no less verbose than an original, because now we have a second (vertical) dimension for delivering sections separately. However, it's supposed to distribute the information evenly.
How do we make a bunch of sections into one screen? We don't. It's a counterintuitive design that's got a long way to reach any reader. Words need to make an impact, but oversaturation of words will cause nothing to be remembered. So, sections get their own "character", they are digestable "bites" so to speak.
OK, sections get more space and user can scroll, no problem, what now? Let the graphics tell the story first, text second. In fact, use both and let them complement one another to make a joint impact.
You see these emojis? They are indication of a real enumeration, which means that items don't need to be put vertically - just use a classic CSS grid for each of 4 enumerations (
While implementing this design, use your best of landing page pattern.
Proposed Prototype
Update! You can open a prototype on Penpot. It's my work-in-progress design and proof-of-concept. If you want, I can invite you to edit it together: hit me in Matrix.