Home page and registration page

[road2nowhere]

Single registration page where it is possible to select whether I'm an NGO or helper and forms, texts and images change accordingly (big image on the left and text can also stay if we don't find anything better.

How to get here?
Via link "Registrieren" on the Home page

[markusrubey]

I tend more to the upper screen in terms of a landing page. What if a visitor only want's to find out about where2help and all he gets is a list of appointments on which he is not able to act on because he needs an account? That's a broken experience in my eyes.

I think the landing page should carefully balance information about what where2help is and what it stands for, account sign-up/log-in requirement and the appointments list.

[road2nowhere]

Actually I think the list itself would explain pretty well what it's all about and we should show the content right away. It's a much stronger call to action. The list needs some work and there could be some extra info on top on what it's all about, but I think content first would be a good strategy also for W2H. (After all, the idea is pretty simple and we wouldn't need to much text to explain it.)

[markusrubey]

Maybe a combination of the two will do it? As @klappradla mentioned on trello: the landing page should definitely point out that there is an Android and iOS -App, plus other infos as well, i would agree on that. On the other hand I don't really know how much work it would be for the web app to display the list on the landing page.

[road2nowhere]

I just had a similar thought...
Below the registration form there could also be just an excerpt of the list (sth like "People needed urgently close to you) with below a link saying "To view the complete list, please sign in or register). That would show that the thing is alive, communicate how it works, and create interest. What do you think?

I agree that there should be additional info available (good point that the Apps need to be clearly visible), but there shouldn't be too much explanatory text on the first page.

[road2nowhere]

Here's a wireframe how a mixed version could look like.

[road2nowhere]

Here's also the content centric variant with the list available without login. And a separate registration page.

Maybe we could use tiles instead of a list on the web to make better use of the space? I tried it out in the wireframe. What do you think?

[markusrubey]

I really like where this is heading. Great iterations!

(Picking on the last submission)

I think the information part is covered pretty well by now, i don't miss anything. I would like to propose some changes on the information hierarchy though. But first, the appointments problem. I don't see any chance of getting them on the frontpage as of a MVP release, so i guess linking to them should be the way to go for now. This could be nicely done with a big prominent card which reads for e.g. "Es werden zurzeit 468 Helfer gebraucht ... go and check it out!" or something similar. Having something like this leads to the hierarchy problem. A card like this should be placed pretty prominent under the header image for example. I would suggest following order: toolbar - header - big fat card link - signups - app banner - footer

Since i'm not working on the web app this should really involve @klappradla, because he has a better understanding of implementation details. Anyways, i like the concept and I'm happy to help :)

[klappradla]

On the landing page

I also like #2 (comment), good job! The difference between registering as an ngo vs. as a volunteer is way clearer than in the facebook-like approach here #2 (comment).

Also dig the footer - good placement of e.g. the language thing. And dig the registration page.

One thing to keep in mind: the web app is fully responsive. Both landing page variant might be problematic on mobile including mobile internet connection.

For #2 (comment) I don't see the point in showing the whole feed functionality including filters and pagination. I'd rather use the section as a teaser for the real, less cluttered list view. We can switch to tiles here (won't recommend for the real list though), but I'd reduce them and for instance leave away the "Ich helfe" Button here, rather forcing people to click on them to get away from the landing page.

On the image

I'd move both, the registration buttons and the app ad up into the image, too (making the image longer), and shorten the ad text. This allows you a better separation into 3 main items: registration, needs, footer, plus less boxes and stuff. What do you think?

General

• Do you want us to switch to a full-screen layout, without whitespace on the left and right? Or is it just the image that should be full-width? I would argue against a full-width layout for e.g. calendar and list (unusable on 27")
• First- and last-name can't be one field
• For NGOs, I skip the last-name and only use "name"
• Why skip the phone number field? Accident or reason?
• I added the password-hint (8 chars) as a placeholder rather than a hint section below/above the input yesterday. Do you consider this bad practice UX wise? (a screen reader might not recognize it, I just realize now)

Like where this is moving!

[road2nowhere]

@klappradla and @markusrubey THANKS! A lot of good suggestions.

• @klappradla
  So you are saying we can integrate a teaser line like in version1 in version 2 already in MVP? In that case, can we get access to the user's location to only show relevant stuff that is not too far away?

In addition, from that teaser it would be possible to link to the complete list on a separate page even without signing in, right?

Some answers to your comments:

• I was thinking of having the (only) image full-width, but I would ask Tom for his eye and support here. Agree, that in general it should NOT be a full-width layout.
• Do we really need first & last name? Why can't it be a single field?
• Yes, I forgot the phone number :) Will add it...
• I was also wondering if we need the location, as well... We won't, if we can have the location data in the App, so that we can send notifications only if events happen in a reasonable distance from the user
• Can't see the password hint yet, but it sounds like an acceptable alternative if I have the correct image in my head.

[klappradla]

can we get access to the user's location to only show relevant stuff that is not too far away?

We could try to access the user's location, but I wonder if it's worth the effort. It won't work on every machine / in every browser, the user has to allow it (at least in Chrome and Safari) and won't do it if she did not really see why.
The teaser is possible though.

To comments

• Full screen for the image makes totally sense. I'd go with that.
• Separate first- and last-name was just what we came up at the beginning. If stuff like insurance, etc. comes into place, it will definitely be a must.
  For the rest, we could actually put this up to discussion.
• Location: I'd try to keep the registration process as short and simple as possible. For the location to be usable, we would have to validate / process it, etc. Plus it is an additional field. I would leave this for the MVP and see if a use case for this really pops up over time.
• Password-hint is prop. not up yet, as I don't have deployment access.

[road2nowhere]

Ok, then let's skip the location for now on the web. First and Last name separation is also not a top priority, we can keep it as it is. Thanks for the answers!

[road2nowhere]

Here's the updated version. Do you have more comments? We could start involving Tom for the visual layout and illustrations, if there are no major things to change structure wise.

[klappradla]

Pardon my late response. Too busy with work...

The last two screens fit very well, I'll start implementing them. So yeah, you can go ahead with illu stuff.

Some warnings up front (only basic stuff, no worries):

• I probably won't display the Anmelden und Helfen button on the need boxes right away. It's an ajax action, it needs some tweaks to be able to forward to the sign-in/up screens
• I will have to cut down the Erfahre wann und wo Du gebraucht wirst und reserviere deinen Slot in the mobile view, cause it's too long for small screens.

I'd keep this issue open until I either copied the wireframes over to the other repo or implemented it. Did not decide on the best workflow there yet.

[road2nowhere]

Super :)