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.
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.
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.
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.
Remember reed hoffman's philosophy - if you're not embarrassed by your mvp, you're doing it wrong. Great design is a nice to have and is often a distraction from revenue. It's absolutely not a prerequisite to revenue. Good design will suffice.
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."
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.
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)
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."
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)
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'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.
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.
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?
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.
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.
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.
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.
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.)
79 comments
[ 2.9 ms ] story [ 138 ms ] threadhttp://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.
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.
https://sendgrid.com
https://www.drift.com
https://lookback.io
https://reply.io
But thats not a knock on their offering - if their customers are happy and they are doing a good job, then more power to their servers.
"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."
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"
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...
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.
Is there a similar service out there that has fixed pricing for web/app development?
- 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.
https://basecamp.com
https://sentry.io
https://semaphoreci.com
https://instapaper.com
Old Heroku :-(
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?
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
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.
https://kb.mailchimp.com/campaigns/ways-to-build/replicate-a...
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.
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?
Sinatra, no rails(2012): https://www.quora.com/Does-Stripe-use-Rails/answer/Patrick-C...
nqinx, mongodb, Kubernetes
https://github.com/stripe/mosql
Interesting mix of content and product information. I like how it's laid out as well
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.
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.
Its similar to what you say. A balance of minimal content and hiding unnecessary sections, but access to great detail when needed.
Also I found Pinterest to be a good resource for finding designs (more so than Dribbble, Behance, etc. surprisingly.)
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.