Design kickoff 🏈

[sarahmonster]

👋 Hello localforage friends! I am Sarah, and I'm one half of @octopusthink. You probably know the other half already: @tofumatt.

I offered a little while ago to work on redesigning the website, currently at https://localforage.github.io/localForage/, to make a little bit more user-friendly and to expand on some of the "what is localForage, anyway"-type questions that people newer to the library might have. I'm not especially Javascripty, so I'm good at helping explain complex concepts so that everyone can understand them.

Anyway!

Before we start working on the website, let's do a little bit of thinking about localforage's overall brand, and what we're looking for in a website. I have a standard set of questions I tend to use to establish context for any design process. @thgreasi, @tofumatt, when you've a moment, I'd love your feedback/opinions about the following:

1. What is your primary goal for the website?

What do you want visitors to do after they visit your website? What is the most important part of the website?

2. Do you have any existing brand materials?

This can include a logo, colour palette, fonts, and any other visual assets you may already have. It can also include more abstract brand assets, like values, brand statements, etc.

What makes localForage localForage? 😉

3. How is your current website effective (or ineffective)?

This can relate to the visual design or more broadly the overall functionality. Feel free to share anything you think is particularly effective about your current site, as well as any sources of frustration or confusion.

4. What impression or feeling do you want to relay to your visitors?

What image do you want to project? Do you want to come across as serious, or more lighthearted? Modern, or more traditional? It can help to list adjectives to describe your organisation, so for instance: casual, professional, elegant, eco-friendly, health-conscious, powerful, innovative, caring, friendly, etc.

5. Who is your target audience?

How old are they? What do they enjoy; what values do they hold? Feel free to share any research or data you may have about your audience.

(I'm going to assume "Javascript developers" here, but more details are always helpful!)

6. Can you share any examples of other designs (websites or otherwise) that you find especially effective?

Bonus points for also sharing what you find effective about them!

[thgreasi]

Hi @sarahmonster ,
Nice to meet you, even if it's just in GitHub :)

1. First time visitors would want to know the benefits of using LF. That is being able to use a simple key-value store API on any browser, using the best available storage method available, w/ minimal-to-no configuration. On their subsequent visits they would probably be interested at the documentation of the API of LF.
2. The only brand material I have in mind is this logo at https://github.com/localForage/localForage-logo . FYI this was actually just a fun experiment following the "look what I can do w/ CSS with a single
   " paradigm. As a result it's far from great given the limitations that the above technique. Since we didn't have anything before that, deciding that it was fair enough and start using it, was an easy choice.
3. Atm it's effective by explaining right away with a code example how the LF API looks and presents the benefits over the plain localStorage API. If we also compared this with the respective code required to achieve the same result w/ webSQL & IndexedDB, it would be even more impressive imo, since those two last options require way more code. The design is old enough & being left aligned feels old, but on the other hand the "docs on the left, code example on the right" is still a great approach imo.
5. LF is great for side projects and hackathons, since it allows you to easily store & retrieve info on any browser w/o much effort. Tons of people are using it already on their mobile apps w/o even knowing, since it's the core of ionic-storage https://github.com/ionic-team/ionic-storage/blob/master/package.json#L30

[tofumatt]

1. What is your primary goal for the website?

Exactly what @thgreasi said 🙂. First-time users want to understand what localForage is, why they'd use it, where it works, and how to install it. Future visitors will want:

• API docs
• extensions (think: getItems, etc.)
• third-party integrations (think: redux-persist-localforage, etc.)
• developer tools (think: Chrome Devtools extension)

2. Do you have any existing brand materials?

Aside from the existing CSS logo: nope. We've been using the phrase "Offline storage, improved." since localForage's inception, and I think it's a good tagline. But that's about it.

I think the original aim with localForage was to abstract away two worries web developers had with offline storage:

• compatibility was a mess
• the APIs were too complex

The first problem is much more solved in today's JS landscape than it was six years ago, but the second point remains: browser storage APIs have rough edges and the main one—IndexedDB—is intentionally low-level.

So the goal of localForage is that it's something super-easy you can install and run anywhere to get started saving data offline.

I think what separates it out from other libraries is the simple, drop-in nature. To this day you can include localForage on a website by including a <script> tag and it'll "just work". So compatibility, simplicity, and no-config is nice, though you can customise it greatly if you want.

3. How is your current website effective (or ineffective)?

I agree that the site is somewhat effective at showing the API, and it also does a good job of showing how easy the localForage API is to use. I'd like it better if we showed what something like setItem in localForage would take in IndexedDB/WebSQL like @thgreasi said.

I think where the site falls short is highlighting the ecosystem around localForage, from extensions to devtools to 3rd-party library integrations, and showing the breadth of its use. It gets a reasonable amount of installs from NPM, but that isn't even highlighted anywhere on the website. I think we can "pitch" localForage a lot better than we currently do 🙂

4. What impression or feeling do you want to relay to your visitors?

I think "straightforward", "easy", "simple", and "effortless" are good feelings to associate with the experience of using localForage. It isn't a power-user-library; it's simple and it gets out of your way. I want to relay that localForage has been around a long time, deployed to high-traffic websites, and still works great.

5. Who is your target audience?

JS devs is right. Targetting hackathons (and maybe new devs/students) is a good call, because it's an easy library to install and get out-of-the-way. We get a lot of issues in the repo asking about React compatibility, I assume from mostly new developers. It might be worth mentioning it is compatible with React because it's just JS.

6. Can you share any examples of other designs (websites or otherwise) that you find especially effective?

N/A