“Biographies” is the first completely new section of the Star Wars: The Old Republic site to go live for which I managed the design process. I collected and reviewed requirements, designed wireframes, discussed and produced revisions and handed off functional specifications for visual treatment, interaction and animation prototyping, and implementation.
I designed the wireframes the week of January 11, 2010. I delivered functional specs on January 24. The section went live March 26.
The right-aligned title is part of the existing Holonet design. The page layout is a 12-column grid, with the gridded portion intended to consume a browser viewport at 1024×768. (Existing Holonet pages are not on a grid; this is new for the section.)
The “Holonet” section of the site is written in character, with “Biographies” being a sort of Who’s Who. Biographees are organized by allegiance as this drives the player’s interaction with these characters (the real book is organized alphabetically).
In the wireframe, each character is presented as a “cardboard cut-out,” with a hover revealing their name, replacing the “select to view identification” placeholder text. Each allegiance’s “platform” could hold a few of the most recent characters each, depending on size.
In the functional specs, implementation concerns (overlapping, irregular hit areas with hover effects in HTML) meant the actual implementation was left undefined, to be decided by the graphic artist and front-end developer. I suggested “bookmarks” as an alternative: narrow, rectangular profiles to provide a consistent shape for design and development, and this was the style eventually produced.
In the comprehensive layouts and interactive prototype, the character name was moved into the bookmark image as part of the hover effect, and a description was added to the bottom of the section.
Expanded landing page
In the wireframes, up to six stand-ups might fit on a single platform, but plans are to have many more than that, so each platform must expand out to display the full line-up in chronological order.
In the functional specs, the trigger for the expansion (hovering versus clicking, and what in particular to hover over or click on) and the transition effects for each were left undefined, to be determined during prototyping.
In the comprehensive layouts and interactive prototype, stakeholder feedback led to the decisions to make each bookmark take you directly to that character’s page, to add a clickable arrow to trigger the fly-out and return, and to add buttons to quickly navigate between the expanded views of each allegiance.
In the Holonet, all player-centric content (classes, planets) has the primary illustration on the left. As these characters are all secondary (to the player) in the context of the game, I placed the character portrait on the right to differentiate them.
In the functional specs, the content layout was defined as supporting arbitrary HTML using a grid layout system, such as 960.gs. Concerns around production overhead led to the production of a selection of stock layouts based on the assets provided to the content management system.
In the comprehensive layouts and interactive prototypes, stakeholder feedback led to additional wireframes and development for “previous” and “next” buttons on the content pages, which will display after additional characters have been revealed.
- Collected requirements from the community team (they produce the content for the web site).
- Designed the wireframes in Balsamiq Mockups (personal preference).
- Presented the wireframes in a review meeting with stakeholders.
- Updated the wireframes based on feedback and assembled a functional specification (annotated wireframes) in Word (company preference).
- Provided feedback to the graphic artist as the comprehensive layouts were designed, and to the front-end developer as they were turned into an interactive prototype for proofing transitions and animations.