IXD414 - Designing with Systems
This is a studio course about designing digital products for the screen, with an emphasis on designing with systems in mind. This syllabus will be updated with more information throughout the semester. I'll let you know in class about updates.
Questions? mattk@ku.edu.
The Best One in Your Row
Let's make a small digital tool using an off-the-shelf design system.
You will design a small web application to build and display simple concert programs. We'll have mobile-friendly view-only access for patrons, and a desktop experience for music directors.
Your Client
Your client is a new band director at a high school who wants to launch a new tool to support his concerts - and share with others like him.
My predecessor in the band department gave up printing paper programs for each band performance. Instead he posted a QR code that pointed to a PDF he made in MS Word. That means the parents and grandparents have to view a bright screen during our performances, and pinch and zoom and fumble with their phones just to read their kids names. It sucks.
It looks like this:
When you scan the QR code you get this page, and then you have to open a PDF
And when you actually open the PDF it doesn't even fit on a single screen - you have to pinch and zoom, pan around to read the text. The grandparents in the room despise this.
I need you to design a full system: something that's better for the patrons to view, and some way that me and my band director friends can create new programs.
Here's an example of a recent program we've used.
Deliverables
We'll go step-by-step through specific design deliverables that get us closer to an interactive system to solve our client's problem. We'll discuss each deliverable before we start, but this will include:
- Wireframe Prototypes
- Using an off-the-shelf design system
- Guerrilla User Testing
- Customizing that off-the-shelf system
- Prototypes
- Guerrilla User Testing
Some other requirements:
- We'll make one interface for the patrons designed for mobile screens.
- We'll make another interface for the directors designed for desktop.
- We're going to use DaisyUI, a nice customization of the supercommon Tailwind css framework. Here's a decent free figma community file you can start from. (There's also an official paid version)
Session 1: Introduction & research
- Project Brief: Help this client!
- Today we'll kick off this project. Intro to Tailwind and DaisyUI.
- Homework: Start wireframing out the user experiences. You can use gray boxes OR if you feel comfortable, jump right into plain DaisyUI components. Don't customize them yet.
- The patron experience is a single view: they scan the QR code to launch the program. They don't change or update program, they just view it.
- The program should include at least: a Program Title, a Date, a Description.
- The list of pieces performed should include Sections with a Title, Subtitle, and position. Each section can include one or more Pieces.
- Each Piece should include a Title, Detail, and position. Maybe special notes like, 'Violin solo performed by Hingle McCringleberry'?
- We should also include a listing of the band members. This should probably be organized by section (like percussion, flutes, etc).
- These should be any length and accomodate any number of entries!
- This is designed for band performances. But could it also work for... orchestra? choir? a play? a recital?
- The Band Director should have a web interface where he can sign up / sign in / and create programs.
- That means they need an interface to CRUD all of the above elements!
Some thoughts about what our interfaces need to support:
Session 2: Keeping going, using DaisyUI components
- Let's look at wireframes, layouts.
- Do these fulfil the requirements? What's missing?
- DaisyUI options and configuration
- Homework: Prototype this out enough that we can be ready for some guerilla testing next week.
Session 3: Review & Test.
- Review prototypes.
- Talk about User Testing options
- Homework: Guerrilla user testing. Test with 5 people. Document it. Write observations on what could/should change based on user testing.
Session 4: Going beyond the library.
- Review testing.
- You made easy customizations of DaisyUI - but we can do more than just assemble the UI components like Lego, right? How have you been limited and where can you go from here?
- Homework: Style, brand, fix UX problems, whatever you want. Be ready for a final crit next class.
Session 5: Final Deliverables.
- Let's see what you made! Critique & lessons learned.