Project 3

Mobile Application

For the last project of the semester, students will strategize, conceptualize and design an interactive mobile application that “solves” an issue they have identified.


Students should be aware of the evaluation grid for this project.


Students can choose to work with their proposed theme of Project 2, or with a new subject of their choice. No matter which option they choose, students need to get the selected theme approved by their instructor.

Additionally, students need to be aware of the complexity of the design process of a mobile application. As such, some questions need to be asked and answered by each student at the beginning of their design process to ensure that they are developing their app strategically.


These questions include, but are not limited to:

  • What is the exact issue I want to solve/improve upon?;
  • What will be the specific focus of the mobile application?;
  • Which of its users need will the mobile application fulfill, and how will it do so?;


For this project, students are invited to think beyond the screen and to consider what the mobile device itself offers to users and potential customers.


Here are some examples of characteristics specific to mobile devices that need to be taken into consideration:

  • Notifications;
  • Geo localization;
  • Tracking data system;
  • Communication aspect (text and voice components);
  • Payment system.


Keep in mind that there needs to be a strong rationale behind the development of your mobile application. As such, if most of the identified issues/needs could potentially be solved/fulfilled by the creation of a typical website using a framework such as bootstrap, you need to articulate new questions/issues that require the creation of a mobile application.

The choice of mobile device used should be based on the specific requirements of each student’s project. From a design perspective, students should look at all devices offered in InVision and choose the best one based on its characteristics.



Strategy

The process required for this project is similar to the one used for designing websites. However, since this project doesn't involve HTML or CSS coding, students are invited to get into more details at each step of the design process (objective, user experience research, interaction design, user testing and visual design).


Here is a list of questions and items to consider when designing your mobile application:

  • What does the user workflow look like? (how do users login to the app? Do they need to create an account?);
  • What are the vital functions for this standalone experience?;
  • What kind of content is required to support these functions? (Attention, smaller screen sizes require that extra attention is placed on text. Edit/cut down unnecessary content and display what is most important first);
  • What technologies could assist users with their mobile experience? (e.g. location aware services);
  • Consider the context of use – distractions, multitasking, motion, lighting conditions and poor connectivity to name a few;
  • You should also take into account the users’ mindset when using mobile devices: are they micro tasking (using their mobile device for a short burst of activity), or are they bored (using their mobile device for entertainment/passing time);
  • What are the users frustration and pain points? Determine these through your persona development exercise. For example, do users need to sign in to the app every time they want to use it, or only when they want to make a transaction? Another example that might lead to users' frustration is poor navigation and illogical positioning of links, options and irrelevant content;
  • How will the navigation work? Reduce the number of categories and levels of navigation. Rearrange based on priority, always presenting the most important categories first;
  • Make sure to use clear, concise and consistent labels for navigation across the app;
  • Don't forget about the reality of touch screens: make sure the width and/or height of the different navigation items are at least 30 pixels (as an example) to ensure usability.


InVision Setup Account

  • Go to the Education InVision Sign Up;
  • Make sure to select the Student;
  • Make sure to add York University for Institution;
  • The code is: 56-73-13-19;
  • This process is for new accounts.;
  • If you already have an account, email Nadav Reis at nadav@invisionapp.com and he will make sure you get the latest upgrade.


Usertesting.com

For their last project of the semester, students will follow a usability testing methodology for the design of a Mobile Application.

More specifically, students will be using usertesting.com, a User Experience Research Platform, to get both quantitative data and qualitative insight on the usability of their prototype.

For this purpose, students will develop questionnaires involving a series of user interactions meant to validate certain assumptions they may have on the quality of the user experience of their project.

The results of the analysis of these questionnaires will be hypotheses related to the efficiency of different levels of their user interface, such as: the main navigation is difficult to understand; readability is an issue on some screens due to the smaller font size; the general workflow of the prototype is confusing; or participants are not able to access specific content due to a faulty navigation.

As such, the questionnaires will allow students to pinpoint problematic, or successful, areas of their user interface, which will, in turn, inform further development of their project.


Usertesting.com Setup Account

Alt text

Please follow the instructions carefully

  • Go to the usertesting.com;
  • Go to Sign Up;
  • Select ORDER NOW under Individual;
  • Enter your first and last name;
  • Select the email address already available under your name from this document. It’s important to use this address specifically. If not, you won’t be able to get the feature;
  • Enter 999-999-999 for the phone number;
  • Enter York University;
  • Select 50001+;
  • Create a password (and make sure that you take note of it somewhere);
  • Click create your account.


Questions Strategy

Usertesting.com suggests two kinds of activities to perform, namely tasks and questions.


1 - Blank Task

A task should be an action or activity that you want a user to accomplish at that time. - Source usertesting.com

Tasks are specific actions that you want participants to execute on your prototype. They are a great way to gather actionable feedback from your participants. Make sure to focus the tasks on the insights you want to gather.


Example
Starting on the home page, please select the first image of the gallery section.

Goal
To understand if my main navigation is clear. Is my labeling good and understandable for users?


2 - Questions

Use a question when you want to elicit some form of feedback from a user in their own words. - Source usertesting.com

2.1 - Verbal response

Example
Describe what you enjoyed the most and what frustrated you the most about this prototype, and why?

Goal
Produces qualitative feedback

2.2 - Multiple choice

Example
In the activities section, what is the first piece of information that you read / view? A)Schedule, B)Filters, C)Price

Goal
Validate specific details such as hierarchy and information architecture.


2.3 - Rating scale

Example
How much do you appreciate the general colour scheme, font choice and visual icons? Rate from “Not at all likely” to “Very likely”

Goal
Good for collecting varied feedback.


2.4 - Written response

Example
In section XX, what do you think is missing, if anything?

Goal
Excellent open feedback for further analysis and to ultimately open the door for new ideas and opportunities, for example to improve or add small details, or to develop a completely new section.



All students who engage with human participants for this course-related need to have an ethics review supervision done by each instructor.

Especially, for this project, students need to:

  • Get approval of all questions submitted by their instructor;
  • Adapt the Informed Consent Form Template for the screener question on your online usability test.


View / Download



Students Peer Reviews

Using their initial InVision prototype and the draft of the questionnaires they developed for usertesting.com, students will pair up with another colleague in order to perform an in class review and user testing of their mobile applications.

In teams of two, each student will read their questions orally to their teammate. The second person will try to complete the tasks and to answer the questions asked on the InVision prototype.

Once they are done, students will be invited to switch roles in order to review the other person’s prototype.

The goal of this exercise is for students….

  • To validate the questionnaires developed for usertesting.com;
  • To validate the workflow and InVision prototype before submitting it to real participants;
  • To gather general feedbacks on their mobile application project.



Usertesting.com Submission Process

Before submitting your questions for the test to usertesting.com, please make sure you completed these specific importants steps:

  • Customize the Informed consent form for your specific project;
  • Set the screener question of your usertesting.com test to the Informed consent form (break down into at least 3 part or mores…);
  • Ensure your questions are clear and well written;
  • Ensure your InVision prototype is well prepared (all links are working well);
  • Print a draft copy of your test and submit it to the instructor for validation and signature, along with your Tutorial, before anything is submitted;

Once all those steps are done properly and they have received approbation from their instructor, students can submit their questionnaire to a potential pool of candidates on usertesting.com.


Alt text

Step 1 - Go to Order Summary


Alt text

Step 2 - Insert the discount code


Alt text

Step 3 - Order Total should be at $0


Here are the steps to do so:

  • At the bottom of the Select Task page, select Review Order;
  • In Order Summary, insert the Gift Code: U-YU and click Add Code;
  • Attention: you need to make sure that you select 3 participants. If you select more participants, usertesting.com will ask you to add your credit card information, and we don’t recommend to do so for the purpose of this class;
  • Once the discount is added, select Have Users Start Testing and the process to recruit participants will begin.



Post-Testing Steps

When all participants have performed your test, you can watch the video recordings of their sessions and read their reports.

To respect the confidentiality agreement, it is important that each file that you download on your computer includes no trace of the participants’ usernames.

As such, each student MUST rename the users with an anonymous name.


Example abi_smith21 will become Participant A

Attention, please make sure that you change all participants’ usernames in each of the tabs included in the excel file.

For your project 3, you must submit the excel file from userting.com to digital locker as a proof of submission.



Take Aways Written Component

Once all participant research is done, each student will need to produce also a one page document (300-400 words) describing their takeaways from the user testing performed on usertesting.com.

This text will include:

  • What did you learn from your usability testing experience?;
  • What were the positive elements of your prototype?;
  • What were the elements that you could potentially improve? Please provide one or two visual examples.



usertesting.com study metrics submission

All students who perform a study through usertesting.com need to be careful about respecting the confidentiality of each participant. Here is a quick reminder from last week in imagery.

It is important that each file that you download on your computer includes no trace of the participants’ usernames. As such, each student MUST rename the users with an anonymous identifier.

As proof that the study was performed, every student needs to upload the excel file of the study’s summaries to digital locker.

Alt text

1 - Rename username into a anonymous name such as Participant A.
2 - Delete the entire row 11 (“Video”) for each participant.
3 - Only keep the Session Details Tab.


Alt text

Example of a legal document.

Here are the steps to do so…

  • On the dashboard, select your study and click on the three dots;
  • Select Export to Excel;
  • Open the excel file;
  • Make sure all usernames are changed to an anonymous identifier in all tabs (for example, abi_smith21 will become Participant A every time they are mentioned);
  • Delete the entire row 11 (“Video”) for each participant, it’s a link to video references;
  • Only keep the Session Details Tab;
  • Save the file and upload to your digital locker folder.



Deliverables


Week 12 Nov 30

  • Podium Presentation;
  • Final submissions to all materials;
  • Proposal (Written Component, Application Architecture (inspired by the site map technique) and Persona)*;
  • Mood Boards (Option A, Option B);
  • Wireframes (Low Fidelity, Mid Fidelity);
  • High Fidelity Interactive Prototype (InVision Link);
  • User Testing Component (Questions Proposition, Excel File Study Metrics, Take Aways Text Component);



Week 11 Nov 23

  • Full High Fidelity InVision Prototype (The more you do for next week the better is for one last round of feedback before the delivery).
  • If you have not already done so, you must be in process to submit your questions on Usertesting.com;



Week 11 Nov 16


Week 10 Nov 9