For my third week on the GDO710 Development Practices module, we were asked to look at Rapid Ideation, with the challenge brief shown below:
Brief
One of the best ways to hone your prototyping skills is to reverse engineer the finished work of other practitioners you admire. This allows you to practise with the various tools and unpack the design theory behind the work in question.
To complete this activity, identify an artefact you feel is particularly interesting. This could be anything from an inventory system UI for a game to a museum website that utilises AR or VR. The more experimental and interactive the artefact you choose, the more challenging this prototyping activity will be.
Select one or two of the prototyping methods outlined this week and build quick prototypal representations of your chosen artefact. Note down any interesting characteristics of the artefact. Perhaps, you notice the colour palette is used in a certain way or the layout follows a standard grid system. Depending on your chosen artefact, you might want to annotate the dimensions and analyse the padding and spacing used. If you are creating a storyboard for a cutscene in a game, you could identify key components of the narrative arc or highlight various camera shots and how they are used to create drama.
This is an extremely open brief designed to allow you the freedom to choose an artefact you will find enjoyable to reverse engineer. We want you to dive in and have some fun. Don’t take the task too seriously – instead enjoy trying to get inside the minds of other creative practitioners.
I contemplated the applications I use on a daily basis and none of them struck me as particularly compelling. Although I was satisfied with them, including social media apps, banking apps, and news apps, I wasn't enamored with any of them. Part of me began to wonder whether this was actually an indication of their success as a product; they were so unobtrusive and performed so admirably that I took them for granted. It reminded me of one of the most overused quotes in the world of UX:
Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself.
(Norman, 2013)
The Chosen Existing Artefact
Being unenthusiastic about the prospect of reverse engineering these reliable but routine apps, I decided instead on one that I had used the previous year with my kids. The app, Pumpkin Masters: Carve your Selfie, was simple to use and gave great results. (PumpkinMaster, 2020).
The app itself allows you to take a photo of yourself and with some simple adjustments produces a pumpkin pattern that you can print out and use to carve a pumpkin selfie. As I thought about the application's simple use case, the prospect of “reverse engineer” and deconstructing the app became more appealing. This would be a great introduction to the practice and apply some of the concepts learned this week. Moving forward throughout the course, I could then take what I learned from this process and apply it to more complex applications.
Paper Prototype
I decided to use simple paper, markers, and mini post-it notes to make my paper prototypes, as recommended by the LinkedIn course UX Design: 6 Paper Prototyping (Nodder, 2017), supplied in the course content.
The paper prototyping was fun. It allowed me to see the simplicity of the UI and clearly communicate what each screen was about. It also allowed me to spot inconsistencies in the UI which I thought was interesting and made me wonder if the paper prototypes stage had actually been skipped during the design of the app. I found it useful to be able to quickly lay one piece on top of the other to show modals and alert elements.
One limitation I found was with journeys and flows where there was a need to communicate transitions between two near-identical screens. Both would require the same assets, which would have to be replicated. In a wireframe or storyboard using Balsamiq (Balsamiq Wireframes, n.d.) or Figma (Figma: the collaborative interface design tool., n.d.), the assets could be reused and replicated almost instantly and effortlessly. I also had problems with the size of the prototypes. I missed the part in the video tutorial that referenced making then 4 times to scale, so I found the process fiddly.
After the paper prototype, I looked at how the application could be improved and decided to add some augmented reality(AR) mechanics to the mix. So I pushed the concept further with the addition of a "lazy carve" feature that inserts the finished pumpkin into a chosen scene via AR.
I attempted to use the paper prototyping method again. This initially worked well when I began to plan out the UI and flow, as I was able to reuse components I had already created earlier in the initial deconstruction. However, I found it difficult to communicate the elements relating to AR using this medium. Poor sketching aside, the method was not able to convincingly demonstrate the ability to move the application from side to side to look at a 3-dimensional object on the screen. I decided I needed to switch to a different method of communication.
Game Prototype
My initial inclination was to use the Physical Modelling technique described in the course notes. I could then use a variety of low-fi methods to communicate the app's features. In one of these scenarios, I contemplated asking my wife to stand over a real-life pumpkin substitute (pumpkins are particularly tricky to acquire in February), moving a torch back and forth to demonstrate the app directional lighting feature. I liked the idea of keeping the process low-fi and simple to really experiment with what could be communicated with very few resources. However, with my wife unavailable and no decent pumpkin substitute to be found, I decided to forge ahead with a different approach which I found equally intriguing.
Game Prototyping seemed like a good fit, although it went against the principle of KISS (Rich, 1995) I was trying to achieve with the process. I wanted to avoid coding unless I could very quickly produce an artifact that could quickly, crudely but effectively demonstrate the concept of AR. I was looking for low-resolution, 3D computer-generated images interacting with real-world artifacts, something reminiscent of the animatic storyboards produced by Industrial Light and Magic's Ben Burtt for Starwars' Phantom Menace Podracing scene (Star Wars Episode I: The Phantom Menace - Podrace Lap One - Storyboards and Live Action Tests, 2018).
I purchased a pumpkin model (OverTheOcean, 2021) from Sketchfab and used the AR.js (AR.js, 2022) library and Aframe (A-Frame – Make WebVR, 2022) as a simple prototyping tool. This required only 15 lines of code to get working in a browser, with most of the time adjusting the size and position of the pumpkin in relation to the "Hiro" marker the framework required you to print out.
To get an idea of how the finished concept could look, I crudely doodled a face on the texture jpegs that came with the model to get an impression of the end result.
I then added a quick png from the actual Pumpkin Masters® app. As a final flourish, I created a scene of Halloween-related props from around the house, to see how the AR pumpkin would fare. This was interesting in demonstrating the limitations of the marker needed for AR.js to work. The second even the tiniest portion of the marker wasn't visible the pumpkin would disappear.
Additional Thoughts
Even after the initial ideation, I couldn't stop my thoughts returning to the app and how I might develop the feature offerings further. One thought that kept recuring was adding some way to capture the user's facial expressions and movement, in a similar vein to Memojis on the iPhone (Apple, 2018).
I would then see if I could replicate a similar effect to the Singing Pumpkin Effects & Animations ( 2021) as shown below, The effect here is produced with projectors but could be adapted for an AR model :
(Enter Sandman - Singing Pumpkins Effect Animation, 2021)
Overall I was happy with what I was able to achieve in such a limited amount of time. The Augmented Reality was very quick to produce, which relieved my anxiety about switching to a more technical medium to show the new functionality. I was able to have a demo of the concept in under an hour. I would have still liked to have explored model making as I feel this would have been another way to communicate the feature well. I did feel however that I played to my strengths this week instead of the other two weeks where I tried something out of my comfort zone. Although I had never done paper prototypes, I was familiar with the concepts and felt there was considerable overlap with wireframing and storyboarding which I had some experience in the past.
Looking at the course content, I felt that some techniques described either fit well with games development or UX, although there were a few that could have overlapped such as The Wizard of Oz technique. Therefore as a UX student, I felt I needed to demonstrate a quintessentially UX technique with paper prototypes. It may also be a stretch to say I adopted the Game Prototype method for the AR. I liberally applied the definition from the course material regarding game mechanics, with the end result itself being more in line with animatics. However, I felt this was a justified use case for this problem, as I demoed it to several test subjects who instantly understood the concept.
In the future, I would like to explore all the techniques described in the course content. I am particularly interested in trying the Wizard of Oz technique, as I can see this revealing very quickly actionable insights, user frustrations, and motivations similar to users actually testing a working prototype.
References.
A-Frame. 2022. A-Frame – Make WebVR. [online] Available at: <https://aframe.io/> [Accessed 8 February 2022].
Apple inc. 2018. iOS (12). [Opperating System].
Balsamiq.com. n.d. Balsamiq Wireframes. [online] Available at: <https://balsamiq.com/wireframes/> [Accessed 8 February 2022].
Figma. n.d. Figma: the collaborative interface design tool.. [online] Available at: <https://www.figma.com/> [Accessed 8 February 2022].
GitHub. 2022. AR.js. [online] Available at: <https://github.com/AR-js-org/AR.js> [Accessed 12 February 2022].
Nodder, C., 2017. UX Design: 6 Paper Prototyping Video Tutorial. [online] LinkedIn Learning, formerly Lynda.com. Available at: <https://www.linkedin.com/learning/ux-design-6-paper-prototyping/welcome?autoAdvance=true&autoSkip=false&autoplay=true&resume=true> [Accessed 8 February 2022].
Norman, D., 2013. The Design of Everyday Things. Revised & Expanded ed. New York: Basic Books, p.Preface xi.
OverTheOcean, 2021. Holiday Pumpkin. [online] Sketchfab. Available at: <https://sketchfab.com/3d-models/holiday-pumpkin-game-ready-a6ead9c1d41f4412be6210a07bd7c079> [Accessed 9 February 2022].
Rich, B., 1995. Clarence Leonard (Kelly) Johnson -- February 27, 1910-December 21, 1990. Washington, D.C.: National Academy Press, p.13.
The Singing Pumpkins. 2021. Singing Pumpkin Effects & Animations. [online] Available at: <https://www.thesingingpumpkin.com/> [Accessed 8 February 2022].
Weeping Willow Apps. 2020. PumpkinMaster (1.0.1). [Mobile app]. [Accessed 8 February 2022].
Youtube.com. 2021. Enter Sandman - Singing Pumpkins Effect Animation. [online] Available at: <https://www.youtube.com/watch?v=Hsmo-nl9iY8> [Accessed 8 February 2022].
Youtube.com. 2018. Star Wars Episode I: The Phantom Menace - Podrace Lap One - Storyboards and Live Action Tests. [online] Available at: <https://www.youtube.com/watch?v=yaswznNUKhs> [Accessed 6 February 2022].
Comments