Basic Concepts

Wireframes Vs Comps

View side by side the differences between Wireframes and Comps.

Enlarge Image

Analysis

Personas design

Personas are fact-based representations that portray a product's real users, in order to capture and communicate their characteristics, behaviors, motivations, goals and needs. These archetypes are used to focus and define strategy and design through identified user behavior and goals, allowing better decisions based on real users' insight. Personas are an excellent way to focus strategy and design an experience directed at the correct target for a project. If accurate personas aren't created, we run the risk of missing the mark on our experience and this will have an effect all the way to development.

Enlarge Image

Sitemap

Site maps are a reflection of a site or product's structure. It is essential to visualize the size and complexity of a project, considering all levels of information (hierarchy), its groups, classifications and content relationships. Additionally, site maps are needed to select the pages/sections that are most important to be wire framed. It helps the development team and the client decide on the phasing of features or sections. Clients can also validate that all the necessary content pages are covered, and are in-line with their business needs. Site maps can also help with content identification. Without a sitemap as a guide for a project's objectives and structure, the UXAs, designers, coders and developers would be lost.

Enlarge Image All About Sitemaps (.PDF)

Competitive Analysis

Competitive analysis alows our IA team to compare sites that are in the same vertical area as our client's project or product. Using design principles, structure variables and content heuristics we evaluate each competitor's strengths and weaknesses. This practice helps us uncover common features and differences among competitive offerings. It also lets us detect opportunities and threats in specific markets. By knowing what competitors are doing, we ensure that we don't repeat the same mistakes or bad practices.

Enlarge Image


Benchmark Report

Benchmarking helps UXAs understand how similar products (not solely competitors) are doing things. This helps the UX team identify trends, solutions, practices (both good and bad) and industry standards that can be adapted to improve project user experiences. Clients should understand the competitive landscape better than anyone. So after a benchmark, the client will be more informed when defining features and functionality of a project. Without benchmarking we may overlook mandatory practices that could increase the user's engagement and lead to a product that stands out from the competition.

Enlarge Image

Explorations

Sketches

Sketches are often the initial step taken by our User Experience Architects (UXAs). They represent the structure of a product, and are used to share and iterate over main features, behaviors and layout (in order to gain early alignment on expectations). Sketching gives a better understanding of the goals. It also helps us generate different approaches and find better solutions than doing wireframes directly. The quick production time associated with sketches helps the UXA team make faster decisions and make changes before specifications are defined saving time, reworking and effort.

Enlarge Image

User flows

User Flows are graphical representations of the different processes and/or tasks users will engage with. Within a product, they also provide an overview of the logic behind users' behaviors. This step is very useful in defining all the interactions that users take to complete a task, and the feedback that they may receive after every action they take. Additionally user flows help verify that all technical and business requirements are considered in the user experience. Developing user flows ensures the IA team will not overlook the essential touch-points between users and the product and helps avoid misunderstandings between development, IT, IA and creative teams.

Enlarge Image

Concept Model

The Concept Model is a visual representation of the concepts, features and functionality of a site or application. It highlights the users involved in the experience or process that is being developed. This step is vital when exploring first approaches and ideas. More strategic than technical, it helps to clarify the necessary user interactions and uncover any undesirable behavior paths. As a result, we obtain a big picture perspective of the main objective, actor and scope of a project. Not having a clear concept model to apply over interactions, could mean more time and effort need to be dedicated to explore and define the project. By including it we have a starting point for our UX strategy and we validate the project's main points of contact.

Enlarge Image


Scenarios

Scenarios are descriptions of typical situations involving one or more personas performing a task related to a product. This provides a detailed picture of the methods needed to create their routine practices.

Although this deliverable is usually internal, getting feedback from clients allows the team to keep focus on the users' desired path and align it with the business model and objectives. Scenarios are helpful in figuring out interactions between the product and users that were not considered in initial planning.

Enlarge Image

Documentation

Wireframes

Wireframes are one of the pillars of good UX. They display the architecture of the user interface and reveal the information structure of the key pages within a product. Wireframes provide a detailed view of a site's main elements in order to validate navigation, hierarchy, functionality and content. They are also useful for detecting early stage usability issues, and serve as a reference for construction. Wireframes are a vital part of development and avoiding them will end in a re-building process that will cost time and money.

Enlarge ImageAll About Wireframes (.PDF)

Paper Prototyping

The creation of Paper Prototypes begins after the site map is defined. Sketching helps improve navigation, labeling, structure and organization, by studying navigation paths and collecting the impressions of potential users (or even clients) from a closer experience of the project, prior to its real development. This step lets clients get involved at a primary stage of the project, helping them to get familiar with the offering and understand the users' point of view. Doing paper prototyping before the development phase helps generate preliminary feedback, saving time and costs. If needed, paper prototypes can be tested to further increase the accuracy of final wireframes.

Enlarge Image iPad Demo

Digital Prototyping

A Digital Prototype is created by taking our detailed wireframes and creating clickable versions. These can be HTML or PDF based (which ever suits testing better). This deliverable gathers information about the interactions and reactions from real users (or clients) that are directly experiencing the site on a digital platform. Although they aren't finished designs., digital prototypes are perfect for projects with complex interactions, where there may be a need for quick iterations to test the main functionality at an early stage. Clients can validate functionality and receive feedback before the creative, UI and development phases. Also, with a functional prototype, developers will have a guide to what the user experience will be, and have a clearer understanding of what they will develop.

Enlarge Image Continental Demo THC Demo