UX & Interface Design

Introduction

For this project you must choose a site that you as a user thought was particularly out of sync with how you expected it to function. A key here is to focus on one or more tasks that were hard to accomplish because of a lack of user-centered design for the site.

You must then plan and redesign at least two significant improvements based on what you've learned in the first part of the course.

• Scope — You do not need to code this site or even design every page of the site. However you must consider how the elements you're aiming to address impact other aspects of the site and account for this in your redesign. The portions you choose should feel complete and unified.
• Final format — You will create two final components for this project:
  • Prototype site — You will use InVision to create a simulation of the redesigned website including at least three screens.
  • 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.

Deliverable A: Proposal

Propose a site you will redesign and include the following:

• At least two aspects of the site that you find jarring, a hassle, or just out of sync with your expectations. Again, make sure to identify these as distinct tasks that were hard to accomplish.
• A brief vision for how you might address these concerns and make the tasks easier for users to accomplish.

Deliverable B: User Research

In this deliverable you'll get a sense of what other users think of the site and tasks you've selected to improve. Use what you've learned about contextual research to conduct sessions with at least 5 users.

• Ideally each session should be a contextual inquiry interview involving active intervention (observing, interpretting, etc.).
• At the least, conduct a structured use-case session where you determine a set of tasks and questions for the user in advance. Then walk through the prompts with them and observe as they try to complete the tasks.
• Record data from each session. Then synthesize the data into a user research report that includes the following:
  • Research overview:
    • Number of sessions you conducted
    • Generally speaking, the nature/structure of each session
  • Findings in clear bullet-point forms
  • Reflection: What did you gain from the user testing? Were your concerns about the site validated? Were other issues discovered? Do you now have other ideas about the nature of your redesign to take into consideration?
  • Refined project goals:
    • Distinct, measurable statements about what the end result of the project will be.
    • To build these, start by reviewing your original goals. Consider how user research affected these. Then write 2–5 goals as a result.
    • Be sure to phrase them around improving the user experience in some fashion. This can be subtle but important for stressing user-centered design from the start.

Deliverable C: Paper Prototype and Video Walkthrough

As discussed in course lessons, first experiment with layout options and arrangement of content elements for your project by creating hand-drawn thumbnail sketches of the pages or components you will redesign. Think through the complete task you're trying to improve and imagine interacting with your sketches.

Then create larger low-fidelity wireframes (giving the impression of life-size) on paper. These will be used in the next deliverable as you conduct usability tests.

Create only the wireframes you need in order to demonstrate the complete tasks. Keep in mind you can also use smaller pieces of paper and other materials to simulate modal windows, tabbed panels, etc. This also means you will need to include snippets of actual content; you can type and print these but then cut and paste them into your hand-drawn wireframes where necessary.

Next record a quick walk through of your paper prototype that demonstrates the user task you expect to accomplish through the prototype. This is easy to create with most cell phones today. You can post your video to any common video site such as YouTube (especially easy using your university Google access to YouTube). Set the privacy as desired as long as you can share the link with your professor through this assignment submission.

Deliverable D: Paper Prototype User Test

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

Then conduct at least 5 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. (See the one attached to the provided sample report below).
2. During the test simulate the likely changes to the interface by changing the page or adding layovers using techniques discussed in class.
3. Take minimal notes of observations during the test, but be sure to write complete notes afterwards.

Prepare a PDF report to submit that includes the following:

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

See this sample report and borrow any of the language and formatting you'd like.

Deliverable E: High-fidelity Wireframes and Style Tiles

Based on what you learned during user testing, move into Sketch and create grey-box, high fidelity wireframes of your page layouts.

• Use actual content wherever possible.
• Simulate the hierarchy of elements but don't spend a lot of time worry about particular style.
• Use placeholders for graphics and avoid any color.

Next create style tiles for your website direction. Create at least two options showing different style directions you could take the design and be prepared to discuss them in class.

• Use this template but duplicate the single artboard therein for each different style tile set.
• Change any content or labels you'd like; all the content herein is just a guide.
• Choose or remove any of the provided color panels.
• Use textures and/or imagery to fill the provide graphic boxes.
• For typography change not only the fonts but also sizes, spacing, color, weither, etc. in order to ensure the appropriate contrast between each level while also maintaining a sense of unity.

Deliverable F: Design Comps and prototype Setup

Getting Started in InVision

Look for the information provided by the instructor for how to create an account with InVision.

Watch this video for an introduction to using InVision for class projects. Review any additional videos you'd like from the "Learn" menu in the upper menu in InVision.

Create a project in InVision named UX P1 Yourlastname and add the professor as a collaborator.

Designing in Sketch

Create beautiful, detailed design comps for each of the updated pages of your site using Sketch. Include any screens you need in order to accomplish your planned redesigns. Design each separate screen on a new art board in Sketch.

Syncing with Craft

On Lab computers in Tyler you can install this directly from the Applications folder, by running the CraftManager application.

Otherwise, on your own computer, while logged in to InVision in a new tab in your browser visit this page to download the Craft Plugin. Install the plugin and use it to from within Sketch to Sync your project with the corresponding project in InVision.

Setting up your Prototype

Use InVision to add hotspots to your screens that you synchronized via Craft. Be sure that your prototype functions as expected based on the goals you set for your redesign.

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. While your professor should already have collaborator access to your project, use the share options to obtain a public URL for your project to submit. Test it on a computer without being logged in to InVision.

Next 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:
  • Problems you were trying to solve
  • Images of the original site
  • Your user research
  • Thumbnail sketches
  • Images of your paper prototypes
  • Your user testing report and protocol
  • Hi-fidelity wireframes
  • Style tiles
  • Final design comps
  • Link to the prototype in InVision (same as you submit as indicated above)