Create UI for D4/M4 Pathway Landing Page

[chloeatplay]

@zzzndr let's elaborate on your wonderful concept studies of a map :flags: and tackle first the pathway page :beers: :surfer: :+1:

[zzzndr]

Here is the starting point of concept studies of the pathway page

1. default view
2. rearrange view which shows the grit

[zzzndr]

here is a link to a moodboard http://www.pinterest.com/zzzndr/openbadges-discovery-pathways-lookfeel/

[zzzndr]

@chloeatplay @stenington @threeqube

Last monday at the weekly meeting I understood the pathway section of the pathway page will be zoomable & pannable.

I’ve been pondering why as a user I would want to zoom the pathway page, but I can’t find a good reason to do so apart from zooming out to get a complete overview of the entire pathway.

Can somebody explain me why? (:

Also, that does imply there will be a fixed height of the page as well right?

Included is a screenshot of civilization which has a normal view and an overview mode, is that how it will work? (:

[chloeatplay]

@zzzndr I think you pinpointed exactly what functionality would suit a zoom out function :) The idea of looking at your pathways' overview is a very powerful one. In the meantime, please keep in mind that for mobile this page should probably be 3 rows wide (ala duolingo) since otherwise it becomes crowded.

[zzzndr]

@chloeatplay aah, ty. so just to be sure, we're not talking about googlemaps style zooming right? more like 2 levels?

[zzzndr]

here are a few concept sketches for the desktop

• variation header with green / blue zelda landscape

dark background https://redpen.io/qot5fj

dark background, nodes instead of grid (would only be visible in rearrange mode) https://redpen.io/wbzoex

dark background, possible popup https://redpen.io/5e72du

dark background, another popup variation https://redpen.io/hm4aw6

• variation header with sand coloured landscape https://redpen.io/wyrefm

These screens are work in progress (:

[threeqube]

These are super cool Sander! Added a couple comments directly via redpen. :tangerine:

[zzzndr]

Here are 2 new variations (:

• variation header with green / blue zelda landscape The header is now more detailed & refined + orange is here the colour for the icons https://redpen.io/vcs7xq

• variation header with sand coloured landscape Tried to make the overall atmosphere to be less like a treasure map + added arrows pointing downward on the dashed lines in the pathway background https://redpen.io/1735ab

[chloeatplay]

@zzzndr The above screens are :top: !! I left some comments in the redpens, would also try a version with a white background to see how it looks. :white_circle: :white_large_square: :eyes:

[zzzndr]

here is the variation of the header with green / blue zelda landscape with a light background https://redpen.io/qzwk16

[zzzndr]

Here is the version with the white background https://redpen.io/v8kd3j

Here are 2 screens of how the pathway page might look like on mobile I didn’t have time yet to optimise the header illustration for mobile

mobile pathway page with 3 columns of badges https://redpen.io/u738y6

mobile pathway page with 2 columns of badges https://redpen.io/pbj26v

[zzzndr]

here are a few more options for the pledged ribbon in the header https://redpen.io/qv872h

[zzzndr]

Here is the actual screen for D4 desktop (: Later i will upload the corresponding pages for the mobile layout.

https://redpen.io/ouky7b

[zzzndr]

here are updated versions of the sandcoloured rpg map & refined header of the treasuremap

rpg map, sand coloured https://redpen.io/8zujwn

treasuremap https://redpen.io/ayswxp

[zzzndr]

Realised last night that we haven't tried the treasuremap with green colours, so here it is: https://redpen.io/bn29rd

[zzzndr]

Here is an update of the actual desktop screen https://redpen.io/89pdua

mobile screen https://redpen.io/7uz4po

[zzzndr]

@stenington Do you see potential technical issues with this design?

Here is the new navigation design for the pathway page. https://redpen.io/xkct39

Here is design rollover navigation button. https://redpen.io/rzj1of

Here is a proposal for the position of the navigation menu. https://redpen.io/re4t5j

[threeqube]

Ooh, I like! I like how it feels more integrated with the pathway grid.

[zzzndr]

Here is a new screen with an updated navigation menu & larger pledged text in the header https://redpen.io/wv8hjz

[zzzndr]

here is a sample with a circular navigation menu https://redpen.io/aecw3k

[zzzndr]

here another possible sollution for the navigation menu I didn't think of before https://redpen.io/8n7vqp

[zzzndr]

here is the updated screen for mobile with the nodes visible https://redpen.io/spm67h

[threeqube]

I really like the last one: https://redpen.io/8n7vqp but defer to @chloeatplay's expert thoughts. :koala:

[zzzndr]

updated screen for desktop & mobile!

desktop https://redpen.io/7sx8bv

mobile https://redpen.io/tmsu4w

[zzzndr]

Here are updated screens for desktop and mobile:

D4 https://redpen.io/7sx8bv

M4 https://redpen.io/odenvr

[chloeatplay]

:thumbsup:

[threeqube]

:+1: I think we're getting close to needing a wiki that curates all these screens so they're contextualized...

[chloeatplay]

fab work, good to close :thumbsup: @threeqube next step is wikification :smile_cat: and #147