Change Details

## Background The homepage of the Library Card was last redesigned as part of our [[ https://meta.wikimedia.org/wiki/Library_Card_platform/Authentication-based_access | Authentication-based access ]] rollout (T230524). We didn't spend substantial effort on this, largely getting it to a point where it was functional. Since that rollout we've received a wide range of feedback and had a chance to think about what works and what doesn't, and now wish want to update the page to make the calls-to-action and user workflows clearer. Feedback and input from the community was collated at https://meta.wikimedia.org/wiki/Talk:Library_Card_platform/Design_improvements Our primary goals with the new homepage design are to answer the following questions for a new user: - What is The Wikipedia Library? - Who is it for? We want visitors to feel compelled, inspired, and curious by what TWL is, and we want visitors to discover how to proceed with using TWL. As part of this update we should implement the new homepage with Bootstrap 4, and use it for all new designs moving forward. ## Links - Design specification: https://docs.google.com/document/d/1nOp6PkxpSKsMRA5G7IBqlwsgaIhXLJRr_copVrJU-RE/edit - Desktop prototype: https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A917&viewport=2917%2C926%2C0.37263959646224976&scaling=min-zoom&page-id=975%3A0 - Mobile prototype: https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A808&viewport=585%2C434%2C0.44750702381134033&scaling=scale-down&page-id=975%3A1 - Tablet prototype: https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A2&viewport=-1450%2C-643%2C0.6004251837730408&scaling=min-zoom&page-id=954%3A0 ## Acceptance criteria The homepage should look and behave like the prototype. Further clarifications below: - //Login process// - Users who successfully log in and meet the access criteria should be sent to the existing homepage in its logged in state - If a user logs in and isn't eligible for access, they should be returned to the same page. - The criteria section should show them which criteria they don't meet with a red X - A message should be shown under the criteria explaining the situation (use the existing messages here) - //Collection highlights// - By default, the resources highlighted at the bottom should be ... [TBD] - If a user clicks the text for a particular tag, the logos below should be filtered to resources with that tag - If a user selects a tag which is an empty category ... [TBD] - If a user clicks a button in the footer which takes them to an internal page ... [TBD]

## Background The homepage of the Library Card was last redesigned as part of our [[ https://meta.wikimedia.org/wiki/Library_Card_platform/Authentication-based_access | Authentication-based access ]] rollout (T230524). We didn't spend substantial effort on this, largely getting it to a point where it was functional. Since that rollout we've received a wide range of feedback and had a chance to think about what works and what doesn't, and now wish want to update the page to make the calls-to-action and user workflows clearer. Feedback and input from the community was collated at https://meta.wikimedia.org/wiki/Talk:Library_Card_platform/Design_improvements Our primary goals with the new homepage design are to answer the following questions for a new user: - What is The Wikipedia Library? - Who is it for? We want visitors to feel compelled, inspired, and curious by what TWL is, and we want visitors to discover how to proceed with using TWL. As part of this update we should implement the new homepage with Bootstrap 4, and use it for all new designs moving forward. ## Links - **Design specification:** https://docs.google.com/document/d/1nOp6PkxpSKsMRA5G7IBqlwsgaIhXLJRr_copVrJU-RE/edit - **Desktop prototype:** https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A917&viewport=2917%2C926%2C0.37263959646224976&scaling=min-zoom&page-id=975%3A0 - **Mobile prototype:** https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A808&viewport=585%2C434%2C0.44750702381134033&scaling=scale-down&page-id=975%3A1 - Tablet prototype: https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A2&viewport=-1450%2C-643%2C0.6004251837730408&scaling=min-zoom&page-id=954%3A0 - **Design brief:** https://docs.google.com/document/d/1sWf6-BUIOQ58Zz17HjcYibY1qfQT4LZGAeGQ_av3Plc/edit ## Acceptance criteria The homepage should look and behave like the prototype. Further clarifications below: - //Login process// - Users who successfully log in and meet the access criteria should be sent to the existing homepage in its logged in state - If a user logs in and isn't eligible for access, they should be returned to the same page. - The criteria section should show them which criteria they don't meet with a red X - A message should be shown under the criteria explaining the situation (use the existing messages here) - //Collection highlights// - By default, the resources highlighted at the bottom should be ... [TBD] - If a user clicks the text for a particular tag, the logos below should be filtered to resources with that tag - If a user selects a tag which is an empty category ... [TBD] - If a user clicks a button in the footer which takes them to an internal page ... [TBD]

## Background The homepage of the Library Card was last redesigned as part of our [[ https://meta.wikimedia.org/wiki/Library_Card_platform/Authentication-based_access | Authentication-based access ]] rollout (T230524). We didn't spend substantial effort on this, largely getting it to a point where it was functional. Since that rollout we've received a wide range of feedback and had a chance to think about what works and what doesn't, and now wish want to update the page to make the calls-to-action and user workflows clearer. Feedback and input from the community was collated at https://meta.wikimedia.org/wiki/Talk:Library_Card_platform/Design_improvements Our primary goals with the new homepage design are to answer the following questions for a new user: - What is The Wikipedia Library? - Who is it for? We want visitors to feel compelled, inspired, and curious by what TWL is, and we want visitors to discover how to proceed with using TWL. As part of this update we should implement the new homepage with Bootstrap 4, and use it for all new designs moving forward. ## Links - - **Design specification:** https://docs.google.com/document/d/1nOp6PkxpSKsMRA5G7IBqlwsgaIhXLJRr_copVrJU-RE/edit - - **Desktop prototype:** https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A917&viewport=2917%2C926%2C0.37263959646224976&scaling=min-zoom&page-id=975%3A0 - - **Mobile prototype:** https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A808&viewport=585%2C434%2C0.44750702381134033&scaling=scale-down&page-id=975%3A1 - Tablet prototype: https://www.figma.com/proto/xXKTKB2wodZfbkTdNMoXTp/Homepage?node-id=975%3A2&viewport=-1450%2C-643%2C0.6004251837730408&scaling=min-zoom&page-id=954%3A0 - **Design brief:** https://docs.google.com/document/d/1sWf6-BUIOQ58Zz17HjcYibY1qfQT4LZGAeGQ_av3Plc/edit ## Acceptance criteria The homepage should look and behave like the prototype. Further clarifications below: - //Login process// - Users who successfully log in and meet the access criteria should be sent to the existing homepage in its logged in state - If a user logs in and isn't eligible for access, they should be returned to the same page. - The criteria section should show them which criteria they don't meet with a red X - A message should be shown under the criteria explaining the situation (use the existing messages here) - //Collection highlights// - By default, the resources highlighted at the bottom should be ... [TBD] - If a user clicks the text for a particular tag, the logos below should be filtered to resources with that tag - If a user selects a tag which is an empty category ... [TBD] - If a user clicks a button in the footer which takes them to an internal page ... [TBD]