Ask HN: What are well designed SaaS websites?
79 comments
On Stripe I really like that you can see the logs of every API call you've ever made with the request headers and body and response body... It makes working with it much easier than Braintree.
Does Stripe write about how they handle storing those requests/responses? Seems like this could get very expensive, very quickly.
[deleted]
There doesn't seem much info on the stack though quora has
Sinatra, no rails(2012): https://www.quora.com/Does-Stripe-use-Rails/answer/Patrick-C...
nqinx, mongodb, Kubernetes
Sinatra, no rails(2012): https://www.quora.com/Does-Stripe-use-Rails/answer/Patrick-C...
nqinx, mongodb, Kubernetes
Did they switch from Mongo to Postgres? This open-source repo makes me think so:
https://github.com/stripe/mosql
https://github.com/stripe/mosql
I don't know. There is this https://news.ycombinator.com/item?id=10151324
I think turbotax has a pretty phenomenal interface if you're in the bracket of people with really simple taxes. Two and three years ago, my taxes took me about an hour.
Depending on what you're looking for, you may also be interested in aping their freemium model, where the first time you use the service is free and sets you up quite well to reuse the service next year and pay $40 for one of their obnoxious services. As a customer it was quite frustrating but it succeeded in getting me to pay $40 the second year, and had I not gone far out of my way to remove the "plus" and "premium" features I would have ended up paying ~$100 the first year and $140 total the second.
The third year I switched to a competitor and got to use their service for free. In a way, using turbotax felt like a great UX mixed with a battle to read everything extremely carefully and retread my steps to avoid paying anything; to me, this is not all that morally reprehensible because it adversely affects people who don't value their money as much as their time. However it also seemed predatory in that a non-tech-savvy user such as my parents would likely be tricked into paying higher costs for essentially no added value.
Depending on what you're looking for, you may also be interested in aping their freemium model, where the first time you use the service is free and sets you up quite well to reuse the service next year and pay $40 for one of their obnoxious services. As a customer it was quite frustrating but it succeeded in getting me to pay $40 the second year, and had I not gone far out of my way to remove the "plus" and "premium" features I would have ended up paying ~$100 the first year and $140 total the second.
The third year I switched to a competitor and got to use their service for free. In a way, using turbotax felt like a great UX mixed with a battle to read everything extremely carefully and retread my steps to avoid paying anything; to me, this is not all that morally reprehensible because it adversely affects people who don't value their money as much as their time. However it also seemed predatory in that a non-tech-savvy user such as my parents would likely be tricked into paying higher costs for essentially no added value.
Ha, I did my taxes today too...
I was actually thinking about how nice their webapp was to use while I was doing them, too. _Incredible_ amount of complexity to reduce to a really usable app.
I was actually thinking about how nice their webapp was to use while I was doing them, too. _Incredible_ amount of complexity to reduce to a really usable app.
I think an interesting thing about turbotax and ifttt is that they both were confronted with the problem of a really hard UX and they both decided that the simplest solution was just to make everything a series of modals with the absolute minimum number of decision points. Kind of like the game Reigns.
I love ufile. 10 min to file for my wife and I. One click to submit to Revenue Canada.
Its similar to what you say. A balance of minimal content and hiding unnecessary sections, but access to great detail when needed.
Its similar to what you say. A balance of minimal content and hiding unnecessary sections, but access to great detail when needed.
They have a really solid approach and keeping each step really straightforward and discrete to avoid overwhelming you with too much to think about at once. It still fails really hard when you get to anything outside their flow. I had to spend time googling the awkward set of steps needed to deduct mortgage interest. Ultimately, it wasn't hard, but it wasn't at all obvious how to do it.
Um... maybe you had a strange situation but usually for mortgage interest on your home , your lender sends you a form with essentially 1 number on it and you just enter this form into TurboTax when it asks you.
It seems the question is ambiguous. Everyone is responding with the marketing websites of SaaS compnaies, but I interpreted it as asking for well-designed internal interfaces of SaaS websites. Would love to see examples of that which people think are particularly great. Personally I've always found Gusto and Basecamp to have very good interfaces. Stripe's internal interface (which others have mentioned for their public site) gets the job done but I would hardly call it great.
Some of my favorites:
https://mailchimp.com
https://transitapp.com/
https://www.intercom.com/
https://lattice.com/
I'm fond of what we have built: https://www.moonlightwork.com
https://mailchimp.com
https://transitapp.com/
https://www.intercom.com/
https://lattice.com/
I'm fond of what we have built: https://www.moonlightwork.com
Hey, curious about your experience with Mailchimp. I've noticed that people seem to either love it or hate it. What do you think they do well? Where do they fall short? (if at all)
Not parent, but I'd like to answer :)
I use mailchimp for a newsletter for my own SaaS site. It is a nice service, they really do make it easy to send and design a mail. Their editor is good, their HTML-plaintext conversion works reasonably well.
What I do not like is the workflow. It's like my usecase is completely unsupported, and I do not understand which usecase they do support. Every time you send a mail you start from scratch: They make you start a new campaign(?), pick again a template, fill in the from address, write a text by editing the template. The workflow does not at all support the thinking that all I do is send a new issue to the same ML like always, which should of course use the same template and infos as always as starting point, where the main thing to do is to change the text in the mail.
I guess they support some marketers definition of how things work there? But really feels strange, as if the text of the mail is an afterthought.
I use mailchimp for a newsletter for my own SaaS site. It is a nice service, they really do make it easy to send and design a mail. Their editor is good, their HTML-plaintext conversion works reasonably well.
What I do not like is the workflow. It's like my usecase is completely unsupported, and I do not understand which usecase they do support. Every time you send a mail you start from scratch: They make you start a new campaign(?), pick again a template, fill in the from address, write a text by editing the template. The workflow does not at all support the thinking that all I do is send a new issue to the same ML like always, which should of course use the same template and infos as always as starting point, where the main thing to do is to change the text in the mail.
I guess they support some marketers definition of how things work there? But really feels strange, as if the text of the mail is an afterthought.
If you’re using your last campaign as your starting point, why aren’t you just replicating it and starting from there?
https://kb.mailchimp.com/campaigns/ways-to-build/replicate-a...
https://kb.mailchimp.com/campaigns/ways-to-build/replicate-a...
I've been using mailchimp for the first time in the last couple weeks and found it to be a similar experience to squarespace: extremely friendly to non-coders, but kind of buggy and somewhat hard to use beyond their given templates. (Even the design looks very similar)
My specific problem: I fiddled with the "merge fields" (basically handlebars regex-replace tool) and somehow this broke my email template, but only after I had tested it once and it worked properly. When I copied the original (working) "campaign" and re-sent it, all the text of the email was gone. I copied it and fixed the merge fields, then all the images were gone. After reimporting the images it finally worked.
The really frightening part was that it worked the first time but somehow the act of copying the working email with weird merge fields broke a bunch of other things. So I suppose the copying was imperfect and created a problem with their regex-replace logic the second time. Very glad I tested it a second time before sending it out, overall it took me 6 tries to get it working properly.
I'm on the free tier, and customer support is a paid feature, so I had to figure this out myself.
My specific problem: I fiddled with the "merge fields" (basically handlebars regex-replace tool) and somehow this broke my email template, but only after I had tested it once and it worked properly. When I copied the original (working) "campaign" and re-sent it, all the text of the email was gone. I copied it and fixed the merge fields, then all the images were gone. After reimporting the images it finally worked.
The really frightening part was that it worked the first time but somehow the act of copying the working email with weird merge fields broke a bunch of other things. So I suppose the copying was imperfect and created a problem with their regex-replace logic the second time. Very glad I tested it a second time before sending it out, overall it took me 6 tries to get it working properly.
I'm on the free tier, and customer support is a paid feature, so I had to figure this out myself.
Thanks for the reply! That sounds frightening, frankly.
I hate mailchimp and prefer to use tinyletter.com. I can't talk enough about how much I love tinyletter!
TinyLetter is amazing. Simple, easy to use, just does what you need without templates, campaigns and other stuff that gets in the way between you and subscribers receiving an update from you.
I'm curious (working on a project in the space), what makes you hate Mailchimp? What do you love most about Tinyletter?
MailChimp has a nice website. What I don't like about them is that they are in the business of spam email.
Needless to say Stripe.com
- https://www.plainflow.com/
- https://sentry.io
- https://slack.com
- https://figma.com
- https://basecamp.com
I found Slack rather poor in explaining what they are doing. This text is basically their entire landing page.
"When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered."
Do they offer A/B testing? HR tools? Code deployment? Who would have guessed it is chat.
Their /features page does a better job: "It simplifies communication. Slack brings all your team's communication together, giving everyone a shared workspace where conversations are organized and accessible."
"When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered."
Do they offer A/B testing? HR tools? Code deployment? Who would have guessed it is chat.
Their /features page does a better job: "It simplifies communication. Slack brings all your team's communication together, giving everyone a shared workspace where conversations are organized and accessible."
Scrolling doesn't make it very much more obvious.
A lot of places unwilling more than unable to summarize their product because it seems limiting. E.g. they could have just said "chat service"
A lot of places unwilling more than unable to summarize their product because it seems limiting. E.g. they could have just said "chat service"
True.
But that's actually a common trend. When the company's brand gets bigger and stronger in people's mind, company position slowly switches from
1 Product attributes
2. Product benefits
3. Emotional benefits
4. Something bigger
This applies well to every type of product. SaaS included.
This is a great essay on the topic: https://medium.com/speroventures/branding-for-builders-19e10...
But that's actually a common trend. When the company's brand gets bigger and stronger in people's mind, company position slowly switches from
1 Product attributes
2. Product benefits
3. Emotional benefits
4. Something bigger
This applies well to every type of product. SaaS included.
This is a great essay on the topic: https://medium.com/speroventures/branding-for-builders-19e10...
i second sentry.io, they do a great job clearly describing what they do and why they’re good at it.
A design tool better be impeccably designed, and Figma is just that
I was wondering the same thing the other day: looking for inspiration but also experienced recommendations and UI patterns. Found this with a quick Google (I have no affiliation): https://blog.chartmogul.com/saas-landing-pages
Also I found Pinterest to be a good resource for finding designs (more so than Dribbble, Behance, etc. surprisingly.)
Also I found Pinterest to be a good resource for finding designs (more so than Dribbble, Behance, etc. surprisingly.)
Baremetrics for sure. Really effective — the dashboard gives you all the important data quickly and then you can easily drill down. I use their product several times a day and it’s the best interface of all of the many services I use.
https://lookatthatsaas.com is a good resource for inspiration.
[deleted]
https://segment.com/ seems to take design really seriously. They also have a pretty nice React toolkit here: https://segmentio.github.io/evergreen/?selectedKind=alert&se...
I frequently compare https://getstream.io/ with http://stripe.com/, https://www.mapbox.com/, sendbird.com, algolia.com, pusher.com and https://layer.com/
https://stripe.com - It's beautiful but conveys all the information that you need quickly. It also has excellent copy.
https://canny.io - Very crisp design and it conveys the use case really well.
https://baremetrics.com - This has come such a long way and has stunning design.
https://canny.io - Very crisp design and it conveys the use case really well.
https://baremetrics.com - This has come such a long way and has stunning design.
Not really a SaaS website, but I really dig this https://district0x.io/
I'm not too fond of that "stay up to date" modal, which tries to mimic system native UI.
https://dnsimple.com
https://basecamp.com
https://sentry.io
https://semaphoreci.com
https://instapaper.com
Old Heroku :-(
https://basecamp.com
https://sentry.io
https://semaphoreci.com
https://instapaper.com
Old Heroku :-(
What's changed about Heroku that's made you unhappy? (Not an employee, just curious).
Take this copywriting, for example:
2011: "Forget Servers - Get up and running in minutes, and deploy instantly with git. Focus 100% on your code, and never think about servers, instances, or VMs again."
2018: "Deploy and run apps on today's most innovative Platform as a Service - Heroku is a cloud platform based on a managed container system, with integrated data services and a powerful ecosystem, for deploying and running modern apps. The Heroku developer experience is an app-centric approach for software delivery, integrated with today’s most popular developer tools and workflows."
Which is better?
2011: "Forget Servers - Get up and running in minutes, and deploy instantly with git. Focus 100% on your code, and never think about servers, instances, or VMs again."
2018: "Deploy and run apps on today's most innovative Platform as a Service - Heroku is a cloud platform based on a managed container system, with integrated data services and a powerful ecosystem, for deploying and running modern apps. The Heroku developer experience is an app-centric approach for software delivery, integrated with today’s most popular developer tools and workflows."
Which is better?
2018: it describes what they do in a much clearer way.
For lots of examples, check out https://www.pages.xyz/
I recently came across toggl for time tracking and reporting.
Toggl - Time tracking - https://toggl.com/pricing/
Their pricing page is one of a nicest I've seen, really easy to grasp but also functional eye candy.
I even hoped it was a WP template so I could customize one myself.
Toggl - Time tracking - https://toggl.com/pricing/
Their pricing page is one of a nicest I've seen, really easy to grasp but also functional eye candy.
I even hoped it was a WP template so I could customize one myself.
Clubhouse is an excellent example of site and web app and their approach and integration with both has clearly had a LOT of thought put into it:
https://clubhouse.io
Probably use it more than any other SaaS and am glad it’s so good.
Probably use it more than any other SaaS and am glad it’s so good.
[deleted]
Find some great Inspiration at https://hyperpixel.io
Can I chime in here, not with a link to any specific site, but just as a call out to patterns that I am seeing recently.
A lot of sites now have lists and content that updates automatically as things happen on the back end. One good example is Intercom. I have their screen open 24x7 on the first tab of my browser so I can monitor users on our site. I love how it updates the 'time last seen' dynamically, and I usually have my customer list sorted by the 'time last seen' field.
But sometimes, while the content of the list fields are updated in real time, the sorting of the list is not, and the list goes out of order (i.e. customers who re-login recently are still shown lower down in the list that customers who logged in an hour ago even though the 'last login time' is more recent.
I wish there was a way in these instances to just refresh the list within the page, without doing an entire browser page refresh, which could take up to 10 seconds in the old Intercom UX. Also, while talking about Intercom, jumping between the Customers page and the Conversations page could also take anything from 5 to 10 seconds on my browser, and there was NO indication that anything was happening in the meantime, which increased confusion and frustration. I think we need to bring back the hourglass or some other 'waiting' indicator for transitions that take a while.
(NB: The new Intercom UX has improved on the waiting delay significantly, but not the sort ordering of the customer list).
Someone also mentioned the Stripe design (of their back end, not their marketing site). I tend to like the new design of their admin panel, however their menu hierarchy was a little confusing, making it hard to find things a lot of the time. Also, the redesign tends to break the 'back button' behaviour a lot. I tend to spend a lot of my time on the Stripe admin panel looking at webhook logs etc., and every time I bring up the log listing, then drill down to an entry I can't seem to go 'back' to the list easily without the system rebuilding the entire list each time. Makes it frustratingly slow to try and find the exact log entry I want when I have to spend so much time waiting for page refreshes.
In summary, I think we need to go back to these 'old fashioned' design constructs which aren't considered "trendy" any more:
* Give the user some sort of 'waiting' indicator if a page redraw is going to take time.
* If a list on your page refreshes in the background, and your user can sort the list, make sure you update the sort order as well as the content
* Don't break the back button behaviour if you can help it.
A lot of sites now have lists and content that updates automatically as things happen on the back end. One good example is Intercom. I have their screen open 24x7 on the first tab of my browser so I can monitor users on our site. I love how it updates the 'time last seen' dynamically, and I usually have my customer list sorted by the 'time last seen' field.
But sometimes, while the content of the list fields are updated in real time, the sorting of the list is not, and the list goes out of order (i.e. customers who re-login recently are still shown lower down in the list that customers who logged in an hour ago even though the 'last login time' is more recent.
I wish there was a way in these instances to just refresh the list within the page, without doing an entire browser page refresh, which could take up to 10 seconds in the old Intercom UX. Also, while talking about Intercom, jumping between the Customers page and the Conversations page could also take anything from 5 to 10 seconds on my browser, and there was NO indication that anything was happening in the meantime, which increased confusion and frustration. I think we need to bring back the hourglass or some other 'waiting' indicator for transitions that take a while.
(NB: The new Intercom UX has improved on the waiting delay significantly, but not the sort ordering of the customer list).
Someone also mentioned the Stripe design (of their back end, not their marketing site). I tend to like the new design of their admin panel, however their menu hierarchy was a little confusing, making it hard to find things a lot of the time. Also, the redesign tends to break the 'back button' behaviour a lot. I tend to spend a lot of my time on the Stripe admin panel looking at webhook logs etc., and every time I bring up the log listing, then drill down to an entry I can't seem to go 'back' to the list easily without the system rebuilding the entire list each time. Makes it frustratingly slow to try and find the exact log entry I want when I have to spend so much time waiting for page refreshes.
In summary, I think we need to go back to these 'old fashioned' design constructs which aren't considered "trendy" any more:
* Give the user some sort of 'waiting' indicator if a page redraw is going to take time.
* If a list on your page refreshes in the background, and your user can sort the list, make sure you update the sort order as well as the content
* Don't break the back button behaviour if you can help it.
https://webflow.com/ - complex product, but the marketing site makes it clear and understandable
Shameless plug, I kind of like the work we did on our own SaaS website: https://serpapi.com
[deleted]
pitchbook.com
Interesting mix of content and product information. I like how it's laid out as well
Interesting mix of content and product information. I like how it's laid out as well
My favorites:
- stripe.com
- ohdearapp.com
Simple, to the point & clean layouts.
- stripe.com
- ohdearapp.com
Simple, to the point & clean layouts.
Did you mean that the services themselves are well designed or are you referring to pages that describe them?
does ecommerce count? mcmaster.com
agreed ... mcmaster is one of the best designed sites.
Chiming in after seeing us get mentioned here (context: lead designer @ http://Fairpixels.pro)
Working with engineers of b2b saas companies every day, for more than a year and having analysed all the best SaaS companies who have 10+ internal designers, I found a couple of principles that anyone can apply to make their website look decent:
* Consistency - One practical example: If you use a 4px border-radius, use a 4px radius everywhere. It may sound small, but having a consistent experience across your application makes the product feel so much more polished to your users. Don't use multiple fonts, different navigation menus etc. Keep it consistent.
* Reduction - If anything, design isn't about adding more things to make it 'look nice'. Try to remove as many things as you can. If something doesn't serve a specific function, then remove it. Every pixel should make sense. The more you put in front of your users, the more brain power it'll require to process.
* Divide - This is mostly UX, but one thing I see so many get wrong. A lot of SaaS apps overwhelm their users. They present them with all the features upfront. Whether it's a long onboarding form, or a dashboard with 50 actions one could take. By splitting up things in different ways, you can guide the user through the experience. Your signup process for example (that might be a big block in conversion) might be made so much better if you ask for certain types of information later on in the process.
Working with engineers of b2b saas companies every day, for more than a year and having analysed all the best SaaS companies who have 10+ internal designers, I found a couple of principles that anyone can apply to make their website look decent:
* Consistency - One practical example: If you use a 4px border-radius, use a 4px radius everywhere. It may sound small, but having a consistent experience across your application makes the product feel so much more polished to your users. Don't use multiple fonts, different navigation menus etc. Keep it consistent.
* Reduction - If anything, design isn't about adding more things to make it 'look nice'. Try to remove as many things as you can. If something doesn't serve a specific function, then remove it. Every pixel should make sense. The more you put in front of your users, the more brain power it'll require to process.
* Divide - This is mostly UX, but one thing I see so many get wrong. A lot of SaaS apps overwhelm their users. They present them with all the features upfront. Whether it's a long onboarding form, or a dashboard with 50 actions one could take. By splitting up things in different ways, you can guide the user through the experience. Your signup process for example (that might be a big block in conversion) might be made so much better if you ask for certain types of information later on in the process.
I very much like your fixed fee / month business model. Exactly what I need, I will likely become a customer soon.
Is there a similar service out there that has fixed pricing for web/app development?
Is there a similar service out there that has fixed pricing for web/app development?
saw this few weeks ago: https://greenpine.co/#pricing
Quick feedback on fairpixels.co/pro: clicking "Get started" (blue button top right) breaks the site, nothing happens, scrolling is broken afterwards. Mac Safari Version 11.0.3 (13604.5.6)
Tnx, pinging a teammate.
Heads up, looks like there's some issues with your site in iOS safari https://imgur.com/a/HcXfd
Happens on desktop Safari, and Firefox, too.
Looks like a good product. Nice site. Two heads up on iOS:
- there is a “Contact” link floating at the top of the page off centered that opens Mail. Maybe link it to your Olark integration.
- 14 day money back guarantee runs over the text underneath it.
- there is a “Contact” link floating at the top of the page off centered that opens Mail. Maybe link it to your Olark integration.
- 14 day money back guarantee runs over the text underneath it.
Many other problems rendering the site on iPad for me.
Most SaaS businesses are run by engineers and unfortunately many of them/us lack the eye for style. That said, here are two of my favorites:
http://fairpixels.pro - I found these guys here on HN and their work seems spot on.
https://www.spotify.com/ - their simple design and IPO should be an example for fellow engineers who’re building saas.
http://fairpixels.pro - I found these guys here on HN and their work seems spot on.
https://www.spotify.com/ - their simple design and IPO should be an example for fellow engineers who’re building saas.
Fairpixels doesn't appear to be a SaaS service, but a service company that does design (not only for SaaS).
I'm curious:
- is there a particular SaaS designed by fairpixels that you consider an example of good SaaS design?
- do you have any relationship with Fairpixels? Your HN account has posted 2 comments since being created, and both those comments recommend fairpixels.
I'm curious:
- is there a particular SaaS designed by fairpixels that you consider an example of good SaaS design?
- do you have any relationship with Fairpixels? Your HN account has posted 2 comments since being created, and both those comments recommend fairpixels.
Ive been following their progress for over a year and am a customer. They’ve structured their website and business like a Saas. I don’t know about all of their customers but I love the work they did for Uphex.com for example.
[deleted]
Would recommend https://stunning.co/ , I like the floating tube animation and the increasing recovered amount is really appealling.
Meh, I disagree, the design looks dated.
Horrible on mobile for their marketing site. Feels like a spammy “one weird trick” landing page. All sorts of problems with buttons, text alignment and more. Terrible color scheme. Just no.
To me, that round edge bubble font is a total turnoff. I don't want to read the wall of text in any case. But, it is even more of a non-starter with that font.
Simple, Consistent, fast , effective.
There are many other listed here as well. They mostly follows the same layout and pattern. What separate them are wording and graphics. Using simple words, and shortest sentence possible to describe your SaaS, and choice of graphics, which really is a matter of personal taste.
I think Stripe manage to do this very well.
Off Topic: Did Stripe ever talk about their Ruby Stack?