Case Study: Art 441, Portland State University
Project Overview
In the fall of 2018, I was asked to teach ART441, a 400-level course covering the principles of User Interface design and User Experience to Graphic Design students at Portland State University.
Over the course of ten weeks, students completed two projects: the first, an individual project, was improving the cart and checkout flow of an existing e-commerce website, based in part on usability guidelines suggested by Baymard Institute.
The second project, covered here in this case study, was completed in groups of two to three. Students proposed an idea for a mobile app, then took that idea through appropriate research, strategy, design, prototyping, and testing phases.
Elevator Pitch
Students came up with a pitch for a mobile app that could be explained in thirty seconds or less. The pitch used the following structure:
My app will help (who?) achieve (what?) (how?)
If the pitch does not clearly identify a segment of users, a need those users have, and a way the app could help users accomplish a goal, then the app is likely unnecessary.
User Interviews
Students may have brought some firsthand knowledge of their chosen app topics, but they still needed to conduct user interviews to challenge their assumptions – a topic covered in detail by Eric Karjaluoto’s The Design Method.
Assignment detailed and reflected upon interviews with between three and five users from the app’s target audience.
Competitive Analysis Matrix
Students analyzed a minimum of five direct and three indirect competitors, and presented their findings in a matrix as illustrated in chapter 4 of UX Strategy by Jaime Levy.
UX Strategy Document
Students read and discussed The Field Guide to UX Strategy by Robert Hoekman, Jr. over a period of two weeks. As suggested by Hoekman, their strategy document began as a handwritten draft, before becoming a typewritten document of no more than two pages.
Included in the strategy document:
- Vision statement. Project scope and purpose should be outlined here.
- Circumstances of Use. Who? What? When? Where? Why?
- Design Criteria. Notes on branding, messaging, and design principles to guide the app creation process.
- Success Metrics. If this app were to launch, how would you measure its success?
User Personas
Students found The UX Designer’s 5-Minute Guide to Lean Personas by Jerry Cao relevant on this assignment, as they had access only to qualitative and not quantitative data on their projects.
The personas presented archetypical users of the app, and included at least the following:
- Name and photo
- Demographics
- Goals and needs
- Behaviors
- Frustrations
User Journeys
Students created a minimum of nine journeys, three for each persona created. The idea was to come up with specific tasks for these archetypical users to accomplish, and list in detail the four to twelve steps needed to complete the task.
Students were encouraged to consider the context facing the user, the technology used to access the app, and the emotional state of the user (a measure, based on the writings of Steve Krug, of the user’s “Reservoir of Goodwill”.)
Content Inventory
Students created an inventory matrix as a quantitative assessment of the content their app was to contain.
Before making a qualitative assessment–is this content of use?–or beginning the task of organizing into categories, it helps to know exactly how much content you’re starting with.
Mood Board
Students created a project-specific Pinterest mood board to influence the app’s aesthetic.
Pins could be of
- Content related to the app’s topic.
- Imagery photographed or presented in an inspiring way.
- UI Design Patterns the students wished to emulate.
- Relevant examples of color, type, and layout.
Paper Prototypes
Students learned to identify the Minimum Viable Product, or MVP, that would enable testing. At this early stage tests were conducted with pencils, pens, post-its, scissors, tape, glue–any tools that would allow a meaningful test.
Dan Nessler’s article on A guide to paper prototyping & testing for web interfaces proved helpful here, as students needed to not only create the prototypes but test them effectively. Tests were run during a class session, and students were required to turn in a detailed summary of their learnings from these tests.
Wireframe Prototypes
After the paper prototype phase, students had the option of repeating the paper tests (if more discovery was necessary before moving on to the digital realm), or creating medium-fidelity wireframe prototypes in Figma.
The completed wireframes were greyscale, using a plain sans-serif font, and focused primarily on
- Grid
- Visual hierarchy (including type scale)
- Navigation
- Interaction
Tests on these Figma prototypes could then be run on student’s phones.
Brand Guidelines
As the project neared completion, students created a brand guidelines, outlining key features of the app’s brand:
- Typography
- Color
- Imagery
- Voice
- Animation style
For the latter two topics, two helpful readings were Brand voice and UX: a starter guide by Laura Busche, and 6 Animation Guidelines for UX Design by José Torre.
Mockup Prototypes
This was the most fully realized version of the app: a presentation in Figma of a prototype complete with color, typography, and imagery.
Students made a formal presentation of these mockup prototypes in class, and were given a week to make improvements based on feedback received during class critique.