MS HCI capstone
Turning a tactile design deck into a mobile prototype.
For my graduate HCI work, I redesigned the IDEO Method Cards mobile experience and built a working prototype with Ionic and Cordova so it could be tested on Android and adapted for iPhone.
Overview
A refresh with two jobs: preserve the deck, extend the tool.
The original IDEO Method Cards were a 51-card paper deck for helping design teams choose research and ideation methods. The mobile app preserved the deck, but research showed that some of the paper deck's best qualities - grouping, sharing, comparing, and using cards in a workshop setting - were harder to carry into a small-screen interface.
My goal was to modernize the interaction model without rewriting the purpose of the cards. The project moved from product analysis to user research, wireframes, a working mobile prototype, and a final usability evaluation.
Research
The paper deck was not just content. It was a social object.
Early interviews and survey responses pointed to a useful tension: the cards were valuable as inspiration, but some users treated them as a novelty unless they could be worked into a real group process.
One recurring theme was that the physical deck made collaboration easier. People could lay cards out, pass them around, tack them to a wall, compare two side by side, or make ad hoc groups. The mobile redesign had to recover some of that expansiveness.
Card views needed multiple levels.
Users needed a quick visual scan, a text list, and a paper-like view for browsing categories such as Learn, Look, Ask, and Try.
Groups made the deck more useful.
The mobile app needed a way to save sets of methods for a project, then add notes or voice annotations to those saved groups.
Iconography could not carry meaning alone.
Testing later showed that generalized icons were often too abstract for complex methods, especially when the method name was unfamiliar.
Prototype
A working Ionic prototype, plus paper scenarios where fidelity mattered less than speed.
I used Ionic for mobile UI components, gestures, navigation, and a near-native feel, with PhoneGap/Cordova for device builds. The prototype supported the main flows needed for evaluation while paper prototypes helped test heavier interactions like group persistence.
Test setup
Remote evaluation environment
Remote participants used a browser prototype, a Typeform survey, and Vocaroo for think-aloud audio capture.
Views
Macro and micro card browsing
The prototype explored category rows, list view, paper-like card browsing, and single-card detail views.
Stack
Ionic Framework
Deployment
PhoneGap / Cordova
Target
Android + iPhone builds
Scope
Functional flows for usability testing
Working artifact
Live prototype in the page
The original prototype is still available as a browser-hosted Ionic app. Embedding it here keeps the case study grounded in the thing users actually tested, while the surrounding page explains the design and evaluation work.
Evaluation
Testing exposed where the concept worked and where the interface was too clever.
The final evaluation included four in-person sessions and two remote sessions. Participants worked through card browsing, list view, single-card reading, group creation, delete flows, settings, and theme switching while thinking aloud.
The core concept held up, but several interaction details needed revision: mixed horizontal and vertical scrolling, ambiguous icons, unclear group actions, and settings hidden behind a three-dot menu.
Cards
The strongest issues were discoverability, card-view comprehension, icon meaning, and the mixed scroll pattern in the default card view.
Groups
Users understood the value of saved groups, but add/delete controls needed stronger visual treatment and more consistent metaphors.
Settings
Participants could use themes once they found settings, but the three-dot affordance was not clear enough for everyone.
What it shows
Design judgment under real implementation constraints.
This project matters because it combines research judgment with hands-on prototyping. I was not only drawing screens; I was deciding what fidelity was worth building, what needed paper testing, and how the implementation stack would affect interaction, typography, and cross-device behavior.
Note: This was an academic HCI project using proprietary IDEO Method Cards material for private study. It was not an IDEO-sponsored product.
Back to work