top of page
Writer's picturedanielclarke1981

Week 5: Rapid Ideation Session 1 - prototyping and presenting

During week 5 I continued to focus on the rapid ideation session that started in week 4. The midpoint was marked by the weekly webinar, where we were able to discuss our progress so far.


Midpoint Webinar


Not long after the webinar had started, we split into breakout rooms and shared our ideas with a small group. I was delighted to hear about the different directions we had all taken from the same, ambiguous starting point. Many of my peers had fleshed out quite rich concepts that sounded like they had done a lot of research and ideation. After sharing my own progress, a reference was made to not use it as an opportunity to explore existing pet projects or ideas. Although this was said in good humour, I couldn't help feeling like I now had to justify my ideation process and prove the idea wasn't plucked from the archive of an ideas list I didn't have. This was pure insecurity as I should be confident that my ideas were generated honestly and genuinely. However, most of my cohort's ideas were closer to the source material and I couldn't help but feel that I had strayed too far off the path. At what point does the ideation take you too far away from the brief? As I reflected on this, I decided not to get too hung up on it as we were encouraged to be as creative as possible. If I were to use my ideation process in a real-world scenario with a client's brief, could this lead to side-tracking the ideation too far from the original issue? At any rate, this is something I think I might need to research and explore more moving forward or at least be aware of.


After the webinar, I began to feel like I had painted myself into a corner with my choice to develop an augmented reality (AR) concept. How on earth was I going to be able to produce an interactive, AR artifact with only a week to go? In trying to find the answer, I wasted two days watching tutorials on the latest developments of Abode's new Augment reality tool, Aero (Create augmented reality | Adobe Aero, 2022). The kit looked impressive, but I was pressed for time, and the more I watched the more I realised I didn't have the capacity to learn it to a level I would need to. I also explored resources on Adobe After Effects (Eppy, 2020), where people were using it to simulate AR and import them back into their Adobe XD flows. I liked this idea but again felt I wouldn't be able to dedicate the time to do the process justice and decided this would be a technique I would explore in the future. Eventually, I decided to go back to basics and use simple images and transitions to communicate AR, but this detour really set me back.


Initial Sketches

Initial sketches
Initial sketches

Irrespective of how I ended up realising the final interactive artifact, I wanted to nail the user flow. I initially went to wireframe sketches, as I had yet to do this on the course. However as you can see from the image above, there were glaring gaps in the user journey and I struggled to find a rhythm with the workflow. I particularly found it cumbersome in having to draw the navigation out time and time again. I also felt like I was treading on old ground. Some of the screens were exact copies of the screens based on the crazy 8 ideation the earlier in the process. I was also finding it difficult to commit the AR elements to the page convincingly. These reservations eventually led me back to paper prototypes, but I decided to add a twist, to simulate the AR features I incorporated elements of physical modeling as described as technique 4 in the course notes to really sell the augmented features:

The purpose of a physical model is to bring an intangible idea, or two-dimensional sketch, into a physical, three-dimensional plane. This allows for much better testing with users, and it can spark discussions about the form factor of the solution.

(Dam, 2022)


Paper Prototyping

Paper mockups show interface changes
Paper mockups show interface changes

I felt much more comfortable mocking up the app this way. I added an acetate sheet to the back of a card phone frame so I could put post-it UI elements over the top to simulate AR, as the background would show through. I found this helped me conceptualise the app better and I could take photos for reference later. However, the card model was floppy and needed to be held a specific way which had the adverse effect of taking me out of the moment when testing layouts. This can be easily be remedied in future sessions with the use of thicker card stock. On the screens that didn't require AR, I was able to lay the frame on a white background which reverted it back to a standard paper prototype. I was able to iterate several screens layouts (particularly for the product page) very quickly and this was extremely useful in coming up with an optimum design.


Having nailed down the individual screens, I still wasn't sure how to use the paper prototypes for user flows. I feel there is a learning opportunity here for later, but as time was pressing and I had wasted so much time researching ways to mock-up AR earlier on, I decided to jump to Figma and work up the flow from there. I felt I was in a position to lay out the screens and I could see how they connected from there. This wasn't particularly scientific but was the best solution I could come up with at the time.



Figma Mockup and Interactive Prototype


Figma User Flow partially realised
Figma User Flow partially realised

Time was really pressing now and I had a burning awareness that I needed to have a working prototype for the presentation. I decided to use Figma (Figma: the collaborative interface design tool., n.d.) over Adobe XD (Adobe XD 2022) as I knew the software slight better but I had not made anything interactive with either. Upon inspection, the prototyping tools were intuitive and easy to pick up but the results lacked the finesse of a finished app. Some of the animation options were limited and transitions between screens were somewhat hit and miss. I did however find the transition from paper prototypes to Figma smooth. Although the screen understandably took far longer to realise in Figma, the hard work regarding layout had been achieved quickly via the earlier, low fidelity rapid iterations.


The idea for the app's name - Drop Dead Gorgeous- came from the well-known saying which allowed me to incorporate imagery of a crow as it could be alluded to in the use of the word "Dead". Trying to keep it playful, I added the hat to the logo as a reference to AR. I also google searched "crows in hats" and used the imagery returned as inspiration (James Lemon Print Club, 2022). The inspiration for the colour scheme came from the actual shoe used for the product page in conjunction with Adobe Color (2022). The female taking a selfie was free under Unsplash's Licence(Vamvouras, 2019). All the clothes imagery bar the hat was taken by myself. The hat was an actual gltf model from SketchFab so I could get the correct angle to match the selfie image (Leoskateman, 2020). The profile photos for the articles were generated using Generated Photos (2022)


With the webinar looming as a deadline and the goal to produce an interactive prototype, it became clear that I would be unable to complete all the features of the app in the time left. Therefore, I decided to focus on the core elements that made up the app's fundamental concept. The e-commerce, as well as the social share elements, would simply have to be described verbally in the video presentation. I found the realisation I was not going to complete the application frustrating but felt I had enough of the work done to adequately explain the concept. Upon reflection, I was guilty of not planning the screen more thoroughly using the Trello board, I should have been broken down the features of the application into manageable deliverables instead of simply referencing Figma mockup for each screen.


Final Presentation


With time running out and on the day of the webinar, I wasn't exactly sure how to produce the video demo for the app. Inspiration struck when I remembered we were using a pro version of Slack at work that allowed me to screen record and narrate. After some hastily written notes a couple of takes I uploaded the video to YouTube and posted the link on the Spark Forum. I was mostly happy with the resulting video, although the sound was muffled at times and my delivery could have been more polished.


During the webinar this week, I was lucky enough to have my video shown to the group. Unfortunately, only a handful of students were able to showcase their work this way so I wanted to make the most of the opportunity. Giovanni raised the question of whether artificial intelligence (AI) technology had sufficiently developed to a point where the concept would be possible. I had to admit that this was not something that I had researched, focusing solely on the ideation process. Regarding this question, I was torn between the opinion that the idea was more important than the reality (in this "flight of fancy" at least) or that more time and attention should be given to the practicalities of the concept. In a commercial setting, this would be a no-brainer but in this context, I was unsure of the correct response. Ultimately I decided that for future iterations, I would undertake some initial research on the feasibility of the concepts I was proposing.


Reflections


Looking back on the entire ideation session, there were definite areas to celebrate and improve upon. The first week's ideation sessions were very fruitful and enjoyable in equal measure. I surprised myself with how many ideas were bubbling up to the surface, especially in light of the ambiguous nature of the Dixit card. However, the momentum and enthusiasm wained during the second week, where I spent too long agonising over the finer points of executing my vision. I found that I was at my most creative when I wasn't required to produce a polished piece of work and could focus on the ideas, regardless of how practical they were. I spent far too long looking into ways to communicate the concept, looking for the slickest and most impressive way to realise the prototype. I didn't need to use Adobe Areo or After Effects but was looking for an excuse to incorporate them prematurely into my repertoire. I still contest these will be useful tools in the future and will dedicate time to learning them in due course but at this stage in my development, I possess insufficient knowledge on either to put them to practical use.


By identifying the inconsistent nature of the session I could see how I could easily get unstuck in the future. Each burst of creativity was rewarded with several days off; satisfied with the progress I had made thus far. This in turn led to anxious moments where I felt I had fallen behind and left little room for mistakes or subsequent time off. The elation of success gave way to the mild dread of an impending deadline, and although this never really became crippling - as I found the process mostly enjoyable throughout - it was unnecessary stress that I could have avoided.


I am also not ashamed to admit that I used the techniques that I am most comfortable with, which were mostly tried and tested methods from previous weeks. The only addition this time was the use of Figma and this was only because I wanted to produce a polished and interactive artifact. My desire to use different ideation techniques such as SCAMPER and prototyping techniques such as Wizard of Oz has not changed and I should really explore them in the next rapid ideation session (if appropriate to do so of course) so I can round out my experience. I also wish I had used one of the diversifiers and will look to do this next time. My justification for not using them this time is that with two sources of inspiration with the Dixit card and the news article, I felt I was already overwhelmed with possibilities. What I should have realised, and do so in retrospect, is the introduction of a diversifier would help me focus my approach, forcing me to formulate solutions that make allowances for the restrictions. I will ensure I carry what I have learned over to the net session, while also exploring new ways to ideate and present my ideas.


 

References


Adobe. 2022. Adobe XD | Fast & Powerful UI/UX Design & Collaboration Tool. [online] Available at: <https://www.adobe.com/uk/products/xd.html> [Accessed 25 March 2022].


Adobe.com. 2022. Create augmented reality | Adobe Aero. [online] Available at: <https://www.adobe.com/uk/products/aero.html> [Accessed 25 February 2022].


Color.adobe.com. 2022. [online] Available at: <https://color.adobe.com/create/color-wheel> [Accessed 25 April 2022].


Dam, R., 2020. Prototyping: Learn Eight Common Methods and Best Practices. [online] The Interaction Design Foundation. Available at: <https://www.interaction-design.org/literature/article/prototyping-learn-eight-common-methods-and-best-practices> [Accessed 26 March 2022].


Eppy, A., 2020. How to Create Augmented Reality Designs using After Effects. [online] Youtube.com. Available at: <https://www.youtube.com/watch?v=IVHhJeLB39A> [Accessed 25 February 2022].


Facebook.com. 2022. James Lemon Print Club. [online] Available at: <https://www.facebook.com/jameslemonprintclub/photos/a.272125552948958/1535303033297864/> [Accessed 25 February 2022].


Figma. n.d. Figma: the collaborative interface design tool.. [online] Available at: <https://www.figma.com/> [Accessed 8 February 2022].


Generated Photos. 2022. Unique, worry-free model photos. [online] Available at: <https://generated.photos> [Accessed 26 February 2022].


Leoskateman, L., 2020. Straw hat - with feather - Buy Royalty Free 3D model by Léonard_Doye Alias Leoskateman (@leoskateman) [5872cad]. [online] Sketchfab. Available at: <https://sketchfab.com/3d-models/straw-hat-with-feather-5872cad24a044e538fd83649f24b1086> [Accessed 26 February 2022].


Vamvouras, A., 2019. Female taking selfie. [online] Unsplash.com. Available at: <https://unsplash.com/photos/RNoslAw80b8> [Accessed 27 February 2022].

28 views0 comments

Recent Posts

See All

Comments


Post: Blog2_Post
bottom of page