Teaching the UX Design Process
Website project by student Tiffany Matthews
Introduction: As an adjunct instructor at the Fashion Institute of Design & Merchandising (FIDM) in San Francisco, I teach web courses to students majoring in graphic design. In Web Design I, students learn the basics of designing for the screen, user-centered practices, and basic HTML and CSS.
Problem and Goals: The final project is to rethink a magazine design, which they created for a print design class, as an informational website. Their goals are to work through all stages of the design process, applying the user-centered practices they’ve learned to date.
Process: The process and deliverables each student worked on included: industry research, creative brief, persona and user scenario, content strategy and site architecture (via card sorting), site map, wireframes as paper prototypes, user testing, revisions to wireframes based on test analysis, design comps and revisions, then finally, coding the site in HTML and CSS.
Displayed here is the work of student Tiffany Matthews. Giving her test subjects a specific task, she found they were able to complete it easily, but they had expected to find additional information. Having received similar feedback from both test subjects, she modified the architecture of the site accordingly. All students learned from their user tests, which helped them realize: 1) they need to think through site navigation and interactions more carefully, 2) they are not designing for themselves.
Results: Tiffany’s site is beautifully designed and demonstrates an understanding of user-centered practices and tools. It's rewarding to see this process embraced by my students. My goal is to educate, share and employ the process with more students, colleagues, and clients.
Website comps designed by Tiffany Matthews, student at FIDM.
Wireframes, round 2, modified based on analysis of user testing results, by Tiffany Matthews.
Wireframes, round 1, by Tiffany Matthews.
Persona, user scenario, and user testing analysis by Tiffany Matthews.
Content brainstorming and site architecture exercise by web design students at FIDM.
Group 1: e-commerce site for shoes. Group 2: e-commerce site for art supplies.
