4.1 | Prototype

When creating the prototype for our idea we had to think of a couple of things. Like what we wanted to accomplish, how to accomplish it and where with who. We knew we had to create a digital solution since our entire idea revolves around an already digital platform. We got to this step before learning about Adobe XD. At the time we planned to straight-up make a live mockup site of

Canvas and edit its HTML and CSS to fit our needs. We scrapped this idea before we even began looking at the code as this would take forever and would also use too many already existing assets. But then we got introduced to Adobe XD and its tools. Something that made this a lot simpler for us.


We shifted focus over to creating an Adobe XD based prototype and had to come with a quick solution to all things we needed. We figured out that Adobe XD actually lacks a lot of the features needed for an effective site. Elements like text fields and lasting updates after button presses. The solution to this would be creating a buck load of steps, and have Adobe XD act as a button to get to the next site. Almost like a powerpoint presentation, with more accurate clicking involved. Here is an image of how the entire workspace looked, at the end of this post is all the linked pages so you can see exactly what I’m talking about.


Click the prototype link above to walk through the prototype as you like.  Below you will find both a simple walkthrough of the prototype in a video and also the second video where there is more of a talking-heads style explanation video.

— Quick Walkthrough video

— TH Prototype  Video

What was our vision creating this prototype?

We wanted to create a fully, or at least semi-functional site containing the whole package. Our idea was supposed to be comparable with the current live version of Canvas. You should be able to have both beside each other and point out differences and feel how much greater our product was in the end-stage.  We were limited by the current technology that Adobe XD currently has packed, we were lacking important features that would make out most if not all our idea was based on. Being able to have lasting changes made by the user, and text input fields. We really needed these things in our prototype, or else our product would not be correctly observed and tested later.

We had to create the illusion of progress. Creating step by step workplaces that gave the illusion of progress. It ended up being a lot more work than we thought but we are really happy with the result and product we are able to present today.

Below are the visible connections between the pages. Giving insight into exactly how we created this project.