--- tags: ACIT-2811 --- <style> .markdown-body h1:first-of-type { margin-top: 24px; } .markdown-body h1 { margin-top: 64px; } .markdown-body h1 + h2 { margin-top: 32px; } .markdown-body h2 { margin-top: 48px; } </style> [Skip to Session 1 content](#Week-1---Session-1) # ACIT 2811 - Session 1 ## Course Description User Experience (UX) encompasses a wide range of activities including: * User Interface (UI) design * Information Architecture (IA) and field research * Usability design and testing This hands-on course is an introduction to UX/UI for those who are creating user interfaces for web sites, mobile applications, and information systems, as well as those who want a better understanding of the role of UX/UI. In conjunction with 2911, students will follow an iterative and agile approach focusing on ==User-Centered Design (UCD)== as the motivator for product direction. Participants will be expected to work in teams, with an emphasis on collaboration, brainstorming, and continued evolution of an interface concept based on UCD. ## Course Outline Upon successful completion of this course, the student will be able to: * Use ==Personas and User Stories== to identify features of a digital prototype. * Demonstrate successful practices in User-Centered Design (UCD). * Prepare and conduct surveys and interviews. * Propose an ==Information Architecture== for a digital prototype. * Identify anti-patterns in User Interface (UI) design and why they are unacceptable. * Conduct usability testing over several iterations. * Identify various ==Usability Heuristics== and how to apply them. * Demonstrate user flows that support intuitive navigation. * Develop effective prototypes and wireframes using an iterative methodology. <div style="display: flex; align-items: center;"> <span style="font-size: 400%; display: inline-block; margin-right:10px">🚨 </span><p style="margin-bottom:0"><span style="color: red;">This is not a coding course! You are not building a working app/website, instead you are creating supporting documents and designs for something that</span> <span style="font-weight: bold; color:red;">could</span> <span style="color: red;">be built</span></p> </div> ## Learning Resources __Readings:__ Readings will be provided in the Learning Hub, and will be available to you online, for free, either through O’Reilly Learning, or another accessible resource. __Software:__ [Figma](https://www.figma.com/) Free account __Recommended Books:__ * _Don't Make Me Think: A Common Sense Approach to Web Usability_, Steve Krug * _The Design of Everyday Things_, Don Norman ## Evaluation Criteria * Individual 50% * Assignments 20% * Quizzes (once weekly on Thursdays) 10% * Final Exam 20% * Group 50 % * Assignments 30% * Final presentation 20% ## Course Schedule | Week | Session | Topics | | --- | --- | --- | | 1 | 1 | Course Outline, Intro to UX Design | | 1 | 2 | Design Thinking, User-Centered Design, Usability Factors | | 2 | 3 | Information Architecture, User Stories and Personas | | 2 | 4 | Problem Statements, Ideation | | 3 | 5 | Prototyping and Wireframes | | 3 | 6 | Color Theory and Typography, User Flows | | 4 | 7 | Heuristics, User Testing | | 4 | 8 | Outro and Review | | 5 | 9 | Final Exam | | 5 | 10 | Final Presentations | ## Office Hours and Contact Information **Tuesdays and Thursdays**: 5pm to 6pm in the TEC Hub, by appointment **Wednesdays**: 9am to 12pm on Discord Email: charris17@bcit.ca # Week 1 - Session 1 ## UX Design UX (User Experience) Design is the process of creating experiences that are relevant, meaningful, and useful for users. It aims to address specific questions or problems when designing an experience or product, like: * How does a user know how to use the product (_image below for reference_)? Are conventions used? * How does a user accomplish their goals? * How does a user _feel_ when interacting with a product? Is it trustworthy? Innovative? Frustrating? <img src="https://i.imgur.com/rvHqNRg.jpg" style="width:100%; margin:10px 0 20px"> In addition to the points mentioned above, UX encompasses other considerations that go into the creation of a product or experience: ==UI (User Interface Design)== (e.g. how a website _looks_ and _behaves_), branding, content style (e.g. is the writing style casual or professional), and the goals of the business. <br/> ![](https://i.imgur.com/vT8aNQu.png) <br/> ### Further Reading * [7 factors that influence User Experience](https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience) * [What is Design Thinking?](https://www.interaction-design.org/literature/topics/design-thinking) * [User Centered Design](https://www.interaction-design.org/literature/topics/user-centered-design) ## Preliminary Project Proposals **Due Date:** Tuesday April 30 before the end of class **Instructions:** In groups of 3-5 you are going to create three short project proposals. These are rough ideas for an app/website that could be developed this term in the class. Your ideas don’t have to be “new”, i.e. you can work on something that already exists, that you would like to improve on, or change in some way. **Step 1.** Create a group of 3-5. Add your group members to a group on the Learning Hub. **Step 2.** In your groups, create three informal project proposals. Your app/site ideas can be anything, but they should be complex enough to allow you to work on a single app for the remainder of the course. "Complex enough" means that there is theoretically enough content to allow for a user to navigate through several different screens/pages in your app or website. Your project proposals can include simple sketches. Use any available drawing apps, or use pen and paper and take a photo. Drawing skills not needed. Today we will discuss your ideas in class and choose one together to move forward with. <!-- For the chosen project, create a Formal Project Proposal (pdf only please!) containing the following information: - Your group number and members (and optional group name) - A brief description of the app/site - A list of issues you have identified - these may be problems that are not served by current apps/sites OR problems with an existing app/site --> Additionally, you must create and submit a Team Charter containing a list of group members with names and student IDs, and answers to the following questions: - How often will the team communicate? - How will you communicate? - What are the ground rules for working together? - How will meetings be managed? - What resources will the group need and use? __Note:__ You aren’t going to be building complete apps/sites by the end of the 5 week course. We are going to use these to perform several UX exercises that _could_ be used to aide in creating a new app/site. At the end of the term these will still be work in progress. **Submission Instructions:** Have one of your group members submit both documents (Project Proposals, Team Charter) using the dropbox on the Learning Hub. ## Tasks to Complete Today - [ ] Join a team of 3-5 on the Learning Hub - [ ] Write 3 project proposals as a group - [ ] Write a team charter as a group ## Tasks To Complete Before Next Class - [ ] Create an account in Figma - [ ] Complete the readings listed above under [Further Reading](#Further-Reading) Quiz 1 on the Learning Hub will be based on the [readings](#Further-Reading)