UX/UI and Quality Assurances
Printable Version (pdf)
Course Introduction
In this course, you will start learning methods and skills involved in designing interactive systems. The course covers the design process from the initial formulation of a design problem to creation of initial design rep-resentations like scenarios, personas, and story boards that concretize findings about user needs discovered through formative work. The course work involves practical work on a design problem that you will choose during the course. User Experience and User Interface (UX/UI) is a course designed to encourage a more diverse set of students to learn tech skills. UX/UI is an attempt to show students how important learning to research, plan, design, create, and code are by empowering them to build their own tech products. This course teaches students how to turn ideas into real products using design, story board, coding, and prototyping while using data analysis, human behavior, and consistent design practices. Throughout the course students will work in teams, expe-riencing different industry roles found within a career of UX/UI, from idea generator and project manager to developer and tester. The course culminates in a final working technical prototype that teams will present to an audience of end users, investors, and other potential interested parties.
Core Standards of the Course
STRAND 1
In this unit, students will pitch product ideas and form teams based on individual skills and similar interests. Teams will start functioning like real-world industry teams and learn how to manage work collectively using SCRUM. Teams will learn how to use products to collaborate and communicate ideas effectively. Students will learn how to develop products for a targeted customer base to solve specific customer needs. They will learn the fundamentals of UI design, then design and wireframe a static webpage with information about their team. At the end of the sprint, teams will do their first team retrospectives and status update presentations to the class.
Standard 1
What is UX/UI
-
Generate interest and excitement around the idea of working in teams to develop a prototype, product, and other technological concepts.
-
Inspire students to begin thinking like startup founders.
-
Lead students to understand the role and power of technology in today's world.
Standard 2
Intro to Web Apps
-
Define what an app is.
-
Give students a high-level understanding of different types of software applications.
-
Lead students to think deeper about how software helps solve problems.
-
Promote collaboration in the classroom.
Standard 3
Pitch the idea for initial feedback.
-
Practice pitching in front of other students.
-
Learn what to include in an effective pitch.
-
Begin thinking about a product idea to pitch.
Standard 4
Intro to Project Management
-
Understand the requirements of the team project.
-
Learn how industry professionals manage work in a fast-paced environment.
-
Set up scrum boards to track progress for the remainder of the course.
Standard 5
Understanding Your Customer
-
Understand team customer segments at a deeper level.
-
Conduct research to better understand the market.
-
Learn how to create customer personas.
Standard 6
User Requirements
-
Create user requirements specifications for products.
Standard 7
Intro to Design
-
Recognize and evaluate user experiences in products they already use.
-
Appreciate the importance of good user interface design.
-
Understand the process of developing a user experience based on iterations and customer engagement.
STRAND 2
WWW, Internet, HTML/CSS
Standard 1
WWW, Internet, HTML/CSS
-
Explain how the Internet and the World Wide Web work.
-
Introduce students to the technology behind building websites.
-
Introduce students to the technology behind building websites and the role of web developers.
-
Introduce students to HTML and the role of HTML in the development of web pages.
-
Apply HTML and CSS to create a webpage.
-
Build on HTML and CSS skills.
-
Apply additional HTML and CSS elements to webpages.
-
Understand CSS and the role of CSS in the development of web pages.
Standard 2
Understand the purpose and benefits of version control.
-
Setup Git and understand the basics.
Standard 3
Build a Team Site
-
Students collaborate to write code for their webpages.
-
Students apply HTML and CSS concepts to a team project.
-
Communicate progress, successes, and setbacks as teams.
STRAND 3
Making Your UX Design Interactive
Standard 1
Intro to JavaScript
-
Introduce JavaScript and how it used.
-
Learn a few basic JavaScript commands.
-
Create a simple webpage using JavaScript.
Standard 2
Variables in JavaScript
-
Introduce variables and uses.
-
Learn about variable scope.
-
Create a simple webpage using JavaScript.
Standard 3
Input in JavaScript
-
Review variables
-
Learn how to gather input from the user.
-
Use input in programs.
Standard 4
Functions in JavaScript
-
Review if statements
-
Learn how to create a custom function.
-
Use input in programs.
Standard 5
Conditionals in JavaScript
-
Review functions
-
Learn syntax for conditionals.
-
Use if statements in programs.
Standard 6
Team Status Presentations
-
Communicate progress, successes, and setbacks as a team.
-
Share the project with peers and describe ways that the team used JavaScript to create interactive elements.
STRAND 4
Making your UI Design/Prototype Functional: In this Strand, students will learn how to build the back end of their web apps, so that they can store and retrieve data. They'll learn the basics of Node.js, which will allow them to write JavaScript code for their server. They'll set up a database and write code to handle requests for data. At the end of this Strand, teams will have functional UI Designs/Prototypes that use real data.
Standard 1
Intro to the Back End/Web Server
-
Understand the need for a back end/web server when creating web applications.
-
Understand the role servers play in web applications.
-
Explore how to use Node.js and Express to create and run a simple server.
-
Quick Definitions
- Back end: The code that the server runs to handle application logic and requests for webpages.
- Front end: The code that the web browser runs to display webpages. Consists of HTML, CSS and JavaScript code.
- Static webpage: A webpage that does not have an associated back-end application and does not contain any dynamic information.
- Web application: A client-server application where the client (front-end) runs in a web browser, and the back end runs on a web server.
- Web server: Stores web applications and associated web pages and handles requests to process and deliver those pages to clients.
Standard 2
Intro to HTTP and Routes
-
Understand the basic HTTP request types and their uses.
-
Practice defining routes in Node.js.
Standard 3
Storing App Data
-
Understand the purpose and uses of databases.
-
Practice creating and accessing databases using SQLite and Node.js
Standard 4
Writing Database Queries
-
Students will learn how to write database queries.
-
Create databases in SQLite.
-
Create and populate tables.
-
Define SQL queries.
-
Modify and delete data.
STRAND 5
UX Feedback
Standard 1
Collecting and Interpreting Data
-
Visually communicate with data to team members
-
A/B Testing
-
Observation, Understanding, and Analysis of data and method of collection.
-
Quantitative Research benefits and limitations
-
Qualitative Research benefits and limitations
Performance Skills
-
Students should be competent in Adobe XD software
-
Students should understand team collaboration with fellow SME, clients, and stakeholders.
Workplace Skills
-
Communication
-
Dependability
-
Accountability
http://www.uen.org - in partnership with Utah State Board of Education
(USBE) and Utah System of Higher Education
(USHE). Send questions or comments to USBE
Specialist -
Kristina
Yamada
and see the CTE/Digital Technology website. For
general questions about Utah's Core Standards contact the Director
-
THALEA
LONGHURST.
These materials have been produced by and for the teachers of the
State of Utah. Copies of these materials may be freely reproduced
for teacher and classroom use. When distributing these materials,
credit should be given to Utah State Board of Education. These
materials may not be published, in whole or part, or in any other
format, without the written permission of the Utah State Board of
Education, 250 East 500 South, PO Box 144200, Salt Lake City, Utah
84114-4200.