by Faith
15. June 2011 20:26
| User Experience Concepts |
 |
Used to crystallize the key messaging, positioning, essence, and user experience that will be associated with the proposed brand concepts. |
| |
 |
|
Answers the following questions:
- What is the key message for the proposed concept?
- What does the proposed concept make the target audience feel about the client’s brand?
- How should we visually represent the client’s brand?
|
 |
Provides the following benefits:
- Provides a visual representation of the client's brand essence and experience
- Ensures that the different brand concept proposals are differentiated
|
User Experience Brief (DOC)
User Experience Brief (PDF)
Coca Cola Use Cases (DOC)
Coca Cola Use Cases (PDF)
|
by Faith
10. June 2011 21:49
The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler.[1] Largely based on the Model-view-controller pattern (MVC), MVVM is targeted at modern UI development platforms (Windows Presentation Foundation, or WPF, and Silverlight) in which there is a user experience (i.e., user interface) (UXi) developer who has requirements different from those of a more "traditional" developer (e.g. oriented toward business logic and back end development). The View-Model of MVVM is "basically a value converter on steroids"[2] meaning that the View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily managed and consumed. In this respect, the View-Model is more Model than View, and handles most if not all of the View's display logic (though the demarcation between what functions are handled by which layer is a subject of ongoing discussion[3] and exploration).
MVVM was designed to make use of specific functions in WPF to better facilitate the separation of View layer development from the rest of the pattern by removing virtually all "code-behind" from the View layer.[4] Instead of requiring Interactive Designers to write View code, they can use the native WPF markup language XAML and create bindings to the ViewModel, which is written and maintained by application developers. This separation of roles allows Interactive Designers to focus on UX needs rather than programming or business logic, allowing for the layers of an application to be developed in multiple work streams.
by Faith
15. June 2010 20:34
| Variation Designs |
 |
Illustrate the look and feel of designs that vary from the basic homepage, secondary, and tertiary page designs. Also show(s) alternative views of print media ads. |
Answers the following questions:
- What will my site look like beyond the main pages?
- How many different page templates will we need?
- How will pages with functionality be different from other pages?
|
 |
Provides the following benefits:
- Ensures that the client approves variations to the standard template before development begins
- Allows client to see the look and feel vision extended to the complete site
- Ensures all visual elements are accounted for, even on functional pages, without having to produce a unique design for each one
|
 |
by Faith
15. June 2010 20:23
| Flash Animation |
| Used to animate messaging, positioning, essence, and user experience that will be associated with the proposed brand concepts in an animated way. |
by Faith
15. June 2010 20:10
| Site Maps |
 |
Provides a visual representation of each page of the web site and the logical flow of navigation between them. It also denotes functional features, and levels of navigation including primary, secondary, tertiary, utility, and footer. |
| |
 |
|
Answers the following questions:
- What is the exact structure of the site?
- Where will the pages live?
- How will the user be able to move through content sections and find the relevant and important information?
|
 |
Provides the following benefits:
- Provides a current document on the site's architecture throughout the design and development process
- Allows the client to see the site and it's structure at a glance prior to the design-phase
|
| |
|
Sitemaps are representations of the architecture of a web site or web-based application. As a planning tool, a sitemap helps developers and clients understand the nature and extent of a product's logical architecture by displaying all the pages or screens in the product and their relationship to each other.
The sitemaps presented here were designed in an isometric format for several reasons. Since isometrics make good use of available space, large architectures can be more easily presented than if the map was depicted solely in landscape or portrait mode.
Also, since people live in the physical world, seeing a complex architecture in a 3D-like presentation helps them better envision the scope of a site or application. Because this format is familiar to them, less time is spent orienting someone in how to understand the relationships the map reveals. Plus, it looks cool.
|
by Faith
16. January 2010 15:00
| Work Flows & Process Flows |
 |
Describe in detail key functions users will perform. Workflows record steps that target audience members must follow and the functions associated with each discreet task. Mapping interactions ensures the target audience experiences a logical flow during the process. |
| |
 |
|
Answers the following questions:
- What user steps are required to perform the function/task?
- How can the client be sure of a good user experience that will promote a strong brand?
- What backend functions are involved during the use of this feature/functionality?
|
 |
Provides the following benefits:
- Structures tasks to best fit the capabilities of the user with those of the server/backend (provides a visual depiction of user and system interactions)
- Serves as a development map for the Technology Services team to build the site interactions
|
by Faith
15. January 2010 15:00
| Wireframes |
 |
Provide the skeleton of navigational and content elements. Final wireframes provide a refined framework of each page level on which the User Experience team can build the site look and feel. |
| |
 |
|
Answers the following questions:
- How can the client be comfortable with the design of the navigation and page layout before it is designed and developed?
- What amount of space layout is assigned to each element on the page?
- What is the priority of information on the page?
- How will the user flow from page to page and complete tasks?
|
|
Provides the following benefits:
- Provides a visual layout of the real estate of the page (clearly defines interface elements, windows, buttons, and graphics)
- Indicates exact navigation appearance and functionality (clearly details how functions operate at a page level)
|
| |
by Faith
12. January 2010 15:00
| Target Audience Personas |
 |
Guide the design of the site architecture, as well as the creative approach and execution. A persona represents a group of target audience members who visit a site and identifies their interests and abilities. |
| |
 |
|
Answers the following questions:
- Exactly who visits the client's site?
- What are the interests, capabilities, and limitations of the Target Audience?
- What are the personality profiles of the different audiences?
|
 |
Provides the following benefits:
- Ensures a clear understanding of who we are "talking to" via the site.
- Ensures the focus of the navigation, structure, labeling, and creative treatment is on target throughout the project.
|
Target Audience Personas (PDF)
Target Audience Personas (WORD)
|
Personas represent the various user types that are expected as the intended users of a system. They are useful for keeping stakeholders and project developers focused on the intended user as they make design decisions.
Personas consist of at least three primary elements:
- Name: This is usually a real name, like “Bob” or “Lisa,” and may include the role of the individual as well. Roles should communicate something about the user’s perspective or motives. Examples of roles are, “Early Adopter,” “Conservative Shopper,” “Worrier,” “Care-giver,” “Parent,” and so on. Include a photograph that represents the individual’s general character to create a more vivid and realistic example for project stakeholders.
- Motivations, Needs, and Preferences: Based on user research, each persona’s motivations, needs, and preferences should be expressed in a concise statement, such as, “John wants to compare mobile phones and calling plans to sign up for new cellular service. He is particularly interested in finding a phone that will support worldwide travel, without expensive roaming fees.”
- Scenarios: Personas help project members better understand the personalities of a system’s intended users by describing a potential task or goal that the system will support in terms of how a person will react to it. For instance, a “Worrier” may be hesitant to complete a shopping purchase, fearing that his credit card information will not be secure. A parent may wish to control the experience of her young child while he explores a video gaming website that advertises violent games.
Although personas are abstractions of actual users, they should be developed based on actual data found in user research. To introduce personas to a project team, print them out and post them around the office. Bring personas to meetings to make more informed development decisions that will affect the user experience. For example, you may want to know, “Which area of the website would Chris, an Early Adopter, explore first before deciding to make a purchase?” During a meeting, attendees may role-play the various personas to ensure that the website will be designed to meet their needs and preferences according to their persona descriptions. Furthermore, to encourage project team members to maintain their focus on the intended audience of personas outside of meetings, create email addresses for each persona and assign team members to assume the role of each persona. When a stakeholder or project member has a design decision to make, he can send an email to the personas, who will respond to their question from the perspective of their needs and preferences.
by Faith
11. January 2010 15:00
by Faith
9. January 2010 15:00
| Human Computer Interaction |
 |
A pragmatic approach to interaction modeling is presented by which a designer can describe how the user gets tasks done with a newly developing system. The notation proposed allows an interaction designer to make explicit both how user actions cause visible or noticeable changes in the state of the machine and how the user is expected to use feedback to generate their next action.
|
| |
 |
|
Answers the following questions:
- Specifies the visible system state that leads the user to take some action.
- Makes explicit the state of the goal stack at the start and end of the unit and the mental processes (recall, recognition, or affordance) required.
- Can describe the intimate connection between goal, action, and the environment in user-machine interaction.
|
 |
Provides the following benefits:
- Demonstrate the completeness of Human Interaction scenario analysis
- Models can be presented for some well-known problems in interaction design.
- Ensures the target will accept or use site features or other elements.
|
| |
Human Computer Interaction is just in it's inception phase currently, although it has been a long standing practice in the Information Architect domain, validating the practices of many Architects the world over. Eye movement tracking has been successful in validating that users are more attracted to buttons and pictures and will read these first, and studies about Usability have proven that websites with more than three deep pages will just not do. Users in the modern era of Search engines are more apt to Search a site than meander down a list of sub navigation to an even further list of possibilities.
With the introduction of Iconography, and the widespread use of it throughout the internet and in OS applications, companies are starting to see the usefulness in utilizing it to increase the speed and ease of buying and checking out on their websites and in their web based applications. Iconography has always been a religion I live by! Just think about how that MS "Word" icon on your desktop lets you know intuitively that you will open Word and begin. Notice the way you identify and use icons everyday in your world and you will see a whole new way of short hand communication that proliferates our lives. From the Starbucks brand, to the PDF icon, it all lets you know something in the most shorthand way of speaking to your brain there is, Iconography. |