Anwar Montasir

Web Development + UX Design + Instruction

Case Study:
UX Class, Portland State University.

Plantz, a project by Sloane Ackerman, Adrian Galler, and Jackie Verdin

Plantz, a project by Sloane Ackerman, Adrian Galler, and Jackie Verdin

view project (PDF)

Recipe Box, a project by Catie Cooper and Allison Nordin

Recipe Box, a project by Catie Cooper and Allison Nordin

view project (PDF)

Open Closet, a project by Euri Kashiwagi, Duy Nguyen, and Jennifer Woodcock

Open Closet, a project by Euri Kashiwagi, Duy Nguyen, and Jennifer Woodcock

view project (PDF)

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 tje 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.