(Week 3) Rapid Ideation and Prototyping

This week we focused on rapid ideation and prototyping as vital parts of the design thinking process.

I found practising rapid ideation extremely useful. Previously, I struggled with it. I thought it is impossible to design an innovative and beautiful product within the limited time frame and with limited resources.

Nevertheless, after practising rapid ideation techniques, I created a simplistic prototype of the B2C app, that I already sold to my client. It only took me an hour to generate the idea and build the prototype.

Now I know that the value of rapid ideation and lean prototyping is the ability to receive early user feedback and examine what works for them and what needs alteration. At this point, branding and visual appeal are not our priority. In the end, if your product is valuable, users and clients will wait for it. (Gothelf and Seiden 2016, Sears and Jacko 2009).

Prototyping

We also explored various prototyping tools, including but not limited to sketching, wireframing, storyboards, etc. I think there is no universal prototyping tool that would work for everybody. The choice of tools often comes from the complexity and requirements of the project (Sears and Jacko 2009, Figliolia et al 2020).

I mainly use wireflows and interactive wireframes at work. Wireflows are a combination of wireframes and flowcharts that help explain and document user interaction within the platform. Wireflows and interactive wireframes allow dynamic representing of changes (Laubheimer 2016). Hence, it is easier to grasp technical and UX side of the project comparing to written technical tasks and flowcharts. Interactive wireframes feel like a finished product and allow efficient UX testing as well (Figliolia et al 2020). Nevertheless, I still struggle with translating the wireflows and wireframes into proper documentation or explaining to a developer what I want to be done, and we often end up with a lot of iterations and bug fixing.

Storyboards is another tool that I find exciting. Although I did not use it enough in the past, I realized that storyboards could be an option for my clients who struggle to articulate their ideas. Storyboards could help them map the user journey through the consecutive series of images, similar to the TV show (Krause 2018). 

Wizard of Oz is another technique that we learned this week. I assume all IT professionals used it at least once. The concept suggests simulating the feature before implementing it, to test user experience and its validity (Kelly 2018). After studying this technique in details, I believe I will use it more often. It will help me test ideas and save development costs.

Reverse Engineering

Our weekly activity was reverse-engineering the platform or game of our choice by using one of the prototyping techniques. I decided to use wireframing and Google as my artefact.

These are the steps I used to reverse engineer Google homepage:

  1. Press Ctrl+Alt+Shift to open Google developer console
  2. Open Figma and start the project
  3. Hover over each element and replicate it in Figma respecting all the margins, paddings, and font styles.

I feel like this activity is beneficial for UI designers because it teaches you to stay focused, pay attention to details, and learn best practices by doing rather than reading about them. 

I believe this week was extremely productive. My next step is improving my design hand over skills, so I could easily explain a developer desirable features, which will allow me to speed up the development process and limit the number of iterations. I will do this by reading a book “Hands-On UX Design for Developers : Design, Prototype, and Implement Compelling User Experiences from Scratch” by Elvis Canziba in my own time and implementing suggested approaches into the app design.

References:

  • Figliolia, A.C., Sandnes, F.E. and Medola, F.O., 2020, November. Experiences Using Three App Prototyping Tools with Different Levels of Fidelity from a Product Design Student’s Perspective. In International Conference on Innovative Technologies and Learning (pp. 557-566). Springer, Cham.
  • Gothelf, J. and Seiden, J., 2016. Lean UX: designing great products with agile teams. ” O’Reilly Media, Inc.”.
  • Kelley, J. F. (2018) Wizard of Oz (WoZ)—a yellow brick journey, Journal of Usability Studies, 13(3), pp.119-124
  • Krause, R. (2018) ‘Storyboards Help Visualize UX Ideas’ [online], Nielsen Norman Group, 15 July. Available at: https://www.nngroup.com/articles/storyboards-visualize-ideas/ (Links to an external site.) [accessed 18 October 2020]
  • Laubheimer, P. (2016) ‘Wireflows: A UX Deliverable for Workflows and Apps’ [online], Nielsen Norman Group, 4 December. Available at: https://www.nngroup.com/articles/wireflows/ (Links to an external site.) [accessed 18 October 2020]
  • Sears, A. and Jacko, J.A. eds., 2009. Human-computer interaction: development process. CRC Press.
Scroll to Top