Create a Download Portal template

[jwflory]

Summary

Create a new type of page for offering downloads (e.g. research or information in a PDF or slide deck format)

Background

Is the new feature related to a problem? Describe the problem:

Sometimes the main purpose of an article/page might be to give a concrete resource to someone else. It may be in another format like a PDF document. The primary purpose of the article/page is to facilitate access to the download. We could greater emphasize that in the Inventory user experience.

What does the new feature look like to you?:

We have a good example on the main UNICEF.org website:

Describe any alternatives considered:

We could add a button object, but this feels better implemented in the form of a new page template designed around the content specifically, instead of a tacked-on shortcode that is still in a format designed first for prose.

Details

A design thinking approach should be taken first for this issue. A wireframe or user map are better places to begin from instead of code. How does the wireframe address UNICEF branding guidelines? What would this page roughly look like? What is the feedback of other team members on the design?

Once a wireframe is vetted and approved, then we can think on the implementation. How does it fit into the sidebar navigation along with type: docs pages? How is the front-matter implemented for the template? What information must a user add and what information is optional? Is this change sent upstream or is it custom to our forked theme?

Outcome

Better design and user experience for pages designed to distribute information in an external format (e.g. PDF or PPTX/ODP).

[ElHombreMorado8]

@jwflory Can I work on it?

[jwflory]

@ElHombreMorado8 Sure! This one is open. It will be a more advanced task because you will create a new layout for the Hugo theme.

Before getting into the details, let's start with a mockup or wireframe so we can visualize what this looks like together. Have you made one of these before, or do you have any prototyping experience? Do you use tools like Figma or Penpot?

[ElHombreMorado8]

Yeah I have some experience with Figma making prototypes

[jwflory]

Great. Let's go with a Figma prototype for the Download Portal. Then we can go through the prototype and share feedback once it is ready.

[ElHombreMorado8]

I'm going to start working on it. I'll show you soon.

[ElHombreMorado8]

@jwflory I already have a first version of the prototype. I'll wait for your feedback
https://www.figma.com/file/1dsbY57GnSLjTkwKWXHfoS/Untitled?node-id=0%3A1

[jwflory]

@ElHombreMorado8 Nice work. This looks great! My only feedback is to place the download button above the description text, so it appears closer to the top of the page. Otherwise, this looks ready for implementation.

I would now start looking at how to create a new single page template as a new layout for download portals. To opt into this layout, a content writer only has to specify docs: download-portal in the front-matter for it to be used.

Does this feedback make sense?

[ElHombreMorado8]

Thanks for the feedback. I am going to start working on it.

[jwflory]

Thanks @ElHombreMorado8, let me know if I can answer any questions to steer you the right way.

[ElHombreMorado8]

@jwflory I created a pull request for the issue #98

[jwflory]

@ElHombreMorado8 Thanks for your patience! I am working on catching up on the backlog of comments and Pull Requests. Hope to review this PR before the end of the week.