Hi, I’m Vitorio, a designer in Austin, TX.

I specialize in user experience (UX) and interaction design for web sites, web applications, mobile, and emerging technologies. This is a small selection of my published design work, and updates are ongoing.

I also run the Austin UX design community calendar, mentor student startups in design through UT’s 1 Semester Startup program, host the regular IxDA Austin UX meetups at Flightpath on the first Wednesday of the month, hosted UX office hours during Austin Startup Week 2012, and ran fifteen design workshops in 2010.

Mobile app concepting and prototyping

How does a user experience and interaction designer design for and prototype in other fields? A developer friend and I cloned Johann Sebastian Joust, an indie video game darling, over a weekend, to explore the design process of making a digital playground game.

Server status apps are the weather apps of video games. These sketches and storyboards present a modern, useful design for a server status app, taking cues from the standard iOS “Weather” app as well as the Windows Phone 7 design language. Details forthcoming.

This paper prototype demonstrates the skeuomorphism of a novelty camera app which replicates the constraints of traditional film. Details forthcoming.

Design pattern invention

Narrative search using phrasal templates (YouTube video, best watched full screen) is a new design pattern for a “mad libs”-style advanced search. I designed the pattern in June 2010 to effectively support the discovery of player-created groups (“guilds”) by players. Over nine months, over 300,000 players formed, discovered and joined nearly 80,000 player-created groups, according to community estimates. The video documents the pattern; I also produced detailed functional specifications (PDF excerpt, deliverable format circa June 2010).

Use is with permission of Electronic Arts.

Large-scale user-generated content systems

“Guilds” are player-run groups within a video game, sometimes working together for advancement, other times formed for socialization. In Star Wars™: The Old Republic™, guilds could be formed on the web some nine months before the game launched, allowing players to build communities that would be there for them on day one.

After receiving business requirements, I designed the entire “Guilds” system: conducted user research, designed the IA and URLs, designed wireframes for each sub-system (lander, FAQ, application form, creation form, administration, roster management, public and private forums, content moderation, advanced search, search results) for each state of a potential guild member (anonymous user, non-guild player, guild applicant, guild member, guild officer, guild leader). This was Phase I.

In preparation for launch, guilds could choose up to three ally or adversary guilds to join them in the game, as well as invite their friends directly into the guild. In an expansion of my responsibilities, I gathered the business and feature requirements (PDF circa June 2011), designed the wireframes and wrote the functional specifications (PDF, deliverable format circa July 2011), and managed the production of the feature from art to content and through internal and external approvals to a successful launch and player adoption. This was Phase II.

Phase III was to prepare guilds for “import” into the game. The internal scheduling details for this phase were easily confused, and in addition to continuing with my previous responsibilities, I presented this executive summary (PDF slides circa October 2011) to both internal and external stakeholders to ensure buy-in and consistent messaging. By this time, over 300,000 players had formed, discovered and joined nearly 80,000 player-created groups, according to community estimates.

Use is with permission of Electronic Arts.

E-commerce reservation flows

Star Wars™: The Old Republic™ was the fastest pre-ordered game in Electronic Arts’ history, with my flows supporting over 200,000 pre-orders in its first several days of availability. To support that pre-order velocity, an asynchronous reservation was built: your pre-order would be put in queue, and you would only be sure you were successful once your pre-order had been processed an indeterminate amount of time later. This is a little like waiting for a physical product to ship, but for a completely electronic pre-order it would violate users’ expectations, so appropriate messaging was crucial. I designed these user flow diagrams to illustrate the possible scenarios for a user pre-ordering the game (PDF circa April 2011), including failure cases and later registering their pre-order on SWTOR.COM.

While the technical implementation and checkout flow was out of my hands, I was completely responsible for the SWTOR.COM side and was able to provide recommendations to the e-commerce team on language, information priority and layout (PDF circa May 2011). I find it instructive to compare the recommended text and layout, particularly in the confirmation pages and receipts, with the final implementation as shown by my actual checkout captures from launch day (PDF circa July 2011).

Use is with permission of Electronic Arts.

First time/new user/onboarding flows

Learning from the security problems that plagued other online games, Star Wars™: The Old Republic™ had a strict security policy. To play, users must purchase the game, register an account, provide full contact information, provide three to five security questions and answers, register their purchased game, subscribe, and optionally register a two-factor authentication token (either a mobile app or a physical key fob). These are a lot of steps, even for a motivated user. I designed a visual checklist to guide the user through each step: completing a requirement “lights up” that line item, until finally the list announces you are ready to play.

This flow diagram and wireframe set (PDF circa November 2011) illustrate the user paths and the various states of the “ready-to-play” system, and this executive-level presentation (PDF slides circa October 2011) walked both internal and external stakeholders through the onboarding process, end-to-end. The “ready-to-play” system provided the user with the complete context for their play requirements, and served to finally integrate all of the flows I had previously designed and launched. Over 1.7 million players became paying subscribers through these onboarding flows I designed, with no measurable customer service impact.

Use is with permission of Electronic Arts.

Novel deliverables

In November 2011, Electronic Arts was notified of a security vulnerability in the SWTOR registration process. Working with the security and technical teams, I designed an updated registration and validation flow (PDF circa November 2011) which would minimally impact the user registration process. These diagrams were circulated both to implementation teams and to executives. The security vulnerability was published several days after the process fix went into production, and user registration continues to work this way.

These technical diagrams illustrate a high-performance commenting system (PDF circa December 2011), proposing a caching architecture similar to the one found in 37signals’ Basecamp Next reimplementation and Vox Media’s new “Syllabus” liveblog software.

In these interactive, low-fidelity prototypes, “sketchy” wireframes are used to effectively illustrate interactive motion design (prototype circa January 2010) and test UI responsiveness (hover over the buttons at the bottom; prototype circa December 2009).

Essays on design

From February 2011, “A Better Company of Designers:” I have been thinking about my goals and priorities as a designer and I have decided three things are important to me.

From February 2012, “Local Communities In Practice and By Design:” We design things all the time, but we neglect to design our own communities of professional practice. Vitorio Miliano researches how and why communities break down, and proposes an annual survey to move things forward.

Also from February 2012, “Designing Better Meetups:” a video of a talk related to the previous essay. Maybe “better” means more organized, or having more attendees, or doing what your attendees want. Whatever your goals, Vitorio Miliano has practical, actionable suggestions on how to improve the quality of your user group, meetup or local community. He’ll share common problems user groups face, ways to discover what your meetup is made of, and how to use that information to make it better.