Design a PDF template for activity

[srish]

Currently, we allow downloading of an activity in the PDF format via clicking a button on the activity page. See the screenshot below. This is so that educators can have access to the resource offline.

See an example of a PDF downloaded using the feature but this is generated via code, it looks ugly and needs massive design improvement.

Yaya Mamoudou.pdf.

Ultimately, we will be porting all manually written activities from https://kriti.unstructured.studio/messaging-station/ on ZubHub when it is fully ready.

[ladyami]

I don't understand the task are we to design a PDF template or this screenshot is the template we are to improve the UI
please anyone who understands should please explain to me

[Temabo]

@ladyami I think what @srish means is that the current feature allows users to download activity content as a PDF, but the design of these generated PDFs isn't visually appealing and needs improvement. The goal is to make the PDFs more attractive and user-friendly for educators who will use them offline... So basically, we are to redesign the PDF Template.

[N-TITIAN]

@srish following Yaya Mamoudou.pdf. I came up with this PDF design for projects.

The heading "Project Title " can be replaced with the actual project title

Here is the link to the file
https://drive.google.com/file/d/1RQ-JRy81sigFzXSsiWgCZz1AfYWednBU/view?usp=sharing

[ladyami]

@srish I came up with this design idea simple and easy to understand
I use the 60-30-10 rule for the color, 60% white for background, 30% yellow/pink for important subjects and 10% call to action which are buttons in blue color.
Headlines are intentionally bolded to ensure clear and immediate recognition as distinct sections when the document is converted to PDF format. This visual emphasis enhances content organization and facilitates efficient navigation for readers."

variants

https://www.figma.com/file/M3Cl5VO1enP6a3jgvZD4TI/Zubhub-header?type=design&node-id=11%3A2&mode=design&t=WYoi6sXk7bOAmKs5-1

[maureen-oz]

Currently, we allow downloading of an activity in the PDF format via clicking a button on the activity page. See the screenshot below. This is so that educators can have access to the resource offline.

See an example of a PDF downloaded using the feature but this is generated via code, it looks ugly and needs massive design improvement.

Yaya Mamoudou.pdf.

Ultimately, we will be porting all manually written activities from https://kriti.unstructured.studio/messaging-station/ on ZubHub when it is fully ready.

i will like to work on this issue

[ladyami]

Currently, we allow downloading of an activity in the PDF format via clicking a button on the activity page. See the screenshot below. This is so that educators can have access to the resource offline.

See an example of a PDF downloaded using the feature but this is generated via code, it looks ugly and needs massive design improvement.
Yaya Mamoudou.pdf.
Ultimately, we will be porting all manually written activities from https://kriti.unstructured.studio/messaging-station/ on ZubHub when it is fully ready.

i will like to work on this issue

if you are a designer propose your design if you are a developer you will have to wait for a design to be approve

[ozoilo]

@yaya-mamoudou I will like to redesign this feature

[Temabo]

Hi @ozoilo You don't have to ask before you drop you design suggestions. Read the Issues and drop your Ideas underneath it

[yokwejuste]

When the design will be approved I'll work on this feature

[yaya-mamoudou]

@yaya-mamoudou I will like to redesign this feature

Please go ahead. You are free to propose how you think it should be. Thank you

[mehreeee]

Hi @srish @yaya-mamoudou I've designed some samples I think it should look like. They are pretty straightforward and easy to understand and follow.

[d-arkangel]

Hello @srish, hello everyone. Here is my design idea for the Activity Template:

Here is the Figma design for it:
https://www.figma.com/file/WYduIPgkimvbDQVsTJtqUR/Untitled?type=design&node-id=7%3A893&mode=design&t=YNXhstbZcbLIniad-1

And here is the PDF:
Frame 1 (1).pdf

I hope this contributes fine to the project.

[Fidausym]

Hello @srish @tuxology. This is my proposed solution for this issue.

Figma file: Proposed Plan for the PDF templates

1. Project Overview ( Case study)

2. User Persona

3. Ideation process: I created 3 samples for this proposed solution. Two are redesigns of the former template and the other an entirely new exploration.
   

A) First sample is a new design. For this design I added a “PDF preview” which is an unclickable button with a drop down arrow that hides and shows the PDF’s information. Just like the first sample I changed the “Educators name” to the project title. Instead of the usual template flow, I added pagination and structured the information in the PDF, in form of slides. Here there’s a hero page and every page has a number, each page containing different contents on the PDF. I added a content page which helps users understand the information on the page and how they’re arranged. Here instead of separating both category info and grade info, I joined both and fixed them under Project status. I also added recognizable icons and added a warning which symbolizes a need for Guardian/ Parents Presence during the project. I added an “ About me” page for the Educator which gives an overview of who the educator is and their vision. I also added contact icons when clicked would direct the user to the Educator email and linkedin page. I also changed the “More activities” heading to “ More projects by Yaya Mamoudou”, which would help the user access more work from the Educator and would also help the Educator share other of his/her project.

PDF FILE

B) Second sample is a redesign of the first templates. For the first section, I thought of changing the bold “Educators name” to the “Project title”. Then for the bar, I seperated both the share icons with the project status icons which I tested and found to be confusing to users. For the material used section I thought of adding pictures of materials used during the project to give users the pictorial views of the material.

PDF FILE

C) Third sample is also a redesign of the first templates. For this sample i removed the sectioning and instead of sticking to pictorial view i added to the material used section, I made them clickable labels, when clicked will take users to a link containing information of the materials

PDF FILES

4. Digital wireframes: My goal for the PDF template is to prioritize information placement and information structure in an understandable layout that increases the user experience of the product.

5. Mockups:
   

SUGGESTIONS ON INCREASING ACCESSIBILTY WHICH IMAPACTS USER EXPERIENCE:

1. Change PDF format to slides format eg (Google slide).
2. Change "Educator name" to "Project Title"
3. Add an "About me page" which focuses on the Educator.
4. Change "More activities" to "More projects by Yaya Mamoudou

[DonPresh]

Hi @srish I designed few iterations of how I think creator's pdf template should look like;

First suggestion

• I utilised images and text to show how the pdf will look like for the creator.

Second suggestion

A video showing what the pdf will look like

Activity.zubhub.mov

A pdf screenshot

[maureen-oz]

@yaya-mamoudou

[GloriaKaduru]

Hello! Here's my proposal of what a downloaded activity page should look like. I'd love to hear your thoughts! @srish

[Marhiposa]

hello @srish Here is a mockup for Design a PDF template for activity

Here's the pdf format

[maureen-oz]

Hello @srish,

As a junior product designer, I've carefully worked on refining the presentation design for our PDF. Addressing the earlier challenge of designing a better activity template, I've now balanced the elements to ensure a clear visual flow. The intent was to give users a clear and comprehensive overview of the activity template.

Recognising the importance of details in our user experience, I designed to show more PDF information:

1. Specifically, the upload date will give users a sense of recency,
2. The file size is crucial, particularly considering the downloadable nature of our activity PDFs. This will guide users to make informed decisions regarding their download, especially if they have storage considerations.

MY PROCESS:

1. TO ENSURE THAT OUR DESIGN WAS GROUNDED IN RESEARCH AND ITERATIVE THINKING, I STARTED THE PROCESS WITH LOW-FIDELITY SKETCHES.
2. **I ALSO DESIGNED THE ACTIVITY TEMPLATE FOCUSING ON THE LAYOUT (GOOD ALIGNMENT AND HIERARCHY EVEN WITH THE PICTURES UPLOADED IN THE PDF) **
3. I CAME ACROSS AN ARTICLE ON MEDIUM BY THE LOVELY SHRISTI SETHI AND SINCE I ENJOYED READING IT SO MUCH, I DECIDED TO USE IT AS A TEMPLATE OF HOW THE ACTIVITY PDF WOULD LOOK LIKE, BUT JUST TO SHOWCASE THE GOOD USE OF LAYOUT IN THE PDF FOR LEGIBILITY AND READABILITY

These sketches were instrumental in visualizing and testing various layouts, ensuring a strong foundation before transitioning to the high-fidelity design.

[Temabo]

@srish This is my mockup of the PDF for activity creation. It is straightforward and easy to understand.

file:///C:/Users/USER/Downloads/activities%20pdf.pdf

[roznaj]

Hello @srish, I propose this for the PDF template for activity

THE PROBLEM: Activity PDF needs a redesign.

CHALLENGES: The main challenge was Improving the UX with a main focus on: Information architecture, Cognitive overload, user-friendliness, readability and accessibility to all users especially the end users, children.

SOLUTIONS:

- For Main Challenge: Redesign of Pdf Template
With the main challenges identified, the redesign was mainly centered around each of the challenges with the following considerations:

1. Information Architecture: a simpler and more eye scannable information architecture was used by partitioning the information and grouping the information. Headings were used to improve the readability. Lists and bullet points were used to break up text and increase white space.

2. Cognitive overload: this was reduced by reducing and eliminating extraneous information. This was mainly obtained by grouping related pieces of information together. The titles are colored to ensure the user can easily distinguish them and major body information is emphasized to ensure the users scans through the most important information as easily and fast as possible thereby reducing the overall reading time and improving UX.

3. Accessibility: by considering the diverse set of users, multiple template formats are suggested to users based on the user group. This highly improves the ux by ensuring the end users identify themselves with the proposed content and flow.

4. The Screenshot

- When downloading a PDF: Proposal

1. Give users the ability to choose a template when downloading an activity resources.

2. An activity having a preview of the template is suggested to improve the user experience and help improve the accessibility of the product. A navigation tab is included between the templates to ensure users don’t have to go an extra step before change between the preview of the templates. The templates were also meant to standing out, the brand colours and identity of Zubhub was kept on each template for marketing purposes even offline.

3. User-flow

4. Templates Screenshots

For more context, please play prototype: CLICK ME ☺

[srish]

Thanks everyone for your contributions! Liked this simple & neat design developed by @GloriaKaduru: #899 (comment). It will be easier for a dev to implement. @GloriaKaduru, Could you tweak the design a bit so we have an Unstructured Studio logo in the footer and a QR code somewhere in the design for people to check out the activity online?

[GloriaKaduru]

Thanks everyone for your contributions! Liked this simple & neat design developed by @GloriaKaduru: #899 (comment). It will be easier for a dev to implement. @GloriaKaduru, Could you tweak the design a bit so we have an Unstructured Studio logo in the footer and a QR code somewhere in the design for people to check out the activity online?

Sure, I’ll work on that.

[GloriaKaduru]

Thanks everyone for your contributions! Liked this simple & neat design developed by @GloriaKaduru: #899 (comment). It will be easier for a dev to implement. @GloriaKaduru, Could you tweak the design a bit so we have an Unstructured Studio logo in the footer and a QR code somewhere in the design for people to check out the activity online?

Hi, @srish! Thank you again for this!

I worked on what tweaking the design to add the Unsrtuctured Studio logo and QR code and I came up with 3 different design ideas.

Idea 1 : Here, I worked on putting the QR code at the top of the PDF file (the first page) because not everyone might scroll all the way to the end of the downloaded activity such as in a case where there are a lot of Steps involved. This design puts the code in a spot that anyone can see at first glance.

Idea 2 : Here, the design follows what was originally done but the code is in a different position at the bottom.

Idea 3 : Lastly, a variation to the footer design which houses the QR code

Please let me know which you would prefer. Thank youu

Link to the Figma file: https://www.figma.com/file/nyUduEpFmVZ05xA8rt28Mt/ZubHub-Feature-Re-Designs?type=design&node-id=127%3A324&mode=design&t=m8GOqK2UO8OFpTDX-1

[brrkrmn]

I really like the 3rd one, good job @GloriaKaduru 🚀

[GloriaKaduru]

I really like the 3rd one, good job @GloriaKaduru 🚀

Thank youu very much!

[aqsaaqeel]

I like the 2nd one, because it is much easier to implement. But great work on all three @GloriaKaduru

[srish]

@GloriaKaduru Idea 3 is nice! <3 Could the height of the footer be reduced so we can have the same footer on all pages?

[GloriaKaduru]

@GloriaKaduru Idea 3 is nice! <3 Could the height of the footer be reduced so we can have the same footer on all pages?

Thank you! I adjusted the footer height like you suggested but I didn't want to make it to small to contain the QR code (as there is a standard height for it for user experience purposes.)

You can take a look at it here on the figma file: https://www.figma.com/file/nyUduEpFmVZ05xA8rt28Mt/ZubHub-Feature-Re-Designs?type=design&node-id=127%3A324&mode=design&t=P0F2VDxES7vo8OcX-1

[srish]

Thanks a tonne @GloriaKaduru! This design is final.