By Mas Biswas
(April 14, 2020) - Designers in Mobile Media course follow these four steps when they create user-centered app prototype -- 1) assessment of users' needs, 2) idea generation and testing, 3) creation of high-fidelity prototype, and 4) conducting user testing on the prototype.
Before you implement the following steps, you will need to decide on the users' persona.
Step 1 - Assessment of Users' Needs: Conduct interviews with 5 individuals that meet your app user's persona to get insights on your new app idea or about an existing app, depending on what you decide to work on.
Based on the users' needs assessment, you will need to write 2 - 3 page report to document your findings that will also guide your work in the step 2 -- idea generation -- such as wireframing.
Step 2 - Idea Generation and Testing: Based on assessment report, create wireframes/sketches for at least all possible screens with Balsamiq. Please watch a tutorial on Balsamiq by Dr. Masudul (Mas) Biswas.
Within step 2, next phase is to get feedback on the sketches/wireframes from five individuals, who fit your app user's persona. But these five individuals need to be different from who you had interviewed in the “assessment” phase.
Step 3 - Creating a High-Fidelity Prototype: In this phase, students/mobile app designers create a high-fidelity prototype with either of these prototyping software -- Adobe XD, MarvelApp or Figma.
When you design this prototype, you need to plan for interaction and screens based on users’ comments on wireframes/sketches and interviews.
While creating screens, use text, labels, icons, pictures and multimedia content appropriately. Make sure that they are legible and/or fucntional.
In your prototype design, ensure a smooth flow among the screens and completion of actions through a series of interaction. At least one of the screens needs to be scrollable.
Step 4 - Prototype Testing: Conduct a minimum of 5 tests on your app prototype with the UserTesting.Com’s professional testers. Such test is known unmoderated remote usability study.
Deliverable for this step 4 will be a word document with at least 1-page summary of test results along with a link to the prototype, screenshots of test results/dashboard from your account on UserTesting.Com’s and links to the UserTesting videos.
In free version of mobirise, there is no plug-in or block for audio. Therefore, the following test audio is formatted with HTML5 tag for audio through a text editor, Brackets.
In the above audio clip, a student has reflected their learning outcome as well as experience of implementing this user-centered mobile design project.
This page is created with an intention to offer an example of mobile-optimized web story page to mobile media students. While creating this page, the author has followed the BBC Academy's guidelines on "Writing for Mobile" and David Lee King's "Twelve Tips to Better Writing for the Mobile Web."
