Tickets

Redesign the screens and process for the Maryland MARC train ticket kiosks. Think about how people buy tickets. How will they read information and navigate. How will people add information? How will they confirm their decisions? Remember that your materials will be used by a wide range of people, with an array of experiences. Explain your design by creating documentation: wireframes, prototypes, and text. Develop excellent layouts, type, and interface elements for your screens.

We are following an abbreviated interaction (or user experience, more conventionally) design process so that this project can focus on your gaining expertise with prototyping tools, and on designing affordances and signifiers within screens.

Objectives

• Create interactive pieces that work as part of a system.
• Experiment with ways of navigating information.
• Improve designs through iteration and through usability testing.
• Develop layout, typography, and detail design skills for screens.
• Explain interactive projects using design documentation and prototyping tools.

Parts of the project and phases of work

1: Background and scenarios

If you can, look at the purchasing process on the MARC CharmPass app for iOS or Android. You are using the app for information about how the process works now, but remember that your vending machine’s screen is much larger, and that it can and must display information differently.

Read through information about MARC—start with the system information brochure (PDF).

2: Type and color samples

Generate three concepts for font choice and color palette. Present these concepts as style tiles, which you can prepare using any software that serves you. Use fonts that will be available in your prototyping tool.

3: Wireframes

Working in your prototyping tool, create minimal, black-and-white wireframes for the whole of the purchasing process. Make these wireframes clickable.

4: Interactive prototype

Build an interactive prototype using the prototyping tool of your choice (we’ll focus on Figma in class). Create screens for one main flow that takes voters from the start of the process through the end. Make considered, well-refined choices about type, color, layout, interface elements, and text.

Turn in work

At the end of the project, turn in PDFs of your type and color samples, and a link to your interactive prototype (on Canvas ).

A simplified version

This project focuses on the design of screens and controls, and on building familiarity with prototyping tools. We will not design for the full scope of the ticket process.

• The CharmPass app offers tickets for an entire statewide transit system. You’re focusing in on one small piece, the MARC Penn Line.
• Passengers should be able to buy both single tickets between any two MARC Penn Line stations, or passes between any two stations.
• Assume credit card payment only, for simplicity. You do not need to design the payment process in depth: present the cost and ask the passenger to use the card reader on the machine.
• You should provide a screen that closes the process.

Specifications

Design for a touchscreen voting machine—specifically, for a touchscreen machine that then prints a pre-marked optical scan ballot. (In D.C., voters tend to prefer hand-marked optical-scan ballots, but electronic voting machines are always available.)

Your touchscreen is 1440x900px, and about 13 in. on the diagonal. (This is a little small for a touchscreen machine, but it’s about the size of a laptop screen, making for easy prototyping.)