551308 - Rapid Prototype Design

:: Research ::

The one word theme for this weeks task was ‘Fragments’. I began by searching the word into google images and just visually studying the results. I saw many broken glass images (ref.1). which reminded me of the road layout around the Arc de Triomphe (Fig.1). which has many wide roads leading to it, due to the many barricades formed during the French revolution. Now, this did give me the idea of like a top down tower defence game but I did feel the link rather tenuous and actually have basically made that exact game in first year during my intro to game engines module.

  • Ref.1 – Ravichandran, A (2019).
  • Fig.1 – Google Maps
  • Ref.2 – Wikimedia.org
  • Ref.3 – Parker, C (1991)
  • Ref.4 – Wikipedia (a) (n.d.)
  • Ref.5 – AverageJoeRestorations.com (n.d.)

I also saw an image of the ‘Egerton Gospel’ (Ref.2) which made me think of another game idea. A broken narrative could make a very compelling game, I did think of an idea where the player would fill the role of a detective trying to piece together a murder mystery through various conflicting witness accounts. This would be good, but other than a simple twine game I thought the idea too big to prototype in just six days.

In the lecture Chris showed an art piece where the subject is an exploded shed showing the pieces of the garage in a still. This reminded me of car diagrams where you can see the vehicle represented with the various parts on show. It made me think of some kind of app where you can look at a complete car (Ref.4) and see the various pieces that make up the car (Ref.5)

:: Idea Development ::

I decided I would like to make the app as I felt like this could be properly developed as a prototype in the six days I had to make it and as a game design student it is always quite nice to create something that is not a game sometimes.

My brother owns and runs a mechanics in our home town and so I thought it would be a good idea to get his thoughts on my idea (Fig.2). A few years ago I helped him work on turning a motorcycle into a trike version and he had a book which described every part of the bike he needed. He told me that these manuals were made by a company called ‘Haynes’ (Ref.7) who make manuals specific to various vehicles which describe how to do various mechanicals jobs on that model (Ref.6).

  • Fig.2
  • Ref.6 – Haynes.com (n.d.)
  • Ref.7 – Wikimedia.com (b) (n.d.)

This helped me quickly create an identity for my app as I could brand it as the official ‘Haynes Official App’. Where instead of making mechanics buy books for each vehicle they work on you could instead use the app to show the cars parts for a monthly fee and allow the mechanic to simply search for whatever vehicle they are working on at that moment.

:: Production ::

I started by creating the opening page of the app (Fig.3) in photoshop, using the brands colours and the same font as the official logo used I feel like the image works well at being easy to understand and intuitive to use. Now, I hadn’t really used Adobe XD for my own projects before so this would be a learning process for me. I created another blank page in photoshop which I could then use for the various following pages needed for the app (Fig.4).

My brother had an idea that I not limit my app to just cars and motorcycles but household appliances such as lawn mowers. This was a great idea as it would further justify the monthly subscription the app would be charging when developed. That’s why I included the search by vin number option, as it is my understanding every engine comes with its own VIN number which is used to identify the model.

  • Fig. 3
  • Fig. 4
  • Fig. 5
  • Fig. 6
  • Fig. 7

I then made a page where you can see information about the vehicle found by the VIN number so that the user could research a different VIN should they have gotten the number wrong (Fig.5). From there I fleshed out how the app would function by adding in the various parts of a car a mechanic would be working on (Fig.6) and then giving them a bunch of videos which show how to take apart whatever part of the car they have selected and another link to allow them to purchase that part online (Fig.7).

  • Fig. 8
  • Fig. 9
  • Fig. 10
  • Fig. 11
  • Fig. 12

I got the above screenshots (Fig 8,9,10,11,12) from the below video (Ref. 8) which shows how to disassemble an engine. All of those screenshots would be different videos narrated professionally just like the video below. Which shows the various parts or ‘fragments’ that make up an engine and in turn a car.

Ref. 8 CarsNToys – 2017

:: Video ::

Below you can see my video which just shows the user experience from the starting page to the final pages of videos and shopping link.

:: Feedback ::

— My Thoughts —

Before I discuss feedback offered in the following week my own personal thoughts of the prototype is overall positive, though I would remove the black border if done again as while I think it looks fine on the PC it unnecessarily shrinks the view space when opened on my phone.

— Chris’s Comments —

Having now received my feedback from the class I do have a plan in place for what I need to develop and change should I decide to use this prototype as one of the final three I submit for my assignment. Chris mentioned that the styling might be improved with the use of a UI Kit, which would be easy enough to implement and would hopefully give me a more uniformed visual appearance. At the moment it is a simple image to show what would be in that window so this is something I would need to look into should I keep working on this prototype.

— Stuart’s Comments —

Stuart also mentioned that the app could be made more visually interesting. Namely the slide with the list of various car parts to be selected could perhaps be changed to a top down car view which would then allow the user to select the part of the car they want to work on without navigating a long list. So for example instead of searching a list for the engine or brakes, you could simply select these from the car diagram and it would take you to the shopping/video navigation page. This would be very nice and something I would much like to implement should I go back to this prototype.

:: References ::

AverageJoeRestorations.com (n.d.) [Online Photograph]. (Unknown Author). Available online: http://averagejoerestoration.com/resources/mustang-wiring-and-vacuum-diagrams/1964-mustang-wiring-diagrams/1964a.jpg [Accessed 22/02/2022]

CarsNToys (2017). ‘How to Disassemble an Engine Step by Step’ [YouTube Video]. Available online: https://www.youtube.com/watch?v=c_2rng23nbs&ab_channel=CarsNToys [Accessed 22/02/2022]

Haynes.com (n.d.). ‘Ford Mustang (1979 – 1993) Haynes Repair Manual’. [Online Product]. Available online: https://haynes.com/en-gb/ford/mustang/1979-1993-0?gclid=CjwKCAiAsNKQBhAPEiwAB-I5zTcRAWVbSkuy8YXR9U3hlXRZjglaf_3jZr84ZUcvtsh6CMbLPabWMBoC2-sQAvD_BwE [Accessed 22/02/2022]

Ravichandran, A (2019). ‘React Fragments – A Quick React Tip’ [Online Article]. Available online: https://programmingwithmosh.com/react/react-fragments-a-quick-react-tip/ [Accessed 22/02/2022]

Parker, C (1991). ‘Cold Dark Matter: An Exploded View’. [Art Sculpture/Instillation] Tate Collection, London.

Wikimedia.org (a) [Online Photograph] (Unknown Author). Available online: https://upload.wikimedia.org/wikipedia/commons/4/4f/Egerton_Gospel_-_Egerton_Papyrus_2_-_fragments_1-3_-_recto.jpg [Accessed 22/02/2022]

Wikimedia.org (b) [Online Photograph] (Unknown Author). Available online: https://en.wikipedia.org/wiki/Haynes_Manual#/media/File:Haynes-Logo.png [Accessed 22/02/2022]

Wikipedia (n.d.) [Online Photograph]. (Unknown Author). Available online: https://en.wikipedia.org/wiki/Ford_Mustang#/media/File:Ford_Mustang_(1964)_-_28540253076.jpg [Accessed 22/02/2022]