UX Design

Course Description

This curriculum is designed to cover the fundamental concepts, tools and best practices in user experience design. You will apply these in real life contexts by conducting user research, creating personas, evaluating apps & websites and designing user flows among other things.

Summary of the Curriculum

The core curriculum is divided into 3 main parts: Discovery, Design & Validation.

• Discovery: The discovery phase, also known as the research phase, deals with acquiring the background knowledge needed to help you make future design decisions. During this phase, you will try to learn as much as possible about your client’s business, objectives, users, and competitors. In the units related to this phase, we will conduct interviews, surveys, and a competitive analysis to define user and business goals. You will acquire the tools and techniques needed to create effective personas and empathy maps. At the end of this section, you will be introduced to content strategy and information architecture within UX design and how to create user stories, sitemaps, and user flows.
  

• Design: The design phase is where you think strategically, and map out how our designs will work and fit everything together in a user-friendly and intuitive way. In this phase, you define the scope of your project, including detailing features and functionality. We will be sketching, wireframing, prototyping, and doing visual design to understand how your product or solutions behave in various scenarios.
  

• Validation: The validation or testing phase is where you either prove or invalidate your hypothesis. This phase is typically followed by additional rounds of design iterations and testing to solve the problems you will inevitably find when you test with users. In these units, you will learn how to conduct usability tests, analyze the results, and validate and/or iterate based on your findings.

Tools & Materials Throughout Course

Analog Tools

• Sketchbook or Notebook

• Sharpies, Pens, Pencils

Digital Technology

• Figma: prototyping, layout, and design throughout the semester. Figma is free for you to use with your Madison College email address

• Adobe Creative Cloud: Photoshop, Illustrator, & Indesign

• PowerPoint: presentations

• Microsoft Word, Google Docs: word processing software

• Marvel POP: prototyping from paper sketches

• Google Forms & Survey Monkey: online survey tools

Recommended Reading:

• Don't Make Me Think Revisited by Steve Krug

• The Design of Everyday Things by Don Norman

Overview

Over the course of 12 weeks, I worked to create a portfolio of all the work I created for the class's App Design Project. The portfolio incudes:

• App Introduction/Elevator Pitch

• Research Plan

• Online Screener Questionnaire Recap

• User Interview Summaries

• Empathy Maps

• User Personas

• MVP/User Stories/UI Requirements

• User Flows

• Wireframes

• Prototypes

• User Testing Summaries

• Visual Design (Style Tile

The course started with the discovery phase. The discover phase consisted of developing & writing a user research plan, distributing online user screener questionnaires, interviewing users from different demographics, creating 3+ personas, forming user stories, and creating user flows based on the personas.

Then, the design phase followed. The design phase consisted of identifying the minimum viable product (MVP) and UI requirements. I also developed a style tile & guide for myself to follow when I began work on the wireframe, prototype, and UI design.

Afterwards, the validation phase continued to the end of the semester. During the validation phase, I continued work on my UI design and prototype, completed user testing for usability testing, and checked my font & color scheme with an accessibility checker.

Portfolio

Link to Figma project: WanderHUB

Personas

Link to Figma project: Personas

MVP

Link to Figma project: Minimum viable product, UI requirements, and user stories

User Flow

I used Miro to create my user flows. The UI was more interactive and much easier to use, compared to Figma.

Link to Miro project: Miro board user flow

Link to Figma project: Figma user flow

Lo-fi Wireframe

Link to Figma project: Wireframe

Style Tile

Link to Figma project: Style tile

2nd Wireframe Iteration

Link to Figma project: Stylized wireframe

Prototype

Link to Figma project: Prototype

Prototype Recordings

These were screen recorded on a computer.

PDF Portfolio

Formatted my final portfolio as a PDF.