Minimum Viable Design$

Simple strategic UX/UI design tips that help SaaS businesses with releasing good enough software.

[minimumviabledesigns-blog]

Save the visual prominence for signaling progress

Use color contrast wisely.

High intensity in combination with high quantity hurts our eyes. Low quantity is a healthy way to attract attention and guide towards progress. Intense backgrounds produce feelings of heaviness whereas light backgrounds bring the actual content on the spotlight. 

What you want is to highlight actions that generate new content and help to move forward towards the accomplishment of the tasks. Next step has to be a no-brainer. Rule of thumb: Use high contrast, high saturation colors for buttons and links for dynamic data manipulation. Rather than backgrounds of navigations, footers, modal windows and etc. In case you decided to use a dark background, at least decrease the saturation to a minimum. Use the HSL color model to finetune the parameters of saturation levels.

[minimumviabledesigns-blog]

Typical Placement of DataTable Controls vs. Arbitrary Positioning

Tables are the core element of any web application. Amount of information they present will always grow with time. Hence controls helping the user to find a specific piece of information or a relationship pattern, are essential. Over time software creators used uniform positioning for these controls to leverage a habits users built over the last decade of using the software. Misalignment of these controls becomes an issue when we add new features and they become hard to find because of a visually cluttered interface.

These are the 3 types of active elements altering the values presented in the table from the perspective of positioning.

1. Updating and transferring data (Position: Top table edge - left or right corner)

Examples: Adding new table items, Bulk updating, Share, Multiselect, Download, Print, Multiaction dropdown

2. Reorganizing data (Position: Top left table corner)

Examples: Filtering through Dropdowns, Datepicker, Sorting mechanisms, Search bar

3. Batch preview options (Position: Bottom table edge or Top right corner)

Examples: Pagination, Lazy loading button, Density rate (quantity per page), List vs. Cards preview

Don't follow this positioning tips rigidly. You might find a better placement based on user testing. This is just a good-to-start-with guide.

[minimumviabledesigns-blog]

Sign Up Form With a Strong Social Proof vs. Plain Form

Sign up form is the first part of the onboarding process. Usually comprised of two input fields, social login, and a confirmation button. Few minor improvements can help with a drop-off and increase conversion. However, the redundant white space around the form is a missed opportunity. To preserve forward momentum this white space could take advantage of only static elements that reinforce connection and trust. And doesn't cause distraction driving user’s attention away from the main journey.

The simple solution to combat user’s doubts is to incorporate strong social proof. Here are the 3 Common Social Proof types appearing on Sign up screens:

‍

1. Safe place to be - Testimonials from regular customers simply work, because people can relate to statements of others. If the quote says something along the lines user's mind is searching for, then the user feels that she is at the right place.

2. Bandwagon effect - Showing a total number of customers to create a fear of missing out. Everybody else is using it, so why don’t you join us?

3. Authority - Authority principle suggests to include an endorsement from the Top actors in the field, users operate in. The format of the statement can differ, although branding recognition is essential. For instance logos of popular clients as your customers. Or photos of influencers or high-ranking employees accompanied by quote justifying value your software brings to the table.  

It doesn’t seem so, but sign up screens can vary in complexity. If your Sign up screen must include additional input fields because of contextual requirements, social proof can even boost the conversion rate for the next step.

EXAMPLES for all 3 categories: How Basecamp, Baremetrics and Invision reinforce trust in a sign up form?

[minimumviabledesigns-blog]

Categories & Utilities Navigations vs. Mixed Navigation

Navigation is basically a crossroad for the most useful screens. Its structuring could be challenging when dealing with tens of potential links to be categorized. One helpful trick from the beginning of the structuring process is to split all the possible links into two buckets. Namely Categories and Utilities navigations.

‍

1. CATEGORIES (Content) Navigations

Content representation  Presents links to screens dealing with the primary content of the application.

UI representation: Typically located on the left side of the screen. All items of the navigation are always visible (considering desktop viewport, might be hidden on mobile).

‍

2. UTILITIES Navigations‍

Content representation: Ancillary elements covering secondary actions, accessed less frequently by the user. Examples include authentication, management of settings, account related details, personal details, sorting and filtering mechanisms, data manipulation etc. Navigation links and information pertaining to them are not part of the website content hierarchy.

UI representation: Usually placed on the right side, close to the corners and edges of containers. As they serve secondary functions, they are often hidden under the dropdowns or popups. Often accompanied by icons to increase the speed with which users spot the expected options. For instance icon of a bin with “remove", plus icon and “add”link, cog icon and link to "preferences" etc.

Mixing navigations is risky. This widespread interaction pattern teaches users to expect utilities to be found on particular locations on the screen. Placing them to expected locations improve productivity within the app.

EXAMPLE: How Mailchimp structures the navigation?

[minimumviabledesigns-blog]

The most important part of your SaaS Landing page

Every single landing page should introduce the business to the audience in the very top part. This article attributes this function to Value Proposition, considered as a combination of a thoughtful copy of Main Title, descriptive SubTitle, and illustrative visuals. Together they aim to pass the message and set the tone of communication between interface and page visitor.

You might be surprised, but the very first question that pops up in the head of your web visitor is “Am I at the right place?”. They are looking for clues to answer this question positively. It’s a job of the page creator to provide these clues as soon as possible once the page loaded. The answer to the aforementioned question lays in the Value Proposition.

Marketing activities set up the expectations and your landing page is required to meet them. To understand the thinking sequence properly, let’s picture a situation.

Let’s say that I’m bootstrapping the company and currently focused my efforts to build an audience through social media channels. My friend advised me to take a look at Canva.com mainly for its shockingly quick way of generating good enough design.

It supposes to have a great number of editable templates, with the attractive, generic but sufficient quality. Finally, a plug and play solution to test your ideas in public without messaging your designer in the midnight. OK, you got me. Lets’ explore this more!

I’m typing canva.com because it’s easy to remember. 1 bonus point! Well, wait a bit. To my surprise, I’m not entirely sure whether I arrived at the right page. This is what I’m seeing.

I recall my friend mentioning a couple other SaaS brands and now I’m confused as I don’t remember which name belongs to which tool. Also, I don’t have a team. Actually, as I don’t consider myself as a creative person and rather executive. Therefore, I’m not interested in unleashing my creativity. Is this some kind of collaboration tool for designers where they share resources and inspiration? I guess I was looking for something else. Or not?

Disclaimer: One possible explanation for the current Value Proposition statement could be the efforts to attract teams to increase number of premium users rather than nondirectly inviting single professionals. Which is completely valid approach. My judgment comes from anangle of the individual and ommits temporary business strategy.

Now, let’s travel to an alternative universe. Where Canva’s Value Proposition communicates different core unique value of this life-changing tool. (Undoubtedly it changed the lives of many solopreneurs and marketers. Including mine — as I don’t have to create a logo for my girlfriend’s new travel blog)

This alternative universe feels like home!

Finally, my interpretation resulted in higher confidence that I arrived at the right place. As a non-designer entrepreneur, I can create attractive materials for my business. All-in-one solution provides the solution for most of my marketing problems inside both the digital and analog world.

Hopefully, you now understand how the words that resonate with visitor drive their behavior towards action without any doubts.

So what?

As a founder, product manager, UX designer or business owner you might wonder, how can this help with a positive effect on any KPIs?

Klientboost presented few SaaS cases when they managed to increase conversions with tiny changes to their Value Propositions. Check these two highlighed examples:

1. 15% lift in contact form submissions when adding a “response time of 24 hours” in the main title

2. 93% lift in conversion rate for finishing survey when added the word “affordable” as part of the value proposition.

My advice is to brainstorm with your team, what can be the alternatives to the existing value proposition that can resonate on a deeper level with people that bounce off your landing page.

Or there is also another smart hack, which my good friend (Product Manager for networks monitoring SaaS tools) successfully applied in the past. He basically asked their stable and trusting customers how would they describe the software tool in their own words as a layperson.

Good luck!

[minimumviabledesigns-blog]

Feedback from only 5 people solves 80% of your website problems

Nielsen & Norman group is a leading voice in a user experience field last decades. Founded by ex-VP of Apple and the other guy holding 79! United States patents. Their research transformed how companies test effectivity of the websites.

You would assume that for user testing you need to call specialists. White collars that would find 10 people similar to your target users. Collected bucket of issues will cause you mainly a headache first. Where would you find resources to fix these issues?

What you can do instead is to do Guerilla testing. Simply explained, asking people in a coffee place to give you an opinion on your website. To get more confidence with the release you need to ask only 5 people.

Why 5 people? Nielson & Norman group discovered that the best results come from testing no more than 5 users and running as many small tests as you can afford. Here is the chart of their cost-benefit analysis of the user testing.

So how can user testing bring you the profit? Or better said, save the decreasing revenue? Well if tests reveal that users are stuck and not able to move with next step, whether it is subscription, package purchase or buying the ticket something is probably wrong with the visibility of the Call to action buttons.

Try it first with the one user testing and you will see how much you don't know about your own website.

Thank you for your attention!