Anwar Montasir profile image. Photo of Anwar Montasir by Drew Wiedemann

Anwar Montasir

Instructional Designer &
Educator &
Content Writer &
Designer &
Developer &
Accessibility Advocate

Case Study: Art 441, Portland State University

Plantz app mobile mockup
Plantz mobile mockup by Sloane Ackerman, Adrian Galler, and Jackie Verdin

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?)

Plantz app elevator pitch
Plantz elevator pitch by Sloane Ackerman, Adrian Galler, and Jackie Verdin

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.

Recipe Box app user interviews
Recipe Box user interviews by Catie Cooper and Alvinius Kasari (detail)

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.

Plantz app competitive analysis
Plantz competitive analysis by Sloane Ackerman, Adrian Galler, and Jackie Verdin (detail)

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.

Recipe Box app user strategy document
Recipe Box user strategy document by Catie Cooper and Alvinius Kasari (detail)

Included in the strategy document:

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.

Plantz app user persona
Plantz user persona by Sloane Ackerman, Adrian Galler, and Jackie Verdin (detail)

The personas presented archetypical users of the app, and included at least the following:

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.

Recipe Box app user journey
Recipe Box user journey by Catie Cooper and Alvinius Kasari (detail)

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.

Recipe Box app content inventory
Recipe Box content inventory by Catie Cooper and Alvinius Kasari (detail)

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.

Plantz app Pinterest mood board
Plantz mood board by Sloane Ackerman, Adrian Galler, and Jackie Verdin

Pins could be of

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.

Recipe Box app paper prototype
Recipe Box paper prototype by Catie Cooper and Alvinius Kasari (detail)

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.

Plantz app paper prototype reflection
Plantz paper prototype reflection by Sloane Ackerman, Adrian Galler, and Jackie Verdin (detail)

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.

Recipe Box app wireframe prototype
Recipe Box wireframe prototype by Catie Cooper and Alvinius Kasari (detail)

The completed wireframes were greyscale, using a plain sans-serif font, and focused primarily on

Tests on these Figma prototypes could then be run on student’s phones.

Recipe Box app wireframe prototype usability test reflection
Recipe Box wireframe prototype usability test reflection by Catie Cooper and Alvinius Kasari (detail)

Brand Guidelines

As the project neared completion, students created a brand guidelines, outlining key features of the app’s brand:

Plantz app brand guidelines
Plantz paper brand guidelines by Sloane Ackerman, Adrian Galler, and Jackie Verdin (detail)

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.

Recipe Box app mobile mockup
Recipe Box mobile mockup by Catie Cooper and Alvinius Kasari

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.