Rapid ideation refers to the process of development of a working prototype in a limited time frame following a loose theme. In rapid ideation the goal is to make prototypes that are tangible and convey the idea that you want to test in order to get early validation of a variety of iterations (IDEO, 2015). Prototyping is a stage in the Design Thinking Process, where a series of rough, inexpensive low-fidelity mockups are created quickly (Roberto, 2019). Prototypes can come in a variety of forms such as wireframes, paper prototypes, storyboards, role-play exercises, videos, vertical slices and physical models - basically any form that a user can interact with and experience meaningfully in order to garner user feedback.
According to Both & Baggeroeor (n.d.), particularly in the early stages of prototyping you build to think. Instead of thinking of an idea first and then building it, you reverse the typical direction and use building as an ideation tool. In order to increase the role played by your imagination, you can introduce constraints that will make you produce lower resolution prototypes faster, increasing the output of the prototyping process.
When it comes down to it, prototyping is one of the most important phases in the UX design process, as it enables us to test and work with our product in an early stage and test it with real users, saving us from mistakes we could have made on the final development of the product and that could have cost us time and money (Canziba, 2018).
In order to practice and hone our prototyping skills we were encouraged to reverse engineer an artefact that we admired. I chose the Apple App Store because it was one of the first 'apps' that I ever came into contact with and still is an app that I use and even rely on to this day, a testament to its design. For this reason, I was excited to unpack and break down the design theory behind it. We were then asked to choose one or two prototyping techniques that we studied this week to use to make prototypal representations of the artefact selected.
My first step in this exercise was to roughly sketch out the main screens from the App Store. From here I decided that I really wanted to try out paper prototyping. I am always drawn to analogue techniques, as I find that if I jump straight into digital the temptation to make everything pixel perfect can be overwhelming and it is easy to spend far too much time initially; paper prototyping seemed like the perfect solution to this. Digital prototyping tools are great, but technology has a limited shelf life: it won't be long before the industry standard changes again and designers will need to learn a new software. However, paper prototyping will be a valuable prototyping technique for conducting early usability studies for the rest of my career (Nielsen, 2003). For this reason I wanted to sharpen my skills for this fast and flexible technique, as it isn't a process that I typically use.
The user flow I decided to recreate is that of someone browsing the 'Apps' homepage, exploring some of the apps through horizontal scrolling, and then eventually pressing on an app to read the details. There were certain overlays that I had to be creative to reproduce in paper format. For instance, on the product pages for individual apps, once the user scrolls past a certain point, the 'GET' download button doesn't disappear, instead it reappears in the form of a sticky banner at the top of the page so that the user can click to download the app at any point whilst browsing the app's previews, specs or reviews.
The part that I struggled with the most was filming the user interacting with the paper prototype, as I only had a team of two people. I think I would need three people on board - one person recording the interaction, one person acting as the user testing the prototype and then finally another person to act as the 'computer', scrolling and moving the prototype elements according to what the user did and changing screens if the user pressed to go to a different page.
From here I wanted to try interactive wire-framing using Figma. I stuck to a greyscale spectrum to represent visual hierarchy and help more important details stand out. The App Store uses a consistent gridding system, so when I was prototyping I set up a layout grid with 4 columns and a 10 pixel margin to try and replicate this. It was much easier to prototype horizontal and vertical scrolling in Figma than it was with the paper prototype, which was a bit hard to keep stable. I've included wireframe mockup screenshots below and have also embedded the interactive prototype.
Below is the embedded prototype of the App Store that I made using Figma. Feel free to take a look!
Despite being new to it, I found paper prototyping extremely fun and definitely think it's a great way to work, especially in the early stages of a project. It was freeing to be able to make a prototype in such a short space of time. I do, however, believe that digital prototyping may be more practical for running user tests than paper prototyping as it is easier to model different interactions and linkages.
Both, T. and Baggeroeor, D. (n.d.). (Archival Resource) Design Thinking Bootcamp Bootleg, Hasso Plattner Institute of Design at Stanford University. [online] Available at: dschool.stanford.edu/resources/the-bootcamp-bootleg](http://dschool.stanford.edu/resources/the-bootcamp-bootleg (Accessed 4 October, 2021).
Canziba, E. (2018). Hands-On UX Design for Developers : Design, Prototype, and Implement Compelling User Experiences from Scratch
IDEO. (2015). The Field Guide To Human-Centered Design. [online] Available at: https://mesa.ucop.edu/wp-content/uploads/2017/11/The-Field-Guide-to-Human-Centered-Design.pdf (Accessed 6 October, 2021).
Nielsen, J. (2003). Paper Prototyping: Getting User Data Before You Code. Nielsen Norman Group. [online] Available at: https://www.nngroup.com/articles/paper-prototyping/ (Accessed 4 October, 2021).
Roberto, M. (2019). Unlocking creativity: how to solve any problem and make the best decisions.
