UX & Interface Design

Introduction

For this project you must come up with an idea for a new mobile application that you and other people you know will use.

• Scope — You do not need to code this app or even design every page of the app. Instead you must plan to create a prototype of the key features that would "sell" the app to its target audience.
• Final format — You will create two final components for this project:
  • Prototype — You will use InVision to create a simulation of the application including at least five screens/states.
  • Process book — You will keep evidence of research, sketches, and design comps along with short narrative of your work at each stage of the project. You will then compile these into a neatly-formatted process book.

As this project will involve testing make sure you choose a direction that is relevant to people to which you have ready access. A campus solution or application that meets needs of college students would be completely acceptable.

Deliverable A: Proposal

The proposal for this project should take on the form of a simple pitch for the application you will build. Include the following for at least two different ideas you have:

• Name of the application
• Single sentence that encapsulates the need/key feature of this application.
• Bullet-point list of specific features (you will not build all of these, but this gives a sense of the full scope of what the app would be if fully developed)
• As needed supporting narrative to provide more background

Your professor will weigh in on your proposals and work with you to determine one that you'll pursue for the rest of the project.

Deliverable B: User Research

Identify at least 5 people who might use the application you're planning. Conduct research in at least one of the following ways:

1. Contextual research — observe the user in authentic situations similar to how and when your application might be used. Gain perspective on the actual context and use cases for your application.
2. Interview or Focus Group Questionnaire — prepare a list of questions you can use to interview potential users to gain information about your application. Be careful not to ask leading questions, but instead, to ask questions that give you information about the user's conceptual model for such an application, how they might use it, what they'd expect it to include, what they'd expect it to look like, etc.
3. Survey — if designing an application that has a broad base of users to which you have access, a survey might be helpful. In this case, devise a short, focused, informative and structured survey to distribute and collect electronically.

Gather your results and prepare a user research report similar to what you completed during earlier projects. Include at least the following:

• Summary of research methods
• Summary of key findings from research
• Summary of implications for your project
• Appendix of research tools (questionnaire, survey) and data collected (survey results, data from interviews, data from observations, etc.).

Deliverable C: Task Flow Diagrams

First, as you've now gained some new information about your project through user research, update your project purpose statement and features of the application. This could be the same as in Part 2-A, but likely needs to be updated based on your user research. Include this on a separate page in your submission from the rest of the deliverable.

Next, read more about task flows here. This chapter from Pratt's text on Interaction Design used to be required reading in this class and the book itself is full of lots of good visual examples of deliverables from the UX process.

Based on what you've learned from user research develop at least one task flow diagram for a key feature or task that will be completed using your application. This should be the single feature or small set of features that "sell" your app to potential users. You will flesh out one such full task flow in your final version of the application so use this as a planning step to envision the steps the user will go through to complete it. Be careful not to think solely about the screens or buttons users will see but the actual mental tasks involved.

For example, if I was creating an app that sells prints from a collection of local artists, my key task might be to allow users to browser, view, and purchase a print. Here is my user flow in narrative form:

1. User opens application and sees a list of recent prints along with filtering and sorting options
2. User searches, filters, and sorts as needed until she finds a print in the list that interests her.
3. User taps to view details about the print.
4. After deciding she'd like to buy it she taps an option to add it to her cart.
5. As this is the only item she wants she chooses to check out.
6. In the checkout process she sees the item in her cart and confirms the order is correct.
7. Next she enters her shipping address and chooses a shipping option.
8. Then she enters her method of payment and completes the purchase.
9. Finally she sees a confirmation screen reflecting that her order has been placed and lists the expected delivery dates. She sees options allowing her to return to browse the product list or change her order.

First sketch the diagram on paper in order to plan and refine the steps. Then transfer to digital form to tidy up.

Deliverable D: Low-fidelity Wireframes and Demo Video

First experiment with layout options for your site by creating thumbnail sketches of the pages you will include in your prototype set of features.

Then create larger low-fidelity wireframes (giving the impression of life-size). These should be test-ready for your paper testing session in Deliverable E.

Create a quick demo video of you talking through the task and screens you will use for your testing sessions in Deliverable E. As before, post this video to YouTube.

Deliverable E: Paper Testing Results

Make any updates needed in order to prepare your low-fidelity wireframes for user testing based on class content and feedback from your professor.

Then conduct at least five user test sessions with your wireframes.

1. Develop a protocol in advance that you can use to prompt users to complete important/key tasks with the interface.
2. During the test simulate the likely changes to the interface by changing the page or adding layovers using techniques discussed in class content.
3. Take minimal notes of observations during the test, but be sure to write complete notes afterwards.

Create a neatly-formatted report that includes the following:

• Overview of testing protocol
• Summary of results
• Revisions planned as a result of testing
• Full protocol as an appendix

Deliverable F: Styles and App Persona

Use this template to create style tiles for your application.

Also create an App Persona based on what you've read in the Walter text. Aim to address the following:

• Brand name
• Overview
• Image
• Brand Traits
• Personality Map
• Voice
• Copy Examples
• Visual lexicon (use style tiles here)
• Engagement Methods

Combine the Persona and Style tiles into a single PDF document that is neatly formatted.

Deliverable G: Design Comps

Create the full look-and-feel for your application using artboards in Sketch and based on what you learned from your paper prototype testing.

• For layovers or changes to elements in the interface create separate artboards on the same "page" in Sketch in order to design only the differences.
• Name each artboard intentionally so that you can clearly identify and navigate them when you sync with InVision.

Set up your comps as an interactive prototype using InVision.

1. Create a new project named UX P2 Lastname and ensure the professor is added as a collaborator on the project.
2. Sync your comps from Sketch to this project.
3. Add hotspots to simulate interaction with the application.

Final Submission

Make any final revisions you need to make to your project and prototype in InVision based on feedback. Be sure your most current version is set up and polished in InVision.

Create your process book for the project and be sure to include at least the following:

• Overall, describe and show the steps you walked through for the project.
• Include deliverables such as:
  • Proposal with description and goals
  • Your user research
  • Images of your paper prototypes
  • Your user testing report and protocol
  • Hi-fidelity wireframes
  • Style tiles
  • App persona
  • Final design comps
  • Link to the prototype in InVision