One small thing - is the scroll to top button necessary? Why would a user ever need to quickly jump to top in a way they couldn't already do with scroll?
It's important for us all to remember that not every user is like you, or uses interfaces like you do. You're a knowledgeable and sophisticated web user. Not everyone is. Back to top links are also commonly used by the sight impaired and the elderly. I'm constantly having to remind myself of the same thing.
Now possibly making it a little less pronounced (that stark black on white makes it the focal point of the page when it fades in) is totally something I can get behind. Maybe don't anchor it to the window, put it in the footer, etc.
Note taken. We'll reduce the contrast and see if it works in the footer.
Good balance and colour, not too much info but tells you enough. However I'd change a couple of things:
- Does the nav need to be a toggle on desktop? I'm not sure it's needed
- Some of the buttons and links are using quite a thin font weight, could they be a bit heavier to make them easier to read?
- I like the icons in the second section, but could these items be in a grid instead of a list? It would shorten the page on desktop
- I didn't realise the first button in the header was an input, the only way I knew was that my LastPass extension was indicating it. If you can make this look more like a text input then you might get more sign ups
I hope these points help, they're just smallish changes that should improve the overall experience.
To add to your last bullet point: the second button doesn't give a pointer cursor, even not after entering an email address.
edit: and the email arrived in my spam folder (outlook mail)
Damn, that's kinda bad :/ Design was considered more than the ease of use.
Design isn't decoupled from ease of use. Decoration is.
I didn't say it wasn't :)
Bummer the email arrived in spam. We'll have to contact our email provider about that.
Some substantial redesign on the signup buttons is definitely in order. Will repost on here once we have that completed. Thanks for your feedback!
No problem, thanks for taking the comments onboard!
We originally had the grid layout with the 4 points, but it was way too much happening at once and made it hard to read. The list requires a bit more scrolling, but we like how it's interactive and simple.
Yes, the button in the header has been a problem for us. We have a redesign so that it looks similar to how the Robinhood buttons appeared (http://bit.ly/1UeXJ0f). We hope this boosts the conversion rate, just waiting on our WebDev to finish midterms so we can make these changes!
Edit: I think you're also spot on with the font. We'll probably have to make the small font a bit more noticeable. Thank you for your advice!
That's all great, seems like you've really got on top of these. Have you tried reducing the amount of content for each of the items? Or even just in a 2 column grid?
Haven't tried the 2 column grid--that could be interesting. Ideally we'll offset the points left and right and provide a small animation on the opposite side, our designer has just been very busy as of late!
Nice enough although I feel sometimes when I look at these sorts of pages you could swap out your charity message with almost anything as it's reasonably generic in many senses.
It's not necessarily a bad thing though if it drives signups.
Couple of things to note:
The main nav on large screens is frustrating and annoying. Just show it and make it persistent. When I clicked on legal, it disappeared and I had to click the burger icon again. There's absolutely no reason I could think of that I might want it to vanish.
The term "early adopter" doesn't feel right to me. I'm not sure what the right term is but becoming an early adopter of a charity app/tool just doesn't quite sound right.
Other than that, pretty clear and tidy :)
Haha I promise we weren't trying to hide the legal section from you! Nice note though, it might be right to keep the nav bar static after expanding.
I think you're spot on here with 'early adopter.' It seems kinda weird, plus it doesn't build a sense of community. Almost the opposite, as an early adopter is an individualistic achievement. We'll revise this and think of something better.
Thanks for your comments!
Bit late to the party on this but I think this is a great idea. Here are my first impressions, some of them echoed already by others:
- "Donate spare change" to me means the extra coins I get when paying in cash. It sounds like I can buy a coffee with a $5 note and give you the dollar or so in coins. At the same time, I buy my gas/groceries with a credit card but that means there isn't any spare change.
To me the mechanics of your proposition (i.e.: we round up your credit card transactions for you to donate to charity) is confusing at first.
As others have mentioned your CTA is confusingly designed. This is a good opportunity for A/B testing, but at the very least you need to design this to be more clear. Also, why on earth doesn't the "Sign Up Now!" button at the bottom focus the text input that it scrolls you to at the top?
After revealing the navigation (which I think is unnecessarily hidden, and perhaps unnecessary altogether) I thought "Charities" would be a list of charities I can donate to.
Lastly, I agree with Vincent Bé in that overall, the site lacks a strong identity; a soul. Bring your audience in a bit more right at the start... your idea is great, don't make it so hard to figure that out.
It's a good start but it needs a couple more iterations to make it better. That being said, good on you for asking for feedback publicly and for actually shipping it! That's something to be proud of.
Thanks for the tips, Andrew!
We'll need to reinforce our proposition more throughout the webpage. We're working on a GIF to help with that, and possibly a small promo video for the page too.
The signup button is a script provided by a 3rd party. If we use it twice on the landing page, it bugs out the system, so we have to scroll users back to the top rather than allowing them to enter in email credentials at the bottom too.
Great point about the Charities tab. We'll start adding the organizations we work with onto that page.
Could you point out any resources or provide some ideas on how we can improve our identity? I think we're still missing a certain element of persona, I'm just not quite sure how to nail it down.
Thanks for your advice, it's truly appreciated!
Nothing to add that hasn't already been said, but you might as well add https to your site if you're going to tout "bank grade security". Yea, the landing page isn't the app, but it's still a point of contact.
Solid comment. We'll redirect http to https.
If I'm assuming correctly, the main goal of this page is to convert users by getting them to submit their email address.
You've done a great job of putting your CTA front and center in the hero and reinforcing it again at the bottom of the page to help achieve this goal
My biggest criticism is that your input field "Enter Email Address" doesn't look like an actual input field. It looks like a ghost button.
Also, I'd explore focusing the email field on load. We've seen lifts from this in the past.
Take a look at some of the 2016 Candidates websites for how they're capturing emails. You'll notice how much obvious their input fields are.
Lastly, you should never have just one landing page. Test multiple variations until you find the highest converting page. (See Slack.com and reload it a few times)
Great advice. We're definitely going to rework the buttons so they have more emphasis and attraction.
Just checked out campaign pages and Slack.com. All incredible resources with great tips--thank you!
I dig the visual style, particularly the animations that explain how Drops works as you scroll down.
But I wonder why the top navigation options are hidden behind a hamburger menu on desktop, where there's plenty of space to show them. "Our Philosophy," "Charities" and (arguably) "FAQ" seem like primary pages that potential users might want to navigate to, and they'll be less likely to do so if you're hiding them all behind a hamburger menu.
I understand this choice for mobile screen widths, but on desktop, I wouldn't necessarily sacrifice that usability improvement for visual simplicity; the top nav bar can be designed in a way where it's clear but not too distracting or visually overwhelming relative to the primary landing page content.
We hide them in the navigation bar because we really want people to focus all attention on the hero text and CTA of signing up (even though, admittedly, our signup buttons are pretty weak).
Once we make the redesign, I'll post on here again and would love to have your feedback. I could definitely be wrong with my thinking!
That makes sense, Shea! I might consider a solution that splits the difference, e.g. the nav links appear when users scroll below a certain threshold (past the primary call-to-action) — otherwise they're hidden, as they are currently.
David Darnes comments are on point, agree on all fronts. I would add a few small things:
- Give that feedback modal some breathing room (padding)! http://d.pr/i/W5K5
#infoitems could really use some breathing room too, a little bit helps: http://d.pr/i/3RTD
- That follow button at the bottom is scrunched up with the text above it too: http://d.pr/i/12ZiG
Well I guess all of my feedback is related to padding, haha. Things just feel unnecessarily tight in certain areas, it will probably help to space them out vertically a bit. Other than that I think it looks good!
I put the follow button in last night before sleeping--should've waited as I knew it looked sloppy!
But thank you for the comments. The feedback modal is a 3rd party feature so the code could be a bit difficult to adjust, but we'll see what we can do!
I like the page layout but why that iPhone have the camera above the speaker? The camera should be on the left.
Wow--great catch! Looks like the proximity sensor (http://bit.ly/1R7H6EO) is larger than the camera for some reason. Note taken, and thank you!
Like the layout and design, but I'm still not sure or what it is exactly after looking at the page.
I gather it's an app, but there's also automatic bank monitoring. Does Drops automatically donate for me, or do I choose the amount? Is the app just for stats…
"donate the spare change to charity" is a good vision statement, but I think you also need a brief tagline to describe the process "Shop, let Drops keep track of your donation goal and approve a donation to your preferred charity once you hit your target"
We definitely have room for clarification. I think we'll add some sentences and include links to press that explain our app a bit better, that way if a reader is still a bit confused, the articles might help.
Nice page but the animations are too slow (iPhone 6+). Personally, I don't understand this recent slide-in trend. Yes it looks interesting but when pages load content after you've scrolled past that spot, well, that's not a great experience.
Same happened to me, and I'm on desktop. Scrolled down and saw an empty page, kept scrolling, then noticed stuff was sliding in on top of the current viewport. Totally missed all those middle bullet points.
Sorry about that! We'll speed up the slide in animations.
Lovely landing page, It's very clear and easy to understand, but I think that you need to concentrate more on security. I know you take security seriously, but you need to take the icon also seriously http://d.pr/i/19nng I think it needs more details to standout from the rest of the landing page. Keep it up :)
Thank you! We have a pretty cool animation for the vault that we're excited to implement. Appreciate the positive feedback!