Presentation Builder

Presentation Builder

This project was a hackathon that I had to build the User Interface under 48h.

Role: UI Designer.

This one was quite challenging for me but also very fun to do, the deadline was really short, each member of the team involved in this project live in a different city and we had to communicate via Skype.


The Task


Online course creators are always looking for ways to make the most engaging course materials possible for their students. More engaging content can lead to better understanding, retention and satisfaction, making it a very important area to improve. Additionally, a standalone presentation builder, without any direct relationship to Thinkific, can be used for lead generation and other marketing efforts.

Currently, it is possible to create a rudimentary presentation within Thinkific’s course builder application, but it doesn’t support all use cases and is hampered by being deeply embedded in the course building application.


To help our course creators easily create and offer amazing content, we’d like a standalone web application that lets people build presentations from PDF documents.

Basic Specs:

1. Should accept a PDF document and split it into an image per page.

2. The PDF document should have at least one page and no more than twenty.

3. Upon having the PDF split into an image per page, the user should be able to record audio for each page. Audio is optional per page.

4. The presentation itself should have a name (not to exceed 255 characters) and a description (unlimited size). The description should allow HTML.

5. Each page within the presentation should consist of an image (required) and an audio file (optional). Each page within the presentation should also store its sort order within the presentation. Each page should be sorted by default in the order it appears in the original PDF document. Each page within the presentation should also know the length of the audio (in seconds) if the audio is present.

6. It should be possible to edit a presentation. The end user should be able to edit the name and the HTML description.

7. It should be possible to edit a presentation page. The end user should be able to change the image and to replace and/or delete the audio associated with the page. The end user should also be able to re-order a presentation page within the presentation.

Additionally, the end user should be able to insert a new presentation page within the presentation by providing a new image. They will also be able to record audio for that page.

8. The end user should be able to export their presentation. An exported presentation should be in the form of a zip file. The zip file should contain all images and audio files that make up the presentation. Additionally, a manifest file should be present that describes how the images and audio files are related within the presentation. This is to support importing the presentation.

9. The manifest file should be structured as a JSON file and should include the following information:

a. Author
b. Date
c. Presentation Name
d. Presentation Description
e. An entry per page, where each entry contains:
i. The sort order of the page
ii. The name of the audio file within the zip if the audio file is present
iii. The name of the image file within the zip
iv. The length of the audio file in seconds if the audio file is present

Stretch Specs:

1. Provide a way within the presentation builder to preview the presentation.

2. Capture the users’ email address before allowing them to create a presentation.

Powered by