UX Deliverables

Here are some of my ux deliverables I have done. Only those with prior permission from clients are shown here so there is more. I have left out competitor analysis and storyboards for now. To read more about the ux projects these are from, check out Portfolio Work.

This presentation of deliverables loosely follows my design process

Personas

A user profile or persona is a realistic (but likely fictional) example of a target audience member. The profile commonly takes the form of a one page piece that lists the user’s name, occupation, education, demographic characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually used to give a face to the profile. Personas

PERSONA_1_HOMEOWNER

Persona for a paint company

PERSONA_2_COLOUR_CONSULTANT

Persona for paint company

 

Persona financial drivers

Persona financial drivers

User Journeys

USER_JOURNEY

User journey for a travel company

 

Persona for Skincare

User journey for skin care website customer

User journey for a skincare company

User journey for a skincare company

Flowchart

A workflow diagram (or activity diagram) that is graphical representation of activities and actions conducted by users of a system.

Flowchart for restaurant website

Flowchart for restaurant website

Website Flowchart

Website Flowchart

 

Website_Flowchart with detail

Website_Flowchart with detail

Competitor analysis

Performing an audit/review of competing websites and apps; conducting user testing of competing sites; writing a report that summarises the competitive landscape. competitorsEdgeGrowthUsabilityReview

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Google analytics data

Analysing web or mobile usage data, and making subsequent recommendations.

Google Analytics

Google Analytics – Browser stats

 

Google Analytics Desktop statistics

Google Analytics – Desktop statistics

Card sorting

Card sorting is a technique where users are asked to generate a folksonomy, or information hierarchy, which can then form the basis of an information architecture or website navigation menu.

Cardsorting

Sitemaps

Site maps are one of the most critical and widely used web information architecture tools (along with wireframes). They show the overall structure and hierarchy of a Web site. They can be used as the first step in laying out the web information architecture of a site, and will provide the framework upon which to base site navigation.

SITEMAP

Sitemap

Sitemap

Sitemap

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sketches

e7795f33bb1d7f10a0e379e2ca21ec1b

Wireframes

Information Architecture Wireframes (combined with Site Maps) are the bread and butter tools of information architects. They are useful for conveying the general page structure and content requirements for individual pages. Wireframes need to achieve a happy medium between being too precise and too loose. A wireframe that is too precise or detailed may leave little creative room for the designer. A wireframe that is too loosely defined can easily be misinterpreted by designers and developers. The format used should be dependent upon the audience.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet.

Blog UI KIT

Blog UI KIT

DOCUMENT_UPLOADING_AND_CONTRACT_PRINTING Edgegrowth4 HOMEPAGE

Car Daily app Screens2 iPhone5_WireTemplate_Black  iPhone5_WireTemplate_Black2_small  NIKE prototype nike_jordan pagenike landing page

NIKE axure prototype

NIKE axure prototype

 

Heatmap and clickmap testing

Heatmap and clickmap testing

  Preference testing

Preference testing

Preference testing

Visual design

Car Daily Project background

Car Daily Project background

Car daily app

Car daily app

Car Daily app video

Car Daily app video

Lufthansa mobile app

Lufthansa mobile app

a291dc3d8c67dd01f477e1eff0dd2463 c11439fcde989dc0fa78b6ff022d0a08

GQ app

GQ app

Lufthansa mobile app

Lufthansa mobile app

Lufthansa app

Lufthansa app

Ocean group website

Ocean group website

 

Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new Web site. Card sorting would be helpful for organizing content in this situation.

Here a a couple examples of Web content inventory variations.

  • Survey – A high level review of a site’s main sections and pages. It enables you to develop an understanding of the general site scope and major chunks of content.
  • Detailed Audit – this is a comprehensive inventory of every page on a site. This inventory will list every page’s filename, title, URL, and possibly its file type and a description. It’s also helpful to assign a unique page ID that will correspond to the pages location on the Site Map.
  • Content Map – This simply entails laying out the site content in a graphical format. I haven’t seen this used widely, and I’m not sure how much use it would serve. If you’re performing a content inventory on a current site, then an effective site map might nullify the need for a content map.

Leave a Reply