MIVA - concept map

When MIVA set out to rebuild its product line, it was critical that the most basic assumptions were in alignment by everyone on the product team. This concept map visually explains some very complex ideas (i.e., multiple sub-accounts to a single account, used by multiple users with multiple currencies, displaying multiple languages, etc.), and their relationship to each other in a way everyone could grasp.

Contribution: Strategy, Visual Design

• AI

Miva - personas

It is said that, “If you don’t understand your users (or potential users), your product is doomed to fail.” This philosophy motivated the User Experience Team to conduct extensive interviews, user surveys, and focus group testing to develop a range of user profiles that evolved into our primary, secondary, and tertiary personas (i.e., fictional individuals who represent a product’s typical users).

These personas encouraged all team members to think about the needs, desires, and motivations of “Mary” or “Ben”, instead of working toward his or her own vision of who the end user was, thus keeping the product design relevant.

Contribution: User research, Visual Design

• AC
• ID
• PS

Miva - Competitive Analysis

The User Experience Team worked closely with Product Management to analyze and identify tangible differences (both competitive and criteria) within the product marketplace. Through extensive site analysis and “content mining,” this deliverable provided a baseline for the design team to determine what a customer was used to and create best practices for everything from interface design to features offered.

Contribution: Competitive Research, SWOT Analysis, Heuristic Analysis, Visual Design

• AI
• AC
• ID

Miva - feature comparison

As part of the usability competitive analysis, simple “Yes/No” comparison grids were used to identify content features across the competitive landscape. The benefits of these comparison grids were two-fold: first, they allowed the team to see how our current products stacked up to the competition by highlighting both strengths and weaknesses. Second, when re-addressed over time, they showed us how the market was shifting so that we could make strategic adjustments.

Contribution: Competitive Research, SWOT Analysis, Heuristic Analysis, Visual Design

• AC
• ID

Miva - wireframe

This is an example of a wireframe with functional annotations, developed to communicate the interaction of dynamic content to the technical team.

Contribution: Information Architecture, Visual Design

• AI

Miva - wireframe with annotations

This is an example of a wireframe with content annotations, developed to refer specific content areas on the screen to messaging, objectives, rationales, and requirements that describe the entire screen.

Contribution: Information Architecture, Visual Design

• AI
• AC
• ID

Miva - design style guide

To ensure that the visual design of pages and components remained consistent—regardless of development resource—a visual style guide was created. This comprehensive style guide documented visual design specifications, such as: type and color usage, photo usage, icon tables, component design specs, page design specs, grid and gutter spacing, and grids and names.

Contribution: Information Architecture, Visual Design

• AI
• AC
• ID

Miva - navigational flow map

Large scale flow maps were developed to show the navigational flow of each user platform. In addition to the screen flow relationships within the hierarchy, these high level flow maps also visually indicated which screens were static, dynamic, active, future, customer-facing and shared. Interactions triggering unique HUDS, such as E-mail, download, and print were also represented.

Contribution: Information Architecture, Visual Design

• AI
• AC

Pinch - wireframe

High fidelity wireframes were created for a series of interaction diagrams, dipicting possible usage scenarios for Pinch, a browser-based shopping comparison tool.

Contribution: Information Architecture, Visual Design

• AI
• AC
• PS