MODULE 5 – User Testing and Medium Fidelity Prototyping with Prof. Patrick Hogan
It takes a village to create a great product. After working on our lo-fi prototypes, the next step is creating preliminary designs and starting to flesh out the CIVIC app. These designs are our first step in making something we can present to stakeholders. A way to persuade and show others the vision we have for a new civic engagement product. Bringing the app to life.
There is no need to code yet. Simply linking some screens together is a low tech way to show anyone how software would look and feel. Software like Marvel POP, InVision and Adobe XD make it possible to quickly take flat designs, merge them into a low tech interactive prototypes and collaborate online with stakeholders and testers. Soliciting and processing user feedback into meaningful and actionable intelligence will always make your designs better, fuel your idea and lead to success. A medium fidelity prototype is a prototype with limited functionality but clickable areas which presents the interactions and navigation possibilities of an application. Medium fidelity prototypes are usually built upon storyboards or user scenarios.
Some medium fidelity prototypes look like live software to customers allowing participants would be more likely to behave naturally during testing and offer important detailed feedback that could improve the design, ideas, save time and providing fresh perspectives on your plans. During this initial testing of the CIVIC app, watching the participants play with the interface and ask questions really stimulated the thought process and immediately revealed items I could improve.
Testing is an opportunity for fixing elements, tightening up my design, and making things more user friendly. You need people when designing things for people and the wider your audience, the more input you will need. If CIVIC is being built for a mass market, there will be hundreds of people who will see it before any code actually gets written, any databases are populated and any servers spin up. You may even find that things that you have included are not desirable at all and can be eliminated! You may find flaws, as I did, in my user flows, site-map and wire frames. True quality takes time and review, hence the phrase “tried and true”.
User testing is designed to explore the CIVIC mobile application ease of navigation, usability and on-boarding process. With this particular testing, 3 sessions were completed for three tasks. The sessions were completed using POP, Prototype on Paper app. The goal is to observe how users navigate the application after being given specific goals. Medium fidelity prototypes of the application have been created approximating the layout and functionality of the app. At this point, there has been no coding, much of the content is missing, and the user is simply clicking through a bunch of static pages representing assumed paths. These paths were outlined earlier in the user flow and wire framing generation stage of the project. Ultimately, the results should yield insights into how users will engage with the app, any missing or confusing UI elements and what needs adjustment in order to create a more useful product. Through observation and questioning, users having trouble navigating through primary, secondary and tertiary screens provide rich feedback to the design and development team allowing further refinement of planning documents and guidance for the project. Early user feedback is critical to a thorough and iterative development process and will lead to a successful launch.
Building a visual language.
Over the past week, I started developing our visual language for the application. Initial design assets have been considered and presented such as color palette, typography and icon system. I created the static layouts in IPhone X dimensions just out of convenience. I could quickly update screens upload to marvel and preview them on my phone. I learned that if I were missing a section, I could create some basic pages and use preexisting components directly within the marvel platform.
I also liked that a user could add generic linking like “previous” screen to your hot links. This is perfect for just quick and dirty mock ups, but it would be nice to add some simple gestures and layered elements. I found myself wanting to tinker with Marvel more as I spent time with it. I created screens that were not tied to my tasks specifically but helped clarify some of the directions I was taking with design solutions. Each new screen design helped inform and refine the previous design into a more holistic and thorough solution. The Marvel POP interactive preview is available below.
Based on the concepts from our wire frames, preliminary screen designs were created in Photoshop. Some of the placeholder language was replaced with phrasing closer to final language. Creating design assets early in the project may seem like a trivial or premature task to some, but I believe that working on aesthetics and branding in the ideation and prototyping stage lends legitimacy to your ideas, realizes the product concept in decision makers minds and helps stakeholders see your vision. It provides your project managers and advocates tools they can use to inform, report and solicit support for the project. Images are still the most effective way to communicate messages. It is not just making things pretty, these benefits are invaluable in building momentum, providing direction and keeping goals and the end user in mind.
A script was developed and testing sessions completed.
Resources & References
Babich, N. (2019). A Beginner’s Guide to Information Architecture for UX Designers. Adobe Blog. Retrieved from https://theblog.adobe.com/a-beginners-guide-to-information-architecture-for-ux-designers
Low-fidelity vs. high-fidelity prototyping. (2019, August 20). Retrieved from https://www.invisionapp.com/inside-design/low-fi-vs-hi-fi-prototyping
The Unexpected Benefits of Rapid Prototyping. (2014, February 11). Retrieved from https://hbr.org/2014/02/intervention-design-building-the-business-partners-confidence?referral=03759&cm_vc=rr_item_page.bottom
Test Paper Prototypes to Save Time and Money: The Mozilla Case Study. (2019, August 20). Retrieved from https://www.nngroup.com/articles/mozilla-paper-prototype
A Comprehensive Guide To User Testing — Smashing Magazine. (2018, March 07). Retrieved from https://www.smashingmagazine.com/2018/03/guide-user-testing
Task Scenarios for Usability Testing. (2019, August 20). Retrieved from https://www.nngroup.com/articles/task-scenarios-usability-testing
Top 100 UX Design Tips from a User Experience Master. (2019, July 17). Retrieved from https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master
Interactive Prototypes with Marvel – 20 Great Examples. (2017, July 11). Retrieved from https://webdesignerhut.com/prototypes-marvel
POP by Marvel – Turn sketches into iOS and Android prototypes. (2019, August 20). Retrieved from https://marvelapp.com/pop
InVision | Digital product design, workflow & collaboration. (2019, August 20). Retrieved from https://www.invisionapp.com
Download free Adobe XD | UX/UI design and collaboration tool. (2019, August 20). Retrieved from https://www.adobe.com/products/xd.html
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:
- The Shenandoah Valley Report – Content Strategy Final Project - Module 7 - Content Strategy with Professor Phillip Simon Delivering on an RFP. In this post, I am sharing my…
- STOP LYING: Ethics and Enablers. - Module 4 - Content Strategy with Professor Phillip Simon Should “enablers”, those who conceive, perpetuate and expedite unethical communications, lies,…
- Broad Strokes for Belfast – Content Strategy - Module 3 - Content Strategy with Professor Phillip Simon Determining A Strategy This week we produced a content analysis to…
- Performing A Content Audit & Analysis - Module 2, Part 1 - Content Strategy with Professor Phillip Simon Really Getting to Know Your Client This week we…
- Clearing Up Content Concepts - Module 2, Part 2 - Content Strategy with Professor Phillip Simon This week, we are going to take a moment…
- My personal relationship with content - Module 1, Part 3 - Content Strategy with Professor Phillip Simon Two-Fold After giving my own relationship with content some…