My Wall App Prototyping

I began the prototyping process by creating rough wire frame paper templates of the app in my sketchbook, roughly including everything that I wanted to include in the app. These can be seen in the images below.

.

Figure 1                                    Figure 2                                         Figure  3

The next stage was creating a paper prototype confirming more of the page layouts and the process of how the app would work. The black set below were the first draft, this was user tested and then the second set in the green pen were made. The green set were then moved on into the first round of prototyping for the app on adobe XD.

 

Figure 4                                                          Figure 5

Prototyping with Adobe XD

Below you can seen the first design of the app created using the Adobe software XD.

 

Figure 6                                                                                    Figure 7

The design of the app was changed to have a darker blue background to make the text easier to read. However, pages on the app were designed so that the user can edit the colour theme of the app to their preference, as shown in the images below. To view this process in real time please view the demonstration video using Adobe XD, this video can be found on the communication page.

  

Figure 8                                                                  Figure 9

Below shows a small selection of the completed prototype pages.

  

My Wall Product Prototyping

The below images show the prototyping process of the My Wall product. This was the first stage of designing the frame aspect of the product, these are early ideas for the frame, drawn roughly in a sketchbook.

  

Figure 10                                       Figure 11                                      Figure 12

I elected to pursue the design shown on the bottom half of the page in figure 12. I began by building a CAD model on Solidworks as shown in figure 13 and 14.

 

Figure 13                                                 Figure 14

The back plate was developed first, the initial back plate design is shown in figure 13 and the final, amended design is shown in figure 15 and 16.

Figure 15                                                                     Figure 16

The original back plate design had a flat back plate with cut out key holes for screws to hold up the frame. However, as students live in accommodation where they cannot make permanent changes to their residence this idea had to be redesigned, as displayed in the above images.

The cut outs seen at the top of the back plate in figure 16 are designed to be used with heavy duty command hooks. The centre of each cut out is 60mm away from the centre line, 120mm away from each other, this should be very easy to install. The command strips will sit on the wall, causing no permanent damage and can be removed without a trace. The back plate will lower down and the hooks will go underneath the cut outs and hang nicely. The cut outs have 4mm fillets to add strength and reduce the sharp points on the product. 

Figure 17

The colour blue was added to the casing of the product. Figure 17 shows the side plate of the product with 16 pins on each plate.

 

 ]

Figure 18                                                          Figure 19

The pin seen in figure 18 was an early design, this had a much smaller head with a much smaller Velcro pad on top. It was decided this would not be appropriate to house the required badges. Therefore a bigger head was implemented with a Velcro layer spanning almost its entirety, giving a larger surface area for badges to attach. 

Velcro –

These pins work by sliding into a 3.1mm hole on the side panel. The pins themselves have a 3mm diameter shaft that will fit inside the hole. The pins have a lip as shown in figure 4, this will go over and catch on a lip on the inside of the holes on the side panel and keep the pins in place while the unit is vertical. Magnets were considered for this part, however it was decided it was unnecessary to risk the tablets being interfered with by the magnetic field produced by the magnets.

Velcro will be used on the top of the pins (represented as the grey area on the top of the pin in figure 19) so that the user can attach custom emblems and badges that would also be available to purchase or make. As students have a wide range of interests it may not be feasible to produce badges to cover all these interests. Therefore producing a package that enables the user to make badges for the interests and pictures they are interested in would be a way to improve this product. 

Reduction of Pins – As can be seen in figure 20, the total number of pins was reduced from 16 to 5 on each panel leaving a total of 10. 16 pins could result in 16 badges which would create a busy and crowded casing. The decision was taken to reduce the amount of pins to 5 on each side to add a sense of calm and space to the product, which in turn reduces the crammed and busy effect.

Figure 20

 

Figure 21                                           Figure 22

 

The right side panel also had a cut out removed for the volume controls on the side of the iPad to be accessed, this needed to be designed and produced on solid works.

Figure 23

This prototyping process enabled me to make the completed model in figure 20, producing the rendered image below.