As an adjunct instructor at the Fashion Institute of Design & Merchandising (FIDM) in San Francisco, I taught web courses to students majoring in graphic design. In the first web design class, students learned about designing for the screen, basic HTML and CSS coding and user experience practices, including user personas and scenarios, information architecture, wireframes, prototypes and user testing.
Content brainstorming and site architecture exercise by web design students at FIDM.
The final project for the first web design class was to rethink a magazine design, which they created previously for a print design class, as an informational website. They learned how to apply user-centered practices to the design and execution process.
The process and deliverables each student worked on included: competitive research, project brief, persona and user scenario, information architecture (site map, navigation, and content strategy), wireframes, paper prototypes, user testing, revisions to wireframes based on test results, visual design comps and revisions and finally, HTML and CSS coding.
Shown below is the work of student Tiffany Matthews. Having given her test subjects specific tasks, she found they were able to complete them easily but had expected to see additional content throughout the site. Tiffany modified the site accordingly.
Wireframes, created by Tiffany Matthews, were used as paper prototypes in usability tests.
Tiffany modified her wireframes after synthesizing the test results.
Through usability testing, students realized that they: 1) need to think through site architecture and task flows more carefully and 2) are not designing for themselves.
Tiffany’s site is beautifully designed and demonstrates an understanding of user experience and web design practices and tools. It’s rewarding to see students bring their ideas to life by applying these processes. My goal is to continue to educate, share and employ the practices with junior designers, colleagues and clients.
Website comps designed by Tiffany Matthews