User Experience and User Interface Design

Course Description

User Experience and User Interface Design provides an overview of User Experience Design (UX) and User Interface Design (UI), with particular attention to mobile usage contexts. Students identify user needs and map efficient pathways through a product, then use colour, typography, iconography, photography, and spatial relationships to build an interface that expedites the user's journey.

Within the SCNS taxonomy, GRA is the Graphic Arts prefix. Broward College publishes this at 3 credits with 72 total contact hours (30 lecture + 42 laboratory), prerequisites PGY1801C, CTS1851C, or DIG2100C at a minimum grade of C.

The distinction in the title is real and worth getting right immediately. UX is about whether the thing works for the person using it — research, structure, flow, and whether the task can be completed. UI is about the surface that carries it — layout, type, colour, controls, and states. They are different disciplines that are frequently held by the same person, and confusing them produces beautiful products nobody can use and usable products nobody wants to look at.

⚠ Contact hours here run well above the usual convention

Worth noting because it affects your schedule. Most 3-credit C-suffixed courses in this repository run 60 contact hours. Broward's entire GRA family runs 72 hours for 3 credits — 24 contact hours per credit — with two of its courses at 96. That reflects a studio model where laboratory time dominates: this course is 30 lecture and 42 laboratory hours, so more than half the scheduled time is production work. Budget for it, and note that a receiving institution's 60-hour equivalent is a genuinely smaller course.

Learning Outcomes

Required Outcomes

• Distinguish user experience design from user interface design and describe how they relate.
• Describe the user-centred design process and its iterative structure.
• Conduct user research using interviews, surveys, and observation.
• Develop personas and scenarios grounded in research rather than assumption.
• Map user journeys and identify friction points and drop-off.
• Develop information architecture, including site maps and navigation structures.
• Apply card sorting or a comparable method to structure content around user mental models.
• Create user flows and task flows for defined objectives.
• Produce low-fidelity wireframes and explain the rationale for a layout.
• Build interactive prototypes at increasing fidelity.
• Apply visual design fundamentals — hierarchy, alignment, contrast, proximity, and whitespace — to an interface.
• Apply typography to screen: type scale, line length, line height, and legibility.
• Apply colour deliberately, including contrast ratio and colour's role in communicating state.
• Design and use iconography consistently.
• Apply grid and layout systems, including responsive behaviour across breakpoints.
• Design for mobile contexts, including touch targets, thumb reach, and interrupted use.
• Design component states: default, hover, focus, active, disabled, loading, empty, and error.
• Apply established interface patterns and platform conventions rather than reinventing them.
• Apply accessibility requirements, including contrast, focus order, target size, and non-colour indicators.
• Plan and conduct usability testing and analyze the findings.
• Iterate a design in response to testing evidence.
• Present and defend design decisions to a non-designer audience.

Optional Outcomes

• Build and document a design system or component library.
• Apply motion and microinteraction design.
• Conduct competitive and heuristic evaluation.
• Describe A/B testing and analytics-informed design.
• Prepare design handoff specifications for developers.
• Write interface copy and describe the role of content design.
• Compile a UX/UI portfolio with case studies.

Major Topics

Required Topics

• UX versus UI; the design process
• User research methods
• Personas and scenarios
• Journey mapping
• Information architecture and navigation
• Card sorting and mental models
• User flows and task flows
• Wireframing
• Prototyping and fidelity
• Visual hierarchy and layout principles
• Typography for screen
• Colour, contrast, and state
• Iconography
• Grids and responsive layout
• Mobile-context design
• Component states
• Interface patterns and platform conventions
• Accessibility in interface design
• Usability testing
• Iteration from evidence
• Presenting and defending design decisions

Optional Topics

• Design systems and component libraries
• Motion and microinteractions
• Heuristic and competitive evaluation
• A/B testing and analytics
• Developer handoff
• Content design and interface copy
• Portfolio and case studies

Resources & Tools

• The Design of Everyday Things (Norman) — the foundational text, and the one that explains why affordance and feedback matter more than decoration.
• Don't Make Me Think (Krug) — short, practical, and the best introduction to usability testing on a budget.
• Refactoring UI (Wathan & Schoger) — unusually concrete on the visual decisions that separate amateur from professional interfaces.
• Figma — the industry standard for UI design and prototyping, with a free tier and a free education plan. Learn this one; it is what job postings name.
• Penpot — free and open-source, a genuine alternative if you want tooling you fully control.
• Nielsen Norman Group (nngroup.com) — free articles and the ten usability heuristics, which remain the field's most useful evaluation checklist.
• WCAG (w3.org/WAI) — free, authoritative, and the standard your work will be measured against legally.
• WebAIM — free contrast checker and accessibility evaluation tools; the contrast checker should be open while you pick colours.
• Apple Human Interface Guidelines and Google Material Design — free platform conventions, and departing from them requires a reason.
• Laws of UX (lawsofux.com) and Mobbin — free pattern references and real-app interface libraries.

Career Pathways

• UX designer and UI designer — frequently separate roles at large employers and combined at small ones.
• Product designer — the title that increasingly covers both, plus product thinking.
• UX researcher — a distinct specialization for people who like the evidence side; often requires additional methods training.
• Interaction designer and information architect — deeper specializations within the field.
• Web designer and front-end developer — designers who can code are unusually employable, and the boundary is porous.
• Graphic designer with digital focus — agencies and in-house teams.
• Accessibility specialist — a growing and well-paid niche driven by legal exposure.
• Freelance and contract design — realistic in this field, and Florida's small-business base supports it.
• Florida employers include the theme park and hospitality technology sector, health systems, financial services in the Miami and Tampa corridors, and a substantial startup presence. SOC codes 27-1024 Graphic Designers and 15-1255 Web and Digital Interface Designers.

Special Information

⚠ Accessibility is a legal requirement, not a design preference

The professional obligation most often omitted from introductory design teaching, and the one with the clearest consequences.

Inaccessible digital products create legal exposure in the United States. The Americans with Disabilities Act has been applied to websites and applications in a substantial and growing body of litigation; Section 508 governs federal agencies and their contractors; and public institutions in Florida — including the college you are attending — operate under accessibility obligations. WCAG is the standard courts and procurement documents point to.

What that means for the work you produce in this course:

• Colour contrast has numeric minimums. WCAG specifies contrast ratios for text and for interface components. Light grey text on white fails, however fashionable it looks — and it is the single most common failure in student work.
• Colour alone must never carry meaning. A red field indicating an error is invisible to a substantial fraction of users; pair it with an icon and text.
• Everything must be reachable by keyboard, with a visible focus indicator and a sensible focus order. Removing focus outlines because they are ugly is the most destructive small decision in interface design.
• Touch targets need adequate size and spacing — this is an accessibility requirement and simultaneously the fix for most mobile frustration.
• Images need meaningful alternative text, and decorative images need to be marked as decorative.
• Do not disable zoom, and design so that reflow at larger text sizes does not break the layout.
• Respect reduced-motion preferences — animation triggers vestibular disorders in some users.

The framing worth internalising: accessible design is better design for everyone. Captions help in noisy rooms, high contrast helps in sunlight, and large touch targets help everyone on a moving bus. Designing for the edge improves the middle. Rule 11 applies — WCAG versions and the legal landscape both change; verify current standards.

⚠ Test with real users — five of them, badly, this week

The highest-return habit in the discipline, and the one students most consistently skip because it feels unrigorous.

Usability testing does not require a lab, a budget, or a statistician. The influential finding from the usability literature is that a small number of participants — around five — reveals the large majority of usability problems in a design, because serious problems are hit by almost everyone. Beyond that, you are re-finding the same issues.

How to do it properly:

• Give a task, not a tour. "Find a flight to Atlanta under $300" produces information; "what do you think of this screen?" produces politeness.
• Say nothing. The urge to help is overwhelming and destroys the data. Silence is the method.
• Ask them to think aloud, and note where they hesitate — hesitation is the signal, and it precedes the failure.
• Watch what they do, not what they say. People are unreliable narrators of their own behaviour and are reliably kind about your work.
• Test early and rough. A paper wireframe tested in week two is worth more than a polished prototype tested in week twelve, because in week two you can still change the structure.
• Five people, informally, beats nobody, formally. Classmates outside your project team are adequate participants for coursework.

The professional point underneath: you are not the user. You know where everything is because you built it, you are more technically fluent than your audience, and your intuitions about clarity are systematically miscalibrated by that knowledge. Testing is the only correction.

⚠ The portfolio is the qualification — build case studies, not screenshots

Direct career advice, because hiring in this field works differently from most.

UX and UI roles are awarded on portfolio, not on degree. Employers want to see how you think, and a gallery of attractive screens does not show that. What they read is a case study:

• The problem — what was wrong, for whom, and how you knew.
• The research — what you did to find out, even if it was five interviews.
• The process — sketches, wireframes, the alternatives you rejected and why. Show the rejected work; it is the most convincing part.
• The decisions — the trade-offs you made and the reasoning, which is the actual content of the job.
• The testing — what you learned and what you changed as a result.
• The outcome — the final design and, if you have it, evidence that it worked.

Practical advice: three deep case studies beat twelve shallow ones. Redesigning a famous app is the most common student portfolio piece and the least persuasive, because everyone does it and nobody had access to real constraints. Design something real — a local non-profit, a small business, a campus organization — where you had to talk to actual users and live with actual limits. And write clearly; a designer who cannot explain a decision in a paragraph will not be trusted with one.

⚠ Dark patterns: the ethics question this field cannot avoid

Worth confronting directly, because you will be asked to do it and it is increasingly illegal.

Interface design can be used to manipulate. Techniques that exploit habit, attention, and social pressure to produce decisions users would not otherwise make are collectively called dark patterns, and they are effective, which is exactly why they persist:

• Making cancellation harder than signup — the most common and now a specific regulatory target.
• Pre-checked consent boxes and confirmshaming ("No thanks, I like paying full price").
• Hidden costs revealed late in a checkout flow, after sunk effort.
• Fake scarcity and countdown timers that reset.
• Disguised advertising and misdirection in visual hierarchy.

The practical reasons to refuse, beyond the ethical one: regulators are acting. The FTC has brought enforcement actions over manipulative subscription and cancellation flows, the FTC's click-to-cancel and negative-option rulemaking targets exactly this, and European regulation has moved further. Designing these is professional risk, not just moral compromise.

The stance worth adopting early: a designer's obligation runs to the user as well as to the client. You will not always win that argument, but the argument is part of the job, and the strongest version of it is commercial — dark patterns produce churn, refunds, chargebacks, and reputational damage, and the metrics that make them look successful are usually short-horizon.

Course format and transfer

GRA2134C is 3 credits with 72 contact hours (30 lecture + 42 laboratory) at Broward. It is a studio course: assessment is by project — research artefacts, wireframes, a working prototype, test findings, and a presented case — with critique as the primary instructional method. Learn to receive critique without defending; the ability to hear a problem with your work and act on it is the skill the studio format exists to build.

How Florida course levels affect transfer

The first digit of an SCNS number denotes the year of offering, not transferability. Courses at the 1000 and 2000 levels transfer transparently between Florida public institutions, and 3000 to 4000 is unproblematic since both are upper division. The boundary that actually matters is 2000 to 3000, where lower-division credit generally cannot satisfy an upper-division requirement.

Two transfer notes. Contact hours differ substantially across institutions for this credit value, as described above, so a receiving institution may or may not treat a 60-hour course as equivalent. And graphic design A.S. degrees are applied and do not carry the A.A.'s guaranteed junior-status transfer; students planning a B.A. or B.F.A. should confirm the pathway early, since art and design programmes frequently require portfolio review for admission regardless of transcript.