PROJECT 2 UI DESIGN & WIREFRAMES

The heart of this course is a project, in which you will design, implement, and evaluate a user interface. User interface design is an iterative process, so you will build your UI not just once, but three times, as successively higher-fidelity and more complete prototypes.

Note: This project is the largest in the course. Planning is the biggest chunk of time in the UI/UX development process. It is beneficial to the time of the project to spend it thinking through each piece. Development of the prototype will go smoother with a solid plan. It is recommended that you submit this project by the recommended due date to get feedback to implement into Project 3 and Project 4. 

This project is the first step in the user interface design process.  By the end of Project 2 you will have completed the user research, created user personas, developed wireframes. In Project 3, you will develop a working prototype. In Project 4, you will revisit heuristic analysis and usability testing on the user interface and experience you designed.

Focus for this project is on user research and wireframes – understanding who the users are, what are they trying to accomplish, how can your interface design support and delight them. We review several approaches to structuring, performing, and documenting user research, including a special focus on personas of different types and on use cases. This project provides a walk-through planning and analysis stages for UX/UI projects: why the planning matters and methods that can be used.

You may choose to design a user interface for any industry. The type of user interface you create is also your choice (i.e. SmartTV, AR, VR, smartphone, app, website). If you need some ideas to get you started, browse these concepts:

PROJECT 2: SAMPLE PROJECT

PROJECT 2: SAMPLE PERSONAS

Complete the steps below for the project definition portion of the project:

Step 1: Define

Define what type of user interface you are designing. The type is up to you – you could create a website, app, AR, VR, video game, etc. Provide a description and the goals of the user interface.

For example, you are designing a app for user to use to find local restaurants with the best pizza. The goals would  be to leave a review, favorite the restaurant, map its location, etc.

Step 2: Research

Research the type of user interface you want to design. What are the current trends in the user interface design?

For example: you are designing an app for a local park, you will want to check out other parks apps. Take some screenshots of what the app looks like and discuss the pros/cons of the user interface.

Step 3: User Analysis & Personas

Identify the characteristics of your user population that will use the user interface. If you have multiple stakeholders, identify each one. Create a persona for each type of primary stakeholder. You need to include at least two user personas.

Step 4: Task Analysis

What are the users going to accomplish using the user interface? What three tasks could they accomplish? Identify three tasks. Write a Hierarchical Task Analysis (i.e. a step-by-step process) for each task. This task analysis looks at the process the user would take to accomplish the task.

Step 5: Problem Scenario Analysis

For each task, write a paragraph-length problem scenario: a concrete, realistic example of the task.

Step 6: Usability Requirements

Think about what usability metrics make sense for your project and specify at least two measurable usability criteria for user interface (e.g., “Users will score satisfaction at least 4.0 on a 1-7 scale).

Complete the steps below for the design and wireframes portion of the project:

Step 1: Sketches – Take time to brainstorm a variety of different interface designs, sketching them by hand on paper or digitally. You should play with many more than two designs, but you only need to record two.

Step 2: Wireframes –  Create a digital wireframe of the UI design. The wireframes should include all screens needed to complete at least one of the tasks (as listed above in Step 3). The software that you use to create the wireframes is up to you – could use one of the UI prototyping tools (Adobe XD, Azure, Figma, InVision), Adobe Illustrator, Adobe Photoshop, Word, PowerPoint, etc.

Step 3: Storyboards – Create a storyboard showing how the user interface works for your scenario. The storyboard should show how the user would complete one of the tasks (as listed above in Step 3).

Complete the steps below for the presentation portion of the project:

Presentation

Put all of the above together into a presentation. This presentation could be completed using PowerPoint, Adobe Spark, Prezi, Word, etc. Think about taking this presentation to the client to show them your ideas on the user interface design. Include in the presentation:

• UI description
• Research
• User Analysis & Personas
• Task Analysis
• Problem Scenario Analysis
• Usability Requirements
• Sketches
• Wireframes
• Storyboards