Evaluating Tools for Interaction Design

January 15, 2020

From paper to digital

UXTools.co has some very useful information about design tools - and they break these down into specific tasks, such as:

Just one of many intuitive rankings for useful design tool categories

Which tool is best for information architecture? I cannot say for sure. There are many, many, many tools for designers to choose from. Knowing which tool is best for a particular task can save time and money. Let’s look at three:

This vector drawing app is part of an entire suite of tools offered by Adobe

Adobe Illustrator 2020

Strengths:

Compatibility - part of an “ecosystem” it works seamlessly with other Adobe apps
Established standards - works with a variety of file types, and produces files that can be used with a variety of other apps
Maturity - with more than three decades of development, it is not likely to go away anytime soon
Updates - the software is frequently updated (with both new features and bug fixes)

Weaknesses:

Price - Adobe products have always been expensive, and every version of Illustrator since Adobe CS6 has been priced as a subscription, billed annually or monthly
Interactivity - does not support interactive features. Elements are static
Collaboration - does not support simultaneous editing

I do not have personal experience with this app (yet) but here’s what stackshare.io has to say:

Figma

Strengths:

Collaboration - while both Figma and Illustrator offer vector-based graphic design tools, only Figma is capable of collaboration in real-time. Multiple users can tweak and edit the same file simultaneously.
Endless design file versioning - file versioning is considered a “best practice” when working on a project. With Illustrator, this is done manually (users must be “good citizens” and use the “save as” option, adding _Vxx to the end of their file names. Figma does this automatically, and embeds the changes into metadata
Platform agnostic - Figma runs in browser. You can switch between machines to continue working on a variety of platforms. Illustrator works with a variety of platforms (Windows, MacOS, and iOS), but each system requires a separate installation
Responsive UI - simple changes to graphics elements update in real-time

Why I choose @figmadesign over Sketch. pic.twitter.com/sZRO97tlNO
— H (@HousseynouFall) December 19, 2017

Prototyping - Illustrator can produce graphics, but it cannot produce interactive prototypes.
Handoff - prototypes can easily be handed off to web developers to be converted into fully-functional assets.
Price - it is free for students

Weakness:

Standardization - Illustrator is generally regarded as an industry standard, and it supports “legacy” project files. Figma is much more modern, but not as backward compatible.
No access to API - Illustrator users can program functions directly. This is especially useful when a project requires several repetitive tasks
Popularity - “According to the StackShare community, Adobe Illustrator has a broader approval, being mentioned in 80 company stacks & 57developers stacks; compared to Figma, which is listed in 60 company stacks and 54 developer stacks.” - stackshare.io

Adobe’s offering for designers who need to prototype for interaction

Adobe Xd 2020

Strengths:

Compatibility - part of an “ecosystem” it works seamlessly with other Adobe apps.
Prototyping - intuitive interface allows designers to rapidly “wire” their screens through a variety of triggers.
Large library - offers a wide variety of animations, transitions, and triggers.
Platform specific templates - includes built-in templates for quickly establishing a project format. Users can work from a variety of pre-baked device settings (iPhones, Android, Web, Desktop).
Updates - the software is frequently updated (with both new features and bug fixes).
Web-based sharing - prototypes can be shared and launched in browser. Works with Adobe Cloud

Weaknesses:

Price - Adobe products have always been expensive, priced as a subscription, billed annually or monthly
Limited multimedia abilities - while the graphics components are fairly robust, the sound features are extremely limited
Collaboration - does not support simultaneous editing

Which tool is right for evaluating information architecture?

I do not know. I have decided that I will work with Figma, because I believe that their list of features are compelling and complete enough for my first IxD prototype project this semester. Additionally, Figma has gained significant industry presence. Knowing how to use this software could be beneficial to a variety of future careers.

Prototyping for IxD - Case Study

January 14, 2020

Information Architecture: Frankie Bunz

Pittsburgh, PA

One other component worth considering in the context of the customer journey and user experience (see my previous post), is the Information Architecture of the food menu. Let’s take another look at the menu:

There are a total of three menus at Frankie Bunz: one in the window, one on the ordering counter, and a handwritten banner inside the restaurant.

The Food

There are eight standardized options:

The Frankie Bunz

The Don

The Hyman Roth

The Fredo’s Frank

The Sonny Special

The Henry Hill

The Mr. Miyagi Doggie

The Grateful Dog

The Chairman of the Dog

Customers choosing a standard dog still have the option to add additional toppings (more about this later), and must choose from one of four bun types*:

White

Wheat

Pretzel

Onion

*The only exception is the “Mr. Miyagi Doggie” which is an Asian Fusion spin on the classic corndog - featuring a tempura batter and side of slaw with special “dragon sauce.”

There is also an option to “B.Y.O.D” (Build Your Own Dog) with six dog options:

Smith’s Natural Skin Casing Hot Dog

Jubilee Farms All Beef Hot Dog

Hebrew National

Spicy Beef Dog

Turkey Dog

Veggie Dog

Toppings

There are two categories of toppings*:

“Frankie’s Fresh”

Premium

*The premium incurs a $1 charge per selection.

There are eleven “Frankie’s Fresh” toppings:

Ketchup

Mustard (Yellow, Dark, and Honey)

Siracha Mayo

Fresh Sauerkraut

Pickles

Onions (sweet vidalia)

Hot Peppers

Relish (sweet and dill)

And there are seven Premium toppings:

Chili Sauce

Bacon (candied)

Avocado

American cheese

Shredded, aged cheddar

Swiss

Pepper Jack

Sandwiches

If hot dogs are not your thing, they also offer large sides as well as grilled cheese sandwiches.

Grilled cheese sandwiches offer three options for bread:

White

Wheat

Sourdough

and four options for cheese*:

American

Swiss

Aged Cheddar

Pepper Jack

*Customers may select any combination, up to and including all four on the same sandwich

Customers may add any of the fourteen (fresh and premium) toppings offered for hotdogs to their grilled cheese (see above).*

*Customers can also add any choice of the six dogs (see above) for $2

There are also five standardized grilled cheese (with choice of bread), offered as a “daily special” Monday through Friday.

Sides

The only side offered are their fries.

There are four options to select from:

Regular

With melted cheese

“Da Woiks” (i.e., chili cheese fries with bacon)

"Poutini” (i.e., cheese curds, house gravy, and scallions)

Drinks

There are six fountain drinks (one cup size) and sixteen bottled drinks available. I won’t list them here; they offer Pepsi products, and you can see the options for yourself:

Information Architecture

As you can see, there are many, many choices for customers to make. However, the choices have a logical flow and can be reduced to discrete categories with a linear progression.

A minimum of five choices must be made to complete an order.

Design For Service - Case Study

January 14, 2020

Case Study: Frankie Bunz, Pittsburgh, PA

I moved to Pittsburgh in August, 2019. Since moving here, I have eaten at only a handful of restaurants; Frankie Bunz (i.e., mobster-themed hot dogs) is easily one of my favorite local places to grab a bite. It is in Squirrel Hill, on Murray Avenue.

I have a weakness for anthropomorphic food.

While this restaurant does offer some dine-in seating, it is primarily designed for grabbing food to go. In evaluating their services, I opted to dine in.

Customer Journey: Phase 1 - discovery

Customers are most likely to be attracted to this restaurant if they are on foot. The sidewalk immediately outside of Frankie Bunz advertises daily specials. There is a full menu in the window, as well as flyers promoting their most recently added items.

Their vegetarian chili (not pictured) is also quite good. Last week they were advertising egg rolls.

Customer Journey: Phase 2 - Entry

When you walk into Frankie Bunz, it immediately becomes clear that they do not have a large seating capacity, but they still provide an inviting atmosphere. Additionally, they provide a large banner-type version of their menu.

The interior is somewhat “cozy” and prioritizes a space for ordering and waiting over dine-in seating.

Customer Journey: Phase 3 - Ordering

I arrived for a late lunch (this first week of the semester has started out with many plates for me to spin, including this evaluation), and the only other customers were take-out or app-based delivery workers (e.g., Grubhub). The ordering and checkout process is reasonably frictionless. They use a touchscreen POS machine with contactless (Apple, Google, Samsung, etc.) and chip-reading capabilities.

Customers can either choose one of the standardized hotdogs, or build their own. The staff takes the order, unless the customer is ordering via a delivery app. Customers ordering a standardized hotdog (e.g., “Fredo’s Frank” or “The Don”) are still asked what kind of bun they’d like. Options include: wheat, white, pretzel, and onion roll. In addition to their buns, they also offer a tempura battered, fried dog on a stick (i.e., a “corndog” minus the cornmeal); they call it the “Mr Miyagi Doggie” and it includes an Asian Fusion slaw and special “dragon sauce.”

Customer Journey: Phase 4 - Payment

Despite the cluttered appearance of the equipment, the system works fairly well. On the left, there is a mobile phone that receives app-based orders, while the customer-facing touchscreen provides simple instructions to complete the transaction. The… — Despite the cluttered appearance of the equipment, the system works fairly well. On the left, there is a mobile phone that receives app-based orders, while the customer-facing touchscreen provides simple instructions to complete the transaction. The order information, prices, total, tip amount, and tax are easily presented without complexity.

The only substantial flaw with this setup is the counterintuitive chip-reader.

The icon on the lower right corner of the bezel doesn’t clarify the card orientation, so the owners added a post-it note, which adds to the confusion. Also: you cannot have my credit card number. 😘

The arrow is pointing away from the slot, but this doesn’t necessarily clarify card orientation. The affordances of the device allow for both correct and incorrect insertion. In total, this card-reading device allows no less than eight card orientations and interactions (four in the card slot, and four in the slider), and only one of these actions is correct. To be generous, there is at least an 87.5% chance for error, even with written instructions. This is terrible design.

Despite this minor annoyance, the process is still supported by staff, and any errors can be quickly observed and corrected.

Customer Journey: Phase 5 - Fulfillment

Once the order is placed and the payment confirmed, customers have a brief waiting period while their meal is prepared. The open floor plan is reassuring, and promotes trustworthiness with customers: you can see your meal being prepared, and know that their kitchen is clean and safe.