Information on LoopBack landing page is vague and uninformative for potential users

[cliff-km]

URL of the page

https://loopback.io/

Nature of the issue

This is an issue with the UX, information architecture, and/or copy used on your landing page.

Expected behavior

I expect to quickly understand what the library and/or product does and how it might be useful to me.
Is this a library? Is it a BaaS? Is it a tool?

Actual behavior

I had to dig to even get a hint of what LoopBack is.

I found the information on the LoopBack landing page very confusing for someone who hit the site unprimed. I think the information on the introductory landing site is mostly only meaningful to people who already know what LoopBack is.

Here's what happened so you can understand where I'm coming from. I am a web developer who might use something like LoopBack but I was searching Google to find some audio software of the same name. First off, the Google page description was already vague but I clicked the link out of idle curiosity.

From the copy that greets you on the page there's nothing that really tells you what LoopBack does AND how it does that. Only the former if anything.

Suggested resolution

I had to go to the docs page to see: "LoopBack is a highly extensible, open-source Node.js framework based on Express that enables you to quickly create APIs and microservices composed from backend systems such as databases and SOAP or REST services."

Something like that should be on the landing page and probably a bit more too because I'm still not sure how LoopBack would improve my development life. You could potentially put a block under the hero section and before the 4 "features." Or, you could move the GitHub stars and place some useful information there.

The text right below the main header is often used to pitch the usefulness of a product/service. Right now it says: "LoopBack 4 is the next step in the evolution of LoopBack." which to someone unfamiliar with the tool might as well read "LoopBack is the new version of LoopBack." I'd update this to be more of an elevator pitch or at least tell people what exactly LoopBack is.

Here's the current Google description: "A Brand New Core. A brand new LoopBack core to deliver great extensibility and flexibility written in TypeScript/ES2017." Not very informative, so getting Google to pick up something else would be helpful.

Something else I personally find helpful for understanding a new tool is a visual example of the tool in use. For example, see: https://www.styled-components.com/ or https://reactjs.org/

[cliff-km]

I hope this doesn't come across as harsh. My intention was for this to be helpful. Most people who experience this would just bounce but I was actually pretty curious what the tool does.

[dhmlau]

@CliffWMiller, thanks for your feedback and suggestions! I agree that the "second title" under LoopBack 4 is only meaningful to people who know what LoopBack is.

Taking your suggestion, I'm thinking:

Option 1: Minimal change. Keeping the main title and update the secondary title to be more descriptive of what LoopBack is.

Option 2: Update the secondary title to have a better description of LoopBack. (I actually like this one better)

WDYT?

Looking at https://reactjs.org/, I like the "get started" button being very prominent. (I was thinking the other day whether we should put the download info npm i -g @loopback/cli on the landing page :) ).

[dhmlau]

cc @strongloop/loopback-maintainers ^^

[cliff-km]

@dhmlau
I think I agree with you and like the second one a little more than the first.

On the get started thing. I was just looking at the page again and noticed the "Ready to build amazing things?" block at the bottom. Maybe that could get moved up.

I'm not sure exactly where but my gut feel is maybe right after the features section. So it's kind of like you come to the site, get introduced, then the features should kind of tell you how it might help you. Then theres a call to action for getting started. After that, there's the help section which lets you know there's support available. Then, the user and testimonial information is there to sort of help people who are still skeptical about considering it, it kind of reassures them that others are using it and have found it useful.

[dhmlau]

@CliffWMiller, I think the flow you described above makes sense. If we're moving the "get started" section up, we probably need to change the background color of that section too. :)

FYI - I have an article about creating a frontend on top of the REST APIs created by LoopBack: https://developer.ibm.com/tutorials/end-to-end-nodejs-application-with-loopback-4-cloudant-and-angular/. Despite the link says angular, it is actually using React.js. :) Hope it helps.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed due to continued inactivity. Thank you for your understanding. If you believe this to be in error, please contact one of the code owners, listed in the CODEOWNERS file at the top-level of this repository.