Asked

Roast my product/concept/copywriting/etc: Digitally Well

Please tell me what I could improve on.

http://digitallywell.website

Thanks in advance!

First thing that I see:

  • website not secure
  • I instantly get a pop up to subscribe
  • by now i want to get away from this website asap… but okay I want to continue, i close the pop up!
  • first thing i see is another subscription question …
  • i quit
Screenshot 2019-07-07 at 14.44.37.png
remove

Thanks Robert!

  • I can't afford SSL right now, and my host does not support Let's Encrypt. I'll consider moving it into another host.
  • I'll remove the pop-up.
  • I'll add more content before asking the reader to subscribe.

what about: https://pages.github.com/ ?

I was hoping to go the no-code route with this project. πŸ˜‚ It's currently built using Wordpress. I actually have extra space for a website in another host I can install with free SSL (Namecheap), so it should be no problem. Thanks again!

I ended up using GitHub pages as you suggested. Thanks again for the tip!

you're welcome!

Not having a SSL is a dealbreaker for any site, imo. I would encourage you to prioritize SSL/HTTPS asap.

Will do. Thank you!

Website doesn't load. Chrome error message:

digitallywell.website’s server IP address could not be found.

I was in the process of pointing the domain to my GitHub Pages repository when you checked it. It should be up now. Please check again. Thanks!

Here is what I'm noticing:

  1. I didn't notice a popup.

  2. The leading headline "An online platform dedicated to helping your digital well-being." doesn't arouse any curiosity. Try something like "Did you see the color of his eyes? See, me neither."

  3. Rewrite the three bullet points, be precise (avoid being vague), and agitate pain points first, e.g.:

  • Nobody's talking to you, and you wonder why?
  • He looked at you but he only saw the back of your phone with a spongebob sticker. Your first impression went straight to the bin
  • She saw you and walked towards you, you got nervous and put your hands in the pockets to hide the tremble and luckily found your phone to hold on to. While you were busy with yourself she passed by and starting talking to someone else.
  1. Offer solutions, e.g.
  • Checking your phone without looking at the screen is a malformed habit. That's the bad the news. The good news is: You can change your bad habits and turn them into good habits. Even better: You can start today, actually right now. Here's the 3-step guide.
  • Technology is essential to our life and work. It's no longer work-life balance but tech-life balance. How much does tech affect your well-being? Is it too much? In a recent study by XZY, the team around Dr. X found out that…
  • The App Store is noisy. There are so many apps. How do you know which ones to try and which ones to ditch? Which apps make you healthier by sitting, calmer by being less anxious and more self-confident by not hiding behind the screen.
  1. Tidy up the page. It's a bit of a mess right now with elements that confuse my experience and too many call-to-actions (e.g. join the telegram group, subscribe, become a patreon, view archive, give feedback). You're confusing the visitor. What is the one thing you want him to do?

Attached is a screenshot how you could do it (I used the live HTML/CSS code no Photoshop or so):

Here is the copy I wrote:

  • Tech is part of your life but it shouldn't dominate you. Control your tech. Get tech-life balance.
  • Get/Join Digitally Well (and put your logo on the left on top of the photo - I only managed to put it to the right here with the live CSS in Safari)
  • Find harmony with technology.
  • Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.
  • The latest tech πŸ“±πŸ’», newest research πŸ—ž and healthy habits to improve πŸ’ͺ your life
  • Your best email for a better tech life / Your best email to subscribe
  • Get A Healthier Tech Life! / Get Digitally Well / Send me health! / Send me well-being! / Send me that!
http-::digitallywell.website-2019-07-08.png
remove

Oh wow thank you so much for putting so much effort into this! 😭 Will make all the changes you said. Thank you again!

My pleasure :) It's an important topic that I care about 😊

Thank you again! If you check it I used all the copy you made. Forever grateful. πŸ™ŒπŸ™Œ

:) For documentation purposes, here is a screenshot of the original page before you applied the amendments. It's important to see the before and after because it makes you appreciate the changes and progress you made.

http-::digitallywell.website-2019-07-08-original.png
remove

It looks better. You changed to top font and replaced the photo. Good steps :)

Some things are still off, according to how I’m seeing it in my browser, see attached screenshot.

02-http-::digitallywell.website-2019-07-08-amendments-applied.png
remove

Here are my suggestions (you can see the final result in the attached screenshot):

In the CSS comment out the background color even with an opacity of 0.3:

.call-to-action .overlay {
/background-color: #212529;/
}

You want maximum contrast. For reference, see β€žThe 100% Easy-2-Read Standardβ€œ by Oliver Reichenstein https://ia.net/topics/100e2r (a quick 5-minute read). Don’t be afraid to use higher font sizes.

Now get the text sorted. It looks a bit iffy right now.

h2 gets a font-size of 3rem…

.h2, h2 {
	font-size: 3rem;
}

…and a line-height of 1.4. h3 gets the same line-height and font-size of 2rem:

.h2, h2 {
	font-size: 2rem;
}

Make the overall line-height in the area a bit higher:

body {
	line-height: 1.6;
}

The paragraph (β€žEvery Friday you get the latestβ€¦β€œ) is placed within an h4 tag. Change it to tag (for semantic purposes):

<p "mb-4"="">Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.</p>

Then set the paragraph font size to 1.8 rem and adapt margins:

p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

Let’s adjust the padding of the .call-to-action section a little:

.call-to-action {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

It looks less β€žlost in (white) spaceβ€œ now.

The yellow links in the footer are calling for my attention although they shouldn’t at least not that strong. Let’s assign a new color to them and adjust their alignment a little.

footer a {
	color: #6C757D;
}

The hover color can be yellow:

footer a:hover {
	color: #FFF952; /*rgb(255, 249, 82)*/
}

We achieved now highlights where highlights are supposed to be. Yellow is your highlight color and the two buttons (GET DIGITALLY WELL and Get A Healthier Tech Life!) are your call-to-action leading to the same thing: newsletter subscription.

A bit more fine-tuning of the footer will be happening now.

footer.footer {
	font-weight: 300;
}

.small, small {
	/*font-size: 80%;*/
	/*font-weight: 400;*/
}

Now we adjust the alignment of the footer’s content:

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 65%;
		max-width: 50%;
	}
}

footer .row {
	width: 865px;
	margin: 0 auto;
}

The last thing is the input field and submit button.

Alternate the border color of the call-to-action button to a darker tone to benefit from a better contrast. Yellow on white is not optimal and the current border color is a bit too weak:

#mc_embed_signup input[type="submit"] {
	background: #343A40;
	border: 1px solid #343A40;
	border-bottom: 3px solid #343A40;
}

#mc_embed_signup input[type="email"] {
	border-bottom: 1px solid #6C757D;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

The input field for the email address now looks more minimalist which suits the overall design aesthetics of the site.

The input field can be wider as well. No need to limit it to 75%.

@media (min-width: 768px) {
	col-md-9 {	
	flex: 0 0 75%;
	/* max-width: 75%; */
}

I also centered the submit button by editing the HTML code (I changed the col-md-8 to col-md-10 and added margin: 0 auto;):

<div class="col-12 col-md-10">
 <input type="submit" class="btn btn-block btn-lg btn-primary" value="Get A Healthier Tech Life!" name="subscribe" id="mc-embedded-subscribe" style="/* background: none; */border: 1px solid #343A40;border-bottom: 3px solid #343A40;margin: 0 auto;">
</div>

This looks already good.

Some final touches.

Increase the font size of input field:

#mc_embed_signup .mc-field-group input {
	font-size: 1.8rem;
}

The submit can keep the size.

The last (and minor) thing is the hover color of the links, starting with the yellow button in the form area with white background:

form .btn-primary:hover {
	color: #FFF952;
	background-color: #343A40;
}

The yellow button above the photo can stay black.

Change the hover color for the footer links to #FFF952.

Done :)

03-http-::digitallywell.website-2019-07-08-my-suggestions-second-round.png
remove

Thank you so so much! I did not expect that you would help me this much. I did everything you said and it's looking great now except for certain kinks I'll fix on my own when I have time (on mobile "Find harmony with technology looks weird, and the "Become a Patron" button does not load--not even sure I should be putting the button in the first place but I forgot to put a link to the Telegram group so it's moved down). Thank you again! You're a lifesaver.

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove

Sign in to answer πŸ˜ƒ