UX/UI Design | Class Project
Mobile App Design
When I taught ART 326 Interactive Design, students followed a human-centered approach to design a mobile app based on the findings from user research.
User Research
RESEARCH OUTPUTS
ACTIONABLE FINDINGS
ACTIONABLE FINDINGS
User research is framed as a way to discover an opportunity for design. Students conduct an in-depth, semi-structured interview with their user, plus one other user research method of their choice. They plan the methods in advance. Interview questions are critiqued in class. Then, they conduct research and produce outputs. This research helps students develop empathy with their users early in the process.
ACTIONABLE FINDINGS
ACTIONABLE FINDINGS
ACTIONABLE FINDINGS
After research, students develop a user-based app concept. A definition statement helps to translate research results into actionable findings and acts like a 'solution-generating springboard'. Students write a user profile, brainstorm a range of possible features, consider which features would be most appealing to their user, research similar apps, and craft a mission statement to ensure the app has a clear purpose.
Concept Development
PAPER PROTOTYPE
PAPER PROTOTYPE
PAPER PROTOTYPE
Students develop a low-fidelity paper prototype with wireframes for 10+ screens. This planning tool is intended to help students determine a navigation model, think through user flow, and construct the information architecture. Students conduct two rounds of usability testing—first, with classmates, and then with their user.
BRANDING
PAPER PROTOTYPE
PAPER PROTOTYPE
Branding involves naming the app and designing an app icon. Students generate a list of possible names for their app and research them to check availability. After the name is finalized, they sketch a range of ideas for the app icon. We discuss the visual-verbal synergy between the name and icon.
Interface Design
UI STYLE GUIDE
HIGH-FIDELITY PROTOTYPE
HIGH-FIDELITY PROTOTYPE
Students create a style guide to define the UI design style. It includes the app icon, color swatches, typography, sample icons and imagery. Once a design direction has been established, they set up their design file and start with the most complicated screen to test their wireframe pattern and styles.
HIGH-FIDELITY PROTOTYPE
HIGH-FIDELITY PROTOTYPE
HIGH-FIDELITY PROTOTYPE
The remaining screens for the mobile app are designed and a high-fidelity prototype is built in InVision. Once the prototype is interactive and can be viewed on a mobile device, students do another round of testing in class, to gather feedback on usability, flow, design, and consistency.