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
- Experience Strategy
- Process Flows & User Journeys
- information Architecture
- Interactive Prototype
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.
- How to write a manifesto
- Why company needs design experience strategy
- Frog design strategy now
- Experience strategies by Jesse James Garrett
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.
- Please watch Karen McGrane’s famous talk about optimising your content for the future. She covers the most recent challenges in digital publishing.
- Also, Clarissa Peterson’s presentation about content strategy.
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.
- Experience maps on Pinterest
- The Anatomy of Experience Map from Adaptive Path.
- UX Magazine define opportunities with Experience map.
- Tyler Tate talk about Cross-channel blueprint – Experience Map
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.
- An introduction to user journey in detail from Jason Hobbs
- What other people do – User journeys
- Stop designing pages and start designing flows from Morgan Brown
- Pinterest resource for User Journey
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.
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.
- Business driven user stories applied in agile development
- Behaviour Driven Development
- Behaviour is more useful than test written by professionals around the world.
- Agile development methods & Scott W. Ambler Associates
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.
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.
- Practical iA from Donna Spencer
- SEO principles for iA
- Microsoft official page for Share Point iA – including templates, blogs, etc. very good source of information
- Building an iA Checklist
- Beginner guide for iA from Donna Spencer
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.
- Bill Buxton on sketching experiences at Institute of Design Strategy
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/
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.
- Simple guide for RWD - from Adam Edgerton the Director of Project Management at Metal Toad
- RWD wireframes are death – moving to responsive prototyping
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.
- POP iPhone app for quick and easy prototype
- Hand craft HTML5 prototyping tool
- UIE talks about picking up right tools for prototyping
- Love this article HTML vs. Axure
- I use Jetstrap
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 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.
- Hugh Graham on topic of Concept design
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.
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.
- Manuel Lima – and his site visual complexity
- Data Visualisation in Sport – Strata
- Data visualisation in healthcare – Fitbit
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.