Experience Design Delivery – Design


Welcome back. After a little break we will continue to explore experience design deliverables. Last time we covered discovery from the business, user, tech, design and trend perspective. This time we will move to designing actual experiences including design strategy, flows and diagrams, iA, Wireframes and all kinds of documentation followed by prototyping.

XD Skillset and Deliverable Experience Design

  • Discovery
    • Business Discovery
    • User Discovery
    • Tech  Discovery
    • Design Discovery
    • Trends Discovery
  • Co-Design
    • Experience Strategy
    • Process Flows & User Journeys
    • information Architecture
    • Wireframes
    • Interactive Prototype
    • Designing
  • Testing
    • Q&A

2.0 Co-Design

Co-design is a process of product, service or organisation development where design professionals develop solutions with users.

[WIKI] This process believes that by encouraging the trained designer and the user to create solutions together, the final result will be more appropriate and acceptable to the user. It is generally recognised that the quality of design increases if the stakeholders’ interests are considered in the design process.

Opportunity in co-designing relies on an immediate reply from the team and stakeholder. This also gives you  the power to design the right product for the right audience in a short period of time.

Experience Design Strategy

Almost every project includes a strategy piece. This sets project narratives and stable pillars that usually cover what the solution is, how the investor will benefit from it , and why the user should use it. These three pillars also give the proposal a stable framework that better reflects  social exposure, financial benefits, time relevance, tailored content or services you want to cover.

Wherever you think about the strategy piece you should have in mind a small “experience manifesto” – a basic premise about what “this thing” will eventually deliver.

Content Strategy

Content is the leading part of the experience – everyone knows that, but no one really does it well. Whether you design a site for a travel company, bank or mobile retailer, keep in mind that “the content leads to decision making”. The content differentiate from project to project, purpose, location, situation, social relevance and the device on which it  is received and consumed.

Experience mapping

A good experience map clarifies relationships between existing and future components. Identifying all the different inputs and outputs and points of difficulty shows you where the opportunities for improvements lie.

Process Flows & User Journeys

The goal of the user journey is to visualise in detail all the steps of the person (most likely above defined Persona) going through the proposed experience to achieve a certain task (order a ticket, buy a book, transfer money, etc.). It shows all the interaction points within the experience (web, app, etc.).

Recently, the user journey has become a representation of different aspects of the service journey of a user across different touch points where mobile, tablet and desktop plays major role. Keep in mind the need to anticipate  these challenges.

User Scenarios

Use scenarios position predefined user types in natural contexts or real live situations. This gives you insights about how the system, solution or service fits into real people’s lives.

User Story

A good user story is not about describing an experience but more precisely annotating the task to help designers to observe and define problems. Quantifying the opportunities in more narrative and tangible ways helps to make the right decisions.

Personas / User types

User types are defined in the set of objectives that shape habits, rituals, needs, and personal or financial goals (whichever is preferable). Defining user types also shows how the user adopts habits over a day while using the product or service. This information is then categorised and communicated on a single page.

  • Great article at UX Magazine building the foundation of the project
  • Web-usability covers objectives of developing the personas (Yeevon Ooi)
  • In-Concrete personas – Man, 33, manager, tech savvy, medium income.
  • Concrete personas - Tom D., he is a 33 year old property manager from Newcastle who runs his own business via various digital channels. He is interested in property development and investment outside the UK. He lives in London where he … and so on.

information Architecture

iA typically represents a model or concept of an information structure explicitly describing the complexity of information systems. Whether we talk about tangible experience (pages, sites, databases, intranets and communities) or intangible experiences (services, technologies and connections)  iA is a summary of our gatherings and findings in a particular digital landscape.

Site map

A site map is a visual representation of the site in the form of a logical structure. This document organises key pages and sections typically in hierarchical or chronological order to describe planned changes in the system or part of the system.

  • Hierarchy Site-map – focusing on page hierarchy
  • Dynamic Site-map – Usually build in HTML to demonstrate cross-linking functionality
  • Business Site-map – focusing on answering business related question (for example existing and new services or pages)



Wireframes generally visualise pages or screens with a focus on layout, structure, organisation, navigation and interaction before investing time in the design. Wireframes show the narratives, connection, extension and functionality of predefined components on the screen.

Component Library

Some XD documents have a separate section called the component library. Each component describes functionality and scalability used across a proposed experience. These components then become building elements for your templates. They also define the complexity of the proposed solution.

Whether you are designing a small or a big site, keep you library organised. To get your component library under control is probably one of the hardest tasks in a project, especially if we are talking about RWD or Service Design components.

  • Mobile version (iPhone, W8, NEXUS)
  • Tablet version (iPad, W8,  NEXUS)
  • Desktop version (MBP, W8,  NEXUS)
  • Integration Framework covering most recent sources – https://www.graffletopia.com/

Responsive Wireframes

RWD wireframes have their own rules where the component library plays an incremental role in identifying behaviour across different viewpoints. RWD wires define where the components live and what  their role is in a particular screen or situation.

Interactive Prototype

From simple paper prototypes to pre-alpha software working models, drive rapid iteration and emotional engagement by showing how fidelity products will look and feel in the real world. Prototyping deserves an article by itself but the basic premise is go and try.



Narrative Reports

Writing is a great tool for thinking and organising. Open conversation and structured naming conventions make a project stable. This includes written reports, presentations, formal recommendations and proposals, detailed results or even analysis reports. All serve others in understanding the big picture or detail. As always, reports can get pretty detailed – keep in mind no one will ever read a 60 page document about one single interaction. Keep your documentation as focused as possible. Use the same naming convention across all documents so that consistency is your strength not weakness.


Part of experience design is the design itself.  While building your documentation or prototype help your designer to see what is in it – do not work in a vacuum. Layer transitions, collapsed and expanded statuses, and so on, helps others to extend the viewpoint of the experience.

Concept Design

Concept design is a form of illustration where main goal is to contribute on visual representation of a design, idea, and behaviour for use in the final digital product. This techniques is widely applied in retail design, space design, fashion design and architecture.


A storyboard is a series of narrative sketches displayed in sequence that tell a story and paint a picture by showing the interaction between users and systems in context over time.

Bill Buxton on sketching experiences, Institute of Design Strategy Conference, May 2008 from IIT Institute of Design on Vimeo

Data Visualisation

An important part our current interfaces is visualising data. The amount of data increases as we start using the service related to performance. Whether we talk about physical activities or daily habits the data of the last decade has become an essential part of our lives. The challenge starts with organising these data into contextual meaningful visualisations that allow us to understand changes without diving into detail or studying spreadsheets for hours.

Lloyds Money Manager on Vimeo.

Retail Installation

In the last decade the retail industry has moved towards an experience window rather than a shopping hub. This change brings new challenges in terms of interactivity and integration with existing services.

Everything that has been presented above should give you an idea of where you stand and what you need to do. The next step is human interaction in a real space. Have a look at these three case studies, which cover all the above points.


Design discovery is as important as designing itself. The things that come right after are the evaluation of design, behaviour triggering and finally, the return on the investment.

The third article will not be only about Q&A but also about guidelines, scalability, business expectations and time management.

Let me know if I forget anything.

Leave a Reply


Hello there, to type your message you can use these tags:
<b> <code> <em> <i> <u> HTML links are populated automatically.