This task is for working on the layout of the newcomer homepage, in terms of exactly where modules are placed and their sizes relative to each other.
This task is also for finalizing the UI of each module to match the mockups of those modules.
For the initial version, all users will get the same homepage layout. The mockup of this layout will be the main expression of its specifications.
Invision mockups of layout: https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/354711053_NH-Homepage_Layout (in places where the mockups and the specifications on this task disagree, the specifications take precedent.)
Modules will vary in terms of these characteristics:
- Size and shape.
- Whether they have borders.
- Whether they are white background, or have a different color background.
- Whether they have drop shadows and the strength of the drop shadow.
Specifications:
- Highest hierarchy module: Start module
- Size: large (min-size 789px)
- Border: Module is boxed
- Bg color: white
- Drop shadow: strong [box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15);]
- Secondary hierarchy: Help module (and all future sidebar modules)
- Size: small (one third of highest hierarchy module)
- Border: Module is boxed
- Bg color: light grey
- Drop shadow: light
- Tertiary hierarchy: All modules position in main content area
- Size: mid (half of highest hierarchy module)
- Border: Module is boxed
- Bg color: white
- Drop shadow: light
Future: this is a list of capabilities that we will need for future versions of the homepage, listed here to facilitate planning.
- Personalization: different configurations of the homepage should be displayed for different users. This means that:
- Different modules should be shown and not shown for different users depending on their welcome survey responses and edit history.
- Modules could be shown in different orderings on the page for different users.
- Some modules may have a "larger" and "smaller" mode, which would depend on the user.
- We should be able to A/B test these different configurations.
- Homepage should be customizable or editable by the user, for instance to permanently dismiss a module, or to cause a module's filters to be sticky.
