MODULE 4 – Low Fidelity Prototyping with Prof. Patrick Hogan
Low fidelity prototyping is about ideas. Low fidelity means that the items produced require no technology, little effort, minimum experience and skill level and are really about conceptual or design thinking rather than execution.
Paper prototypes, in their most simple form, are drawings of the user interfaces (or screens) you plan to have in your app. Here are some strengths to sketched prototypes and wireframes:
- Anyone can do it
- Get more ideas
- Can explore different solutions and directions faster
- Low cost
- Can work through flaws early in process
- Great way to collaborate and put some ideas in front of colleagues and trusted stakeholders early in the ideation process.
Sketching is great when you are thinking through all the initial ideas related to the project. A series of sketches can outline the steps in a user flow. You can validate a variety of layouts and show the basic app structure. It is also a helpful practice throughout a project whenever you reach an impasse. A tough problem or looking for a better solution that does not have a pre-existing model.
From rough to refined
Once you have reached a point where you are confident in the ideas and are satisfied with your creation you can begin a second round with high fidelity sketches. These are still low tech but are cleaned up, scaled to the size of your target device and introduce color and simple interface elements. There are tons of free grid and device templates available for download. These will help frame your sketches and make them more presentable to those you are pitching the concept to. For my CIVIC app project I chose the iPhone X phone as my initial prototype size. Since it is my personal phone, it would make things easier when I wanted to start exploring digital prototypes.
Interactivity is not just digital. Interactivity can be mechanical, analog, organic. Interactivity just means that two entities respond to one another, that there is communication, cause and effect. So, paper prototyping is the art of taking your sketches and converting them into interactive maquettes with layering, scizzors, tape, glue and other materials. I have even seen plywood mobile phone frames that allow paper “screens” to be swapped out on “key presses”. Please see the resource links below to see all the creative ways and methods you can use to make your paper interface wireframes interactive. This video featuring a tablet app project will give you a good idea of what I am trying to describe.
CIVIC App LoFi
My Process for the CIVIC App started with a 5” x 6” spiral notebook. I had some ideas in my head but I had to get something out on paper. This is where the rubber meets the road. Up to this point, I had not done much work on the actual interface of the application. I gathered all the materials I had such as my initial app description, ideation work, preliminary IA (simple site map) and example flow charts. I studied them and started to visualize the user holding a phone. What would they see? What gestures would they make to navigate?
I began just creating lists and crude doodles for icons. The work made me see flaws in my IA and flow charts. Major changes were happening already. I decided to combine some sections because the interface demanded it. I prioritized some items, giving them permanent space in my interface, I chose second tier items that would be hidden but accessible and finally my third tier items. I had a vague idea of what my icons would look like but instead I chose to focus on general composition, spacing, regions. All represented by squares with crosses through them. When the design stage begins, I can revisit the icon designs, typography, animations…right now, I just wanted to get thoughts and layouts out quickly.
I realized that before I could start working on any user flows or tasks, I really had to have a grasp on what my application’s basic layout would look like. I took my early sketches and tackled that part first. Once that was done, the creative process really started to flow and it was easy to envision more tasks. Each user goal or function I tackled made the project richer and more concrete in my mind. I could see it, in theory I was already building it. I scratched things out, crumpled up bad ideas, wrote myself notes. As I struggled to answer the question “How?”, I looked up on whether these functions were even possible.
Working on the app interface forced me to define the character of the app. The app was not a social media or news app, the app is not for activism. The app is a tool and I do not want the home page dominated by a feed. Ultimately it is meant to provide information to the user and the flexibility of the app lies on how much the user customizes their issue feed. Everything else is a personalized reference, like Wikipedia or IMDB based on the user’s address. With that principle in mind, I came to the understanding that most user interaction will be navigation to a piece of information, where once they find it, is the only place in the app where an action needs to take place such as export, email, call, share, bookmark etc.
I have compiled my wireframes and mapped out two tasks: user sign up and reporting a utility issue. This exercise has really generated a lot of user centered thinking around the app. Below is a link to the full LoFi prototyping assignment. It is amazing what can be done in a few weeks and with a few short strokes. I have to admit, I am getting excited and look forward to both my paper prototyping and low tech digital interactive prototype using POP, https://marvelapp.com/pop/ a service by Marvel to post sketches online and make them interactive. More to follow.
I also got a chance to work on some color palettes and logo concepts included in the .pdf and header image.
Resources & References
Coleman, B. (2017). How to Make Paper Prototypes. SitePoint. Retrieved from https://www.sitepoint.com/how-to-make-paper-prototypes
Stop Talking and Start Sketching: A Guide to Paper Prototyping. (2017, February 16). Retrieved from https://blog.marvelapp.com/stop-talking-start-sketching-guide-paper-prototyping
CanvasFlip. (2018). The art of UX sketching and paper prototyping. Medium. Retrieved from https://uxplanet.org/the-art-of-ux-sketching-and-paper-prototyping-5dae5a1efc7d
UX Playground. (2015, June 11). Low fidelity prototype testing of the EE app. Youtube. Retrieved from https://www.youtube.com/watch?v=yafaGNFu8Eg
POP by Marvel – Turn sketches into iOS and Android prototypes. (2019, July 31). Retrieved from https://marvelapp.com/pop
Brown, D. M. (2010). Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) (Voices That Matter). New Riders. Retrieved from
Bentley, F., & Barrett, E. (2012). Building Mobile Experiences (The MIT Press). The MIT Press. Retrieved from
Recent Posts from the Graduate Series:
- User Testing: It takes a Village - MODULE 5 - User Testing and Higher Fidelity Prototyping with Prof. Patrick Hogan It takes a village to create a…
- Flowcharts: Finding The One Best Way. - MODULE 3 - User Journeys and Flowcharts with Prof. Patrick Hogan As we continue our journey into the practice of…
- About IA - MODULE 2 - Information Architecture with Prof. Patrick Hogan Every good UX Designer is also a competent information architect. Information…
- Ideation Techniques - MODULE 1 - Ideation, Prototyping and Testing with Prof. Patrick Hogan Ideas are the most powerful things in human existence.…
- The Case for Space: DataViz Final Project - STORYTELLING THROUGH VISUALIZATIONS Sourcing Data My final project and very first interactive data story will be about the long term…
- Be Tufte on Bull! - MODULE 5 - Persuasion Versus Deception Persuasion In our last blog post we explored some best practices and common mistakes…