├── index.md ├── .vuepress ├── public │ ├── robots.txt │ ├── images │ │ ├── favicon.ico │ │ ├── image1.png │ │ ├── image2.png │ │ ├── image3.png │ │ ├── image4.png │ │ ├── image5.png │ │ ├── image6.png │ │ ├── image7.png │ │ ├── image8.png │ │ ├── image9.png │ │ ├── simon.jpg │ │ ├── Image1@2x.png │ │ ├── Image2@2x.png │ │ ├── Image3@2x.png │ │ ├── Image4@2x.png │ │ ├── Image5@2x.png │ │ ├── Image6@2x.png │ │ ├── Image7@2x.png │ │ ├── Image8@2x.png │ │ ├── Image9@2x.png │ │ ├── measurement.png │ │ ├── logo_netguru_b.png │ │ ├── 9_patch_Android.png │ │ ├── 9_patch_Android@2x.png │ │ ├── user-research-methods.png │ │ └── netguru.svg │ └── fonts │ │ ├── AvertaStd-Bold.otf │ │ ├── AvertaStd-Regular.otf │ │ ├── AvertaStd-Semibold.otf │ │ ├── NotoSerif-Italic.ttf │ │ └── AvertaStd-RegularItalic.otf ├── override.styl ├── config.js └── style.styl ├── .gitignore ├── docs_assets ├── gh-branch.png ├── gh-clone.png ├── gh-commit.png ├── gh-publish.png └── gh-new-branch.png ├── package.json ├── README.md └── chapters ├── 08-project-termination.md ├── 09-measurement.md ├── 03-ideation-and-concept.md ├── 07-implementation.md ├── 02-discovery.md ├── 04-wireframing.md ├── 05-testing.md ├── 06-design.md └── 01-project-introduction-and-setup.md /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | -------------------------------------------------------------------------------- /.vuepress/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn-error.log 3 | .vuepress/dist 4 | -------------------------------------------------------------------------------- /.vuepress/override.styl: -------------------------------------------------------------------------------- 1 | $ff-base = 'Averta Std', sans-serif 2 | $ff-serif = 'Noto Serif', sans-serif 3 | -------------------------------------------------------------------------------- /docs_assets/gh-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/docs_assets/gh-branch.png -------------------------------------------------------------------------------- /docs_assets/gh-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/docs_assets/gh-clone.png -------------------------------------------------------------------------------- /docs_assets/gh-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/docs_assets/gh-commit.png -------------------------------------------------------------------------------- /docs_assets/gh-publish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/docs_assets/gh-publish.png -------------------------------------------------------------------------------- /docs_assets/gh-new-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/docs_assets/gh-new-branch.png -------------------------------------------------------------------------------- /.vuepress/public/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/favicon.ico -------------------------------------------------------------------------------- /.vuepress/public/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image1.png -------------------------------------------------------------------------------- /.vuepress/public/images/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image2.png -------------------------------------------------------------------------------- /.vuepress/public/images/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image3.png -------------------------------------------------------------------------------- /.vuepress/public/images/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image4.png -------------------------------------------------------------------------------- /.vuepress/public/images/image5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image5.png -------------------------------------------------------------------------------- /.vuepress/public/images/image6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image6.png -------------------------------------------------------------------------------- /.vuepress/public/images/image7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image7.png -------------------------------------------------------------------------------- /.vuepress/public/images/image8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image8.png -------------------------------------------------------------------------------- /.vuepress/public/images/image9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/image9.png -------------------------------------------------------------------------------- /.vuepress/public/images/simon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/simon.jpg -------------------------------------------------------------------------------- /.vuepress/public/images/Image1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image1@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image2@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image3@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image4@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image5@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image6@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image6@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image7@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image7@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image8@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image8@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/Image9@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/Image9@2x.png -------------------------------------------------------------------------------- /.vuepress/public/images/measurement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/measurement.png -------------------------------------------------------------------------------- /.vuepress/public/fonts/AvertaStd-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/fonts/AvertaStd-Bold.otf -------------------------------------------------------------------------------- /.vuepress/public/images/logo_netguru_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/logo_netguru_b.png -------------------------------------------------------------------------------- /.vuepress/public/fonts/AvertaStd-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/fonts/AvertaStd-Regular.otf -------------------------------------------------------------------------------- /.vuepress/public/fonts/AvertaStd-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/fonts/AvertaStd-Semibold.otf -------------------------------------------------------------------------------- /.vuepress/public/fonts/NotoSerif-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/fonts/NotoSerif-Italic.ttf -------------------------------------------------------------------------------- /.vuepress/public/images/9_patch_Android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/9_patch_Android.png -------------------------------------------------------------------------------- /.vuepress/public/images/9_patch_Android@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/9_patch_Android@2x.png -------------------------------------------------------------------------------- /.vuepress/public/fonts/AvertaStd-RegularItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/fonts/AvertaStd-RegularItalic.otf -------------------------------------------------------------------------------- /.vuepress/public/images/user-research-methods.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netguru/design-process/HEAD/.vuepress/public/images/user-research-methods.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "design-process", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "git@github.com:netguru/design-process.git", 6 | "author": "michalsnik ", 7 | "license": "MIT", 8 | "devDependencies": { 9 | "vuepress": "^0.14.8" 10 | }, 11 | "dependencies": { 12 | "vue-svg-loader": "^0.11.0", 13 | "vuepress-theme-live-ebook": "1.2.0" 14 | }, 15 | "scripts": { 16 | "start": "vuepress dev", 17 | "build": "vuepress build" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Design Process by Netguru', 3 | description: 'Live E-Book with useful informations about Design Process', 4 | theme: 'live-ebook', 5 | base: '/', 6 | head: [ 7 | ['link', { rel: 'icon', href: '/images/favicon.ico' }], 8 | ['meta', { property: 'og:type', content: 'website' }], 9 | ], 10 | ga: 'UA-259047-66', 11 | 12 | themeConfig: { 13 | bookTitle: 'Design Process For Pros', 14 | baseUrl: 'https://design-process.netguru.co', 15 | exitUrl: 'https://www.netguru.co/design-process', 16 | company: { 17 | name: 'Netguru', 18 | url: 'https://www.netguru.co', 19 | logo: '/images/netguru.svg' 20 | }, 21 | twitter: 'netguru', 22 | }, 23 | 24 | chainWebpack: (config) => { 25 | const svgRule = config.module.rule('svg'); 26 | 27 | svgRule.uses.clear(); 28 | 29 | svgRule 30 | .use('vue-svg-loader') 31 | .loader('vue-svg-loader'); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.vuepress/style.styl: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Averta Std'; 3 | font-weight: 400; 4 | src: url('/fonts/AvertaStd-Regular.otf') format('opentype'); 5 | } 6 | 7 | @font-face { 8 | font-family: 'Averta Std'; 9 | font-weight: 600; 10 | src: url('/fonts/AvertaStd-Semibold.otf') format('opentype'); 11 | } 12 | 13 | @font-face { 14 | font-family: 'Averta Std'; 15 | font-weight: 800; 16 | src: url('/fonts/AvertaStd-Bold.otf') format('opentype'); 17 | } 18 | 19 | @font-face { 20 | font-family: 'Averta Std'; 21 | font-style: italic; 22 | src: url('/fonts/AvertaStd-RegularItalic.otf') format('opentype'); 23 | } 24 | 25 | @font-face { 26 | font-family: 'Noto Serif'; 27 | font-style: italic; 28 | src: url('/fonts/NotoSerif-Italic.ttf') format('truetype'); 29 | } 30 | 31 | .dp-table 32 | border-collapse collapse 33 | table-layout fixed 34 | 35 | td 36 | padding 10px 37 | text-align center 38 | border 1px solid rgba(0, 0, 0, .3) 39 | vertical-align top 40 | 41 | &:first-child 42 | background-color #f5f5f5 43 | 44 | li 45 | text-align left 46 | text-indent initial 47 | 48 | &.numbered 49 | td 50 | &:nth-child(2) 51 | background-color #f5f5f5 52 | 53 | &.discovery 54 | td 55 | text-align: left 56 | line-height: 1.5 57 | -------------------------------------------------------------------------------- /.vuepress/public/images/netguru.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design Process - Live Ebook 2 | 3 | This repository contains content of [the following ebook](https://design-process.netguru.co). 4 | 5 | ## How to set it up locally? 6 | 7 | 1. Clone repository 8 | ``` 9 | git clone git@github.com:netguru/design-process.git 10 | ``` 11 | 12 | 2. Install all dependencies 13 | ``` 14 | yarn install 15 | ``` 16 | 17 | 3. Run local server 18 | ``` 19 | yarn start 20 | ``` 21 | 22 | Now all your changes should be visible on [localhost](http://localhost:8080). 23 | 24 | ## How to add content and customize this ebook? 25 | 26 | This e-book is built upon [vuepress-theme-live-ebook](https://github.com/netguru/vuepress-theme-live-ebook). Visit its' [documentation](https://github.com/netguru/vuepress-theme-live-ebook) for detailed instruction and tips. 27 | 28 | ## How to deploy new version? 29 | 30 | This e-book uses [Netlify](https://netlify.io/) for CI and deployment. 31 | Anything that goes to master is automatically deployed. 32 | 33 | ## How to contribute as non-dev person? 34 | 35 | You're going to need two tools: 36 | - [Github for Desktop](https://desktop.github.com/) 37 | - Editor of your choice (e.g. [Atom](https://atom.io/), [Sublime](https://www.sublimetext.com/) or [Visual Studio Code](https://code.visualstudio.com/)) 38 | 39 | If have those installed, make sure you have write access to the repository. You can create ticket [here](https://netguru.atlassian.net/servicedesk/customer/portal/4/group/22/create/94) 40 | 41 | 1. Open Github App, and find the repository to clone: 42 | 43 | Clone repository 44 | 45 | 2. Click on the current branch, to open branch navigation: 46 | 47 | Open branch navigation 48 | 49 | 3. Create new branch: 50 | 51 | Create new branch 52 | 53 | 4. Now you can open your editor and edit source files. 54 | 55 | 5. Once you're done editing, go back to Github App and commit your changes: 56 | 57 | Commit changes 58 | 59 | 6. After your changes are locally commited, you can publish your branch: 60 | 61 | Publish 62 | 63 | 7. Since work should be collaborative, now you should create Pull Request on github. 64 | 65 | - visit [the repository](https://github.com/netguru/design-process/pulls) and click on `New Pull Request` 66 | - make sure the `base` branch is set to `master` 67 | 68 | 8. Once your changes are reviewed by one of your collegues, you can `Merge` the Pull Request. 69 | 70 | 9. Changes merged to `master` branch will be automatically deployed, and should be live in the next 3 minutes. 71 | -------------------------------------------------------------------------------- /chapters/08-project-termination.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Project termination" 4 | chapter_number: "08" 5 | description: Final state of design process is project termination. You will learn where to put source files and store assets, how to ensure your project team are safe, when to recommend product checkups and how to make sure your project passes the peer review. 6 | --- 7 | 8 | # Project termination 9 | 10 | ## Introduction 11 | **In this section you can learn:** 12 | - Where to put the source files and store assets at every stage of your involvement in the project. 13 | - How to ensure your project team are safe when they leave the project. 14 | - When to recommend Product Checkups to your clients. 15 | - How to make sure your project passes the Peer Review. 16 | 17 | Remember that it is just an example of how we do stuff at Netguru. You might want to adapt the process to your own workflow. 18 | 19 | ### Stakeholders: 20 | - Other designers 21 | - Client 22 | - Internal Developers 23 | - External Developers 24 | - Project Manager 25 | 26 | ## Termination checklist items 27 | 28 | ### After the design phase: InVision 29 | 30 | - Source files (psd, sketch, ai) are in the ASSETS/Source Files tab on InVision. 31 | - Fonts are in the ASSETS/Fonts tab on InVision. 32 | - All elements that require clarification for developers (animation, responsiveness, behavior, state) have Tour Points attached. 33 | - All screens have proper names. 34 | 35 | ### After the design phase: Google Drive 36 | 37 | - Follow the steps from Chapter one. 38 | 39 | ### Slack pinned items 40 | - The InVision and Drive links are **pinned** to the Project's channel on Slack with an explanation of how to use them and added to Project Info in Google Drive. 41 | 42 | ### Final call with the team: team Q&A 43 | 44 | Create a Q&A session with your project team: Developers, PM, and QAs. We advise you to go through each journey and visit every screen on every device. Tell the team about your solutions, discuss potential problems and development bottlenecks. It’s best to arrange this kind of a meeting at least a day or two before the deadline. 45 | 46 | ### Termination checklist: 47 | 48 | - Make sure your project will pass the peer review checklist. 49 | 50 | ### After the Development 51 | - The project is archived in InVision. 52 | - The designer does a review of the developer's work. 53 | 54 | ## Questions your client may ask 55 | 56 | 60 | 61 | 65 | 66 | 70 | 71 | ### Questions to ask yourself at this stage 72 | - Did I check the termination checklist? 73 | - Are the relevant files uploaded and available to developers? 74 | - If the project has been released and development has been completed – have I archived the InVision project? 75 | 76 | ## Desired outcome after this stage 77 | 1. The team’s questions regarding the design have been answered. 78 | 2. The client knows about the help you can offer in the future (regular checkups, iterations). 79 | -------------------------------------------------------------------------------- /chapters/09-measurement.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Measurement" 4 | chapter_number: "09" 5 | published: false 6 | --- 7 | 8 | # Measurement 9 | 10 | ## Introduction 11 | **In this section you can learn** 12 | - Why do we measure - benefits for us and clients 13 | - What is KPI and examples for various projects 14 | - What tools to use 15 | - Process explained 16 | 17 | From Cambridge Dictionary: 18 | 21 | 22 | The goal of measuring performance of designs is to know precisely, having data as evidence, if they perform well or bad, and how well exactly? In a nutshell you should measure something at one point in time, then change/adjust/redesign it and take the measure again. Difference between these two measurements is your impact. Doing that, we will be able learn which solutions work best, and clients will be able to get these solution, so it’s win-win scenario. 23 | 24 | Before proceeding with measurements, talk to your client about it, explain how vastly it will benefit quality of product and be sure to have client’s permission to access or install analytics tools. 25 | 26 | ### KPI 27 | 28 | Key Performance Indicators, also known as KPIs, are quantifiable measurements that help define and track the progress toward goals. 29 | 30 | ## Benefits for us: 31 | - We’ll be able learn which UX/UI solutions work best in real world with real users 32 | - Working on a long-term project gives us an opportunity to get deeper knowledge and become an expert in the particular PD field. Our decisions will be more data-driven, less ‘what-i-think-driven’. 33 | - Expanding toolset which could help us providing “the right” solutions 34 | - Create Case Studies - product success based on data 35 | - Gives an opportunity to upsell services like Design Maintenance, Product Check-ups or UX Reviews 36 | 37 | ## Benefits for clients: 38 | - Client will receive quality consulting service 39 | - Data metrics showing growth may be helpful gaining investors 40 | - Client has dedicated PD expert who tracks the performance and the conversion 41 | - All of decision that will be made, will be data-driven, that means more value - for less money (thanks to the GA access we don’t spend time on experiments) 42 | 43 | ## Process overview 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 71 | 72 | 73 | 74 | 75 | 86 | 87 | 88 | 89 | 90 | 94 | 95 | 96 | 97 | 98 | 100 | 101 | 102 | 103 | 104 | 114 | 115 | 116 |
1Set KPIs 53 |
    54 |
  1. 55 | Create a document with list of all KPIs that you want to track, 56 | this list is called Measurement Plan (see example here). 59 | Different products require different KPIs, for example, on landing 60 | page it’s good when users spend more time on them (better 61 | engagement) whereas in SaaS product, where users are task oriented, 62 | the less time they spend accomplishing a task, the better (indicates 63 | good UX). See example KPIs below in the table. 64 |
    2. 65 |
  2. 66 | Choose analytic tool(s) that are able to track these KPIs. 67 | Google Analytics is a must-have, Hotjar is highly recommended. 68 |
    3. 69 |
70 |
2Install tools 76 |
    77 |
  1. Ask PM to add a ticket in Jira for this task (Devs & PD).
    2. 78 |
  2. If you want to use funnels in GA, you have to setup it now (non 79 | retroactive), before gathering data. In Hotjar they can be setup 80 | anytime (retroactive)
    3. 81 |
  3. For convenience you can create Custom Reports in GA, so data that 82 | interests you will be visible straight away without a need to adjust 83 | view’s filters/timeframes every time you visit GA
    4. 84 |
85 |
3Gather dataSimply wait 3-6 months, checking from time to time if data is being 91 | gathered. 92 | Protip: Add slack reminder for yourself '/remind me Check GA <project 93 | name> in 1 month'
4Analyze dataIf the amount of data you gathered is sufficient, talk to your Lider / 99 | Senior Lider, about recommendations and additional services.
5Take action 105 |
Depending on what the data is showing you can:
106 |
    107 |
  • If you have some hypothesis but need more data - offer qualitative 108 | research method e.g. interviews, surveys (Hotjar)
    • 109 |
  • Propose design adjustments that will clearly improve product’s 110 | performance
    • 111 |
  • Move towards creating case study - Success Based on Data
    • 112 |
113 |
117 | 118 | ## KPI Examples: 119 | 120 | **SaaS** 121 | 122 | - Time on task (less = better) 123 | - Customer Support e.g. number of requests from Intercom (less = better) 124 | - Use of search vs. navigation (less search = better) 125 | - Average session duration (less = better) 126 | 127 | **Landing page** 128 | 129 | - Conversion rate: Signup form -> App (more = better) 130 | - Bounce rate (less = better) 131 | - Average session duration (longer = better) 132 | - Signup form abandonment rate (less = better) 133 | 134 | **Mobile App (only GA in native apps)** 135 | 136 | - Average Revenue Per User 137 | - Average session duration (longer = better) 138 | - App Launch / Load Time (shorter = better) 139 | - Exit rate (less = better) 140 | - Session Interval (shorter = better) 141 | 142 | **eCommerce** 143 | 144 | - Customer lifetime value (higher = better) 145 | - Conversion: Product page -> Purchase (more = better) 146 | - Cart abandonment rate (less = better) 147 | 148 | ## Desired outcome after this stage 149 | - Data reports 150 | - Conclusions after analyzing data 151 | - Case study - Success Based on Data 152 | - Selling additional service: Product Design, Product Check-up, Design maintenance 153 | 154 | ## Additional reading 155 | - [5 UX KPIs You Need To Track](https://designmodo.com/ux-kpi/) 156 | - [How to Setup Google Analytics and Segment Your Data](https://conversionxl.com/blog/google-analytics-segmentation/) 157 | -------------------------------------------------------------------------------- /chapters/03-ideation-and-concept.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Ideation and Concept" 4 | chapter_number: "03" 5 | description: In this section you wil learn what ideation is and when to conduct it, as well as how to explain it's importance to a client. You will also learn about concept phase. 6 | --- 7 | 8 | # Ideation and Concept 9 | 10 | ## Introduction 11 | Once the Strategy and Discovery phases are over and the proper research has been done, it is time to get to the Ideation phase. Thanks to all the data gathered in the previous steps you have a strong, solid base which will let you proceed to specify the concept of the Product and describe in detail: 12 | 13 | - **Who** (what user groups) the product is going to help 14 | - **What** problems it is going to solve or what needs it is going to fulfil 15 | - **How** (by what means) it is going to do so. 16 | 17 | This is the moment when the initial idea gets crystalized into a more tangible and granular vision of the Product based on real data and not just initial assumptions. In this phase, you generate multiple solution ideas and structure them. This is also the time when the big requirements are agreed upon, and the overall direction for the development is chosen. 18 | 19 | The main goal of the design process is not just to create pretty pictures or satisfy the subjective feelings of various stakeholders – the primary goal is to fit the client’s business goals with users’ goals by delivering an accessible, usable, and attractive product. We want to make a product that not only looks great, but, more importantly, also works great, and seamlessly meets (or even exceeds) users’ expectations. The Ideation phase helps with that by equipping the client with the necessary information in order to make decisions about the future shape and direction of the product. It also leads to preparing deliverables that will serve as an anchor to keep the whole team on the same page every step of the way. 20 | 21 | 22 | ## How to run ideation & concept 23 | There are quite a few methods you can use in order to put the product concept together in a digestible form. You do not need to use all of them in the same project, but you might consider choosing a few of them, depending on the context of the project, the work that has already been done, and the complexity of some elements which need clarification. The goal here is to prepare a solid foundation for further design work in order not to e.g. have to wonder about basic product issues like what the core feature should be while already wireframing. 24 | 25 | **Tools** 26 | At this stage you can use a range of tools. It all depends on the specific case, context, and what you currently need. Not only is the list of tools long, you can also create your own tool, or make some modifications to existing ones. There are a lot of tools and methods that are helpful at the ideation and concept stage, to name a few: 27 | - Value Proposition Canvas, 28 | - Personas, 29 | - Service Blueprint, 30 | - Customer Journey Map, 31 | - User scenarios/stories, 32 | - User flows 33 | ...and many many more. 34 | 35 | ## Desired outcomes of this stage 36 | Whether you choose to prepare a short report with the synthesis of the concept or just gather the deliverables in one place, it is always good to summarize this phase and communicate it to the client to make sure everything is ready for the next stage of the process and that you have left valid artifacts for the next team members that might be working on the project in the future. 37 | 38 | The output can be in the form of: 39 | - A report (you can use a presentation template) 40 | - Artifacts of the methods you selected (e.g. User Personas, Customer Journey Map, etc.) 41 | 42 | Make time for a presentation of your work. You are doing this because you care about the client’s business – remember about the importance of presentation. Keep it short and present it like a pro, because time is money. Your professional expertise, your knowledge, and your product design experience determine how you will deliver the client’s product to the world. It is essential to help the client decide what the best solution is. Prepare for the meeting using the tips described in the Chapter 1: Communication tips. 43 | 44 | 45 | ## Questions to ask yourself at this stage 46 | - Have I taken into account all the data gathered in previous steps? 47 | - Did I manage to form a clear concept of the Product in a presentable form? 48 | - Has the concept been defined well enough? 49 | - Do I understand the product and its features? 50 | - Do I understand the product’s business goals? 51 | - Has an important decision been made by the Client about the direction of further design? 52 | - Is it clear exactly what problems of what user groups the Product will be solving? 53 | - Does the proposed direction take into account the Client’s timeline and the idea of the business value? 54 | 55 | ## Questions your client may ask 56 | 57 | 61 | 62 | 66 | 67 | 71 | 72 | 76 | 77 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /chapters/07-implementation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Implementation" 4 | chapter_number: "07" 5 | description: Implementation include way to prepare assets for a project on specific devices, how to properly name those assets, the way to answer questions that clients might ask and how to talk with developers. 6 | --- 7 | 8 | # Implementation 9 | 10 | ## Introduction 11 | **In this section you can learn** 12 | - How to prepare assets for a project on specific devices. 13 | - How to properly name assets. 14 | - How to answer questions that clients ask most frequently. 15 | - What questions to ask yourself before proceeding to the next design stage. 16 | 17 | Talk with the developer of the app before you start preparing assets. Developers have different ways of implementing the design. This is especially important with scalable assets such as backgrounds and interactive elements such as buttons. 18 | 19 | **Stakeholders:** 20 | - Designers 21 | - Client 22 | - Internal Developers 23 | - External Developers 24 | - Project Manager 25 | 26 | ## Tools for better asset production and management 27 | 28 | When it comes to preparing specifications for our developers, it is vital to generate precise and easy-to-use documentation. 29 | After a thorough research & comparing different types of software, we decided to implement [InVision Inspect](https://www.invisionapp.com/feature/inspect) as a default handover tool at Netguru. 30 | 31 | An alternative and free tool is [Sketch Measure](http://utom.design/measure/how-to.html). You can find a guide and download links on [this page](https://github.com/utom/sketch-measure). 32 | 33 | Besides the native Sketch solution, InVision Inspect, and the Sketch Measure plugin, you can also use other tools such as [Zeplin](https://zeplin.io/). 34 | 35 | Moreover, it is very important for us to generate a description of the logic and behaviour for some components using animated preview generated with a tool such as [Principle](http://principleformac.com) and [Framer](https://framer.com). 36 | 37 | **Optimization tools** 38 | 39 | Use optimization tools such as [Kraken](https://kraken.io/web-interface), [ImageOptim](https://imageoptim.com/mac) or [Optimage](http://getoptimage.com/). Photoshop and Sketch save a picture’s metadata by default and don’t use optimization algorithms that could make your picture look the same but take up less space. 40 | 41 | ## Asset naming convention 42 | 43 | You can create your own naming pattern for your app, but keep in mind the following: 44 | - The valid charset for naming resources is [a-z, _, 0–9], i.e., all lowercase characters, numbers, and underscore. 45 | - The first character of your asset name can be either an underscore _ or a lowercase letter, but it cannot be a number. 46 | - Do not use uppercase letters. Not even in extensions such as *.png* or *.jpg* 47 | - Use an underscore _ as separator wherever you want to “put a space” between two words because hyphen (-) and space are not allowed. 48 | - Asset names should be unique across the app’s screens. If you have two add buttons with different dimensions, you cannot name both as *add_icon.png*. Instead, you can create two different icons, e.g., *add_icon_small.png* and *add_icon_big.png* with all their density variants. 49 | - For iOS, name each asset according to this naming convention: _asset.png, asset@2x.png, asset@3x.png_ 50 | - For Android Devices, provide each asset with the same name _asset.png_ but dedicated folders. Desired folder structure: 51 | 52 | 53 | 54 | Set a naming convention for your design team – everyone should follow the same naming convention. To prevent misunderstandings, we recommend that you use a specific terminology for the different states of your elements, just as we do in CSS. Developers will know what you’re talking about without too much explanation. 55 | 56 | - **Default.** 57 | - **Hover.** The state of the element on a mouseover. 58 | - **Active.** The state of the element upon a button press. 59 | - **Focus.** The state of an element that is currently manipulated with the keyboard, or activated with the mouse (i.e., inputs, text areas). 60 | - **Visited.** The state of the links that have already been visited 61 | 62 | A good naming convention will look as follows: 63 | - *ic* as a prefix for all icons 64 | - *bg* as a prefix for all background assets 65 | - *selected* as a suffix for selected states 66 | - *pressed* as a suffix for pressed states and so on 67 | 68 | Examples: 69 | - *ic_asset_name* 70 | - *ic_asset_name_pressed* 71 | - *ic_asset_name_selected* 72 | - *ic_asset_name_disabled* 73 | - *ic_asset_name_activated* 74 | 75 | If you want to find out more, here’s an excellent article: [A Designers Guide for naming Android Assets](https://medium.com/@AkhilDad/a-designers-guide-for-naming-android-assets-f790359d11e5#.8gk28dx78). 76 | 77 | ## Android platform-specific tips 78 | 79 | In Android app development, it’s a good practice to support multiple screens. We advise you to start working on a 360x640 px canvas. Even if you’re making an app only for smartphones and only for the portrait mode, you have to deal with different screen densities. As a rule, all assets exported for Android need to be in the following densities and in a *.png* format: 80 | 81 | - mdpi:160 dpi 82 | - hdpi: 240 dpi 83 | - xhdpi: 320 dpi 84 | - xxhdpi: 490 dpi 85 | - xxxhdpi: 640 dpi 86 | 87 | **Tip:** Take a look at this precious piece of information: [how to organize files](https://gist.github.com/melvitax/fd592a162ad4fe48bd57). 88 | 89 | Also, in many cases, SVG images can act as a good replacement for bitmaps. Although they are not supported natively by Android, they can be easily displayed using third-party libraries. They take up much less space (especially the zipped version, *svgz*), scale indefinitely with no loss of detail or quality, and don’t require a separate version for each screen density. 90 | Just remember to ask the developer which way they want the assets to be delivered. 91 | 92 | **9-patch scaling for Android** 93 | 94 | 95 | 96 | If you have assets that are used more than once in your application and are scalable, you can use 9-patch scaling (e.g., for buttons). Things such as icons will probably not scale properly, so, unfortunately, you have to resize them manually for all the resolutions. The 9-patch guide is always 1 px thick and must be black (#000000); otherwise it won’t work. Your slice will always be 2 px bigger than the asset (1 px left and right and/or at the top and bottom). Thus, if your asset is 48x48 px, your slice will be 50x50 px. You can’t downscale 9-patch images, so you have to deliver them at the smallest size possible. This is also better for the overall performance of the application. You can use the Draw9Patch tool from Android to easily create or check your 9-patch images. For more specific information on 9-patch scaling and/or downloading the Draw9Patch tool, check the [Android Developers](http://developer.android.com/tools/help/draw9patch.html) website. You can also check [Simple nine-patch generator](https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example). 97 | 98 | Be sure that App icons and Play Store Assets are provided following [Google’s guidelines](https://support.google.com/googleplay/android-developer/answer/1078870?hl=en). 99 | 100 | ## iOS platform-specific 101 | 102 | You must supply high-resolution images for all the artwork in your app and all the devices your app supports. Depending on the device, you will accomplish this by multiplying the number of pixels in each image by a specific scale factor. We advise you to work on a @1x canvas size of 375x667 px (iPhone 6/7) and export upsized assets. 103 | 104 | To put it simply, all you need is to provide the developer with @1x, @2x, @3x assets. That’s it. You’re brilliant. 105 | 106 | Be sure that App icons and App store Assets will be in accordance with the App Store guidelines (see [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/) and [App Icons on iPhone, iPad and Apple Watch](https://developer.apple.com/library/content/qa/qa1686/_index.html)), also double-check that PNG files do not contain the alpha channel, because Apple will reject them otherwise. 107 | 108 | ## Questions your client may ask 109 | 110 | 114 | 115 | ### Questions to ask yourself at this stage 116 | 117 | - Has the naming of my assets been discussed and agreed with the developers? 118 | - Is my naming convention consistent? 119 | - Have I made platform-specific assets in all required sizes? 120 | - Am I sure developers have all they need? 121 | 122 | ## Desired outcomes after this stage 123 | 124 | A set of assets covering all the designs for all target devices is complete. 125 | 126 | ## Additional reading 127 | - [Better Android workflows with Sketch](https://medium.com/@lmindler/using-sketch-3-and-a-bit-of-fairy-dust-for-a-better-android-workflow-f667d0048855#.lgpmpu10m) 128 | - [Design like a Developer](https://medium.com/going-your-way-anyway/design-like-a-developer-b92f7a8f4520#.1ynw77olc) 129 | - [Why should you use Material Design](https://www.netguru.co/blog/why-should-you-use-material-design) 130 | -------------------------------------------------------------------------------- /chapters/02-discovery.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Discovery" 4 | chapter_number: "02" 5 | description: description 6 | --- 7 | 8 | # Discovery 9 | ## Introduction 10 | This is the stage where many questions will arise, and conducting thorough research will help answer most of them early as well as bring benefits in the later stages. Not only will research save your time, but it will also give a deep insight into and a better understanding of the product’s specifics. The client, on the other hand, will benefit from the research too, because challenging the client with the right questions helps them crystallize their vision and may lead to some substantial changes. 11 | 12 | Research takes time and can cost money, but in the grand scheme of things it will save time and money by helping to focus on the direction of the design process. It also helps you justify to your client the communication solutions you put forward. **Remember that all research must be carefully documented and information sources need to be saved and made available for future reference.** 13 | 14 | ## When to run research 15 | When the product is new. 16 | When there is a lack of understanding of the business model, product value, market and users in the existing product. 17 | After gathering as many insights as possible from the client during the first Strategy Stage during which you asked specific questions. The sample questions are listed in Chapter 1. 18 | When you want to verify if your solution meets the user’s needs. 19 | 20 | ## How to run research 21 | At this stage you run through the research methods on which you agreed with the client. 22 | 23 | ### Research methods 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
A/B testingA/B testing is an experiment where a researcher test two variants of the project, A and B, to see which one performs or converts better. It's widely used as a marketing tool to test a number of variations of a campaign on a split audience. Version A is shown to one half of the audience and version B to another. You can also use this technique while conducting usability tests to check which of your designs suits your users better.
BenchmarkingBenchmarking is the practice of comparing competition and industry standards to know all the best practices from other companies. It can be also an inspiring collection of interfaces, websites, mobile apps, products, and software that will be helpful when creating your own solution.
Competitor analysisIn marketing and strategic management, competitor analysis is the process of finding strength and weaknesses of present and future competitors.
Concept testingConcept testing is the process of using surveys (and sometimes qualitative methods) to evaluate consumer acceptance of a new product idea before it is introduced to the market. It's important not to confuse this type of testing with advertising or brand testing. This methodology focuses on the basic product idea and allows researchers to gather all necessary insights to evaluate and ideate the business concept.
Customer feedbackCustomer feedback is a research process of gathering all the information provided by your company's clients. Whether they are satisfied or not with your product or service, their opinion could improve the overall customer experience and help you adjust your solution to their needs.
Desk researchOr “secondary research” (as opposed to primary research) is all about gathering useful information from studies that have already been done by others.
Diary StudyDiary study relies on a so-called diary, or a set of more or less structured questions related to the subject of the study which the respondent responds regularly for quite a long time (about a week or more). They enable you to learn about the users’ habits and everyday activities. Respondents can write down their behaviours, activities, motivators, reflexes, emotions, dreams, frustrations or failures. Thanks to this, it is possible to become more familiar with a selected research problem.
Email surveysEmail surveys are one of the most popular methods of gathering all customer feedback. It's usually achieved by inserting a survey link into an email and distributing it to your respondents' database. Respondents can then simply complete the survey at their own pace.
Ethnographic researchEthnographic Research, or Contextual Inquiry is a qualitative method of user research which is performed by observing users in their natural environment while they perform activities that the researcher is interested in. The observation is followed up by a semi-structured user interview.
EyetrackingEyetracking examines the visual perception of interfaces using the registration of eye movements of respondents. Thanks to eyetracking, you can learn not only where the user is looking, but also in what order and for how long his eyesight focuses on individual elements of the interface, as well as to which screen elements the user does not pay attention.
Focus groups (FGI)Focus Group Interviews are characterized by the group nature of the conversation. Several people take part in the interview, not one, as in ordinary in-depth interviews (IDI). There is an element of group dynamics that significantly affects research conclusions, both in a positive and a negative sense. The second important element is to focus these studies on one issue, as the name itself suggests.
Google AnalyticsGoogle Analytics is a free web analytics service that provides statistics and basic analytical tools for search engine optimisation, marketing, and research purposes.
HotjarHotjar is a new powerful tool that reveals the online behaviour and voice of your users.
In Depth Interview (IDI)IDI is an individual in-depth interview, that is an interview between a researcher and a respondent. IDI is one of the types of qualitative research.
Intercept surveysIntercept surveys are surveys that are handled in-person, generally in a public place. For instance, interviewers might approach clients leaving a restaurant and ask to interview them about their experiences. Interviewers might ask questions or simply explain the project and give the questionnaire to the respondent to fill out.
Mouse Tracking & click trackingThis method is used to learn patterns of users' behaviour on the site or to discover places on the screen that are unnecessarily clickable or even the opposite, ignored by users. Users’ movements are represented on many visualizations, such as heat maps showing the aggregation of all user mouse movements or clicks, or a heat map showing the percentage of people who scrolled the page to the very end. Additional video recordings of mouse movements are a substitute for tests with users, but they might not be enough to get a full picture.
Product ReviewA Product Review is a comprehensive analysis carried out based on selected User Experience and Usability research methods.
Service safariIt can be defined as the quantitative version of an In-Depth Interview. Surveys count results: how many people do this vs. that. Surveys follow standard methods for randomly selecting a large number of participants (from a target group) and use statistical analysis to ensure that the results are statistically significant and representative for the whole population. As surveys have numerical outcomes, it’s necessary to use close-ended questions.
Tree testingTree testing is a usability technique for evaluating the information architecture of your site or app. It's the follow-up methodology after creating a card-based classification of the site map. Tree testing is usually done on a simplified text version of the site structure. Through tasks prepared for users, this technique allows you to improve the information architecture and get insights about properly placing elements.
True-intent studiesIntent studies should answer questions such as: who's visiting your site, why your users come, what do they like or dislike, etc. Gathering all answers can be a powerful insight to help empathize with users and understand their needs.
Usability testingUser testing happens in front of a focus group which provides serious feedback on what they clicked on, and why. So in order to perform real user testing you need to recruit potential users that belong to a specific target and reflect personas. Usability testing checks the usability of the interface itself.
113 | 114 | ## Questions to ask yourself at this stage 115 | - Has all the necessary research been conducted? 116 | - Have the assumptions been defined well enough? 117 | - Have the assumptions been verified with end users? 118 | - Do I understand the business? 119 | - Do I understand the business goals? 120 | - Do I understand the users? 121 | - Do I understand the users’ goals? 122 | - Do I understand the market? 123 | - Do I understand the product, product value, and its features? 124 | 125 | ## Questions your client may ask 126 | 127 | 131 | 132 | 136 | 140 | 144 | -------------------------------------------------------------------------------- /chapters/04-wireframing.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Wireframing" 4 | chapter_number: "04" 5 | description: Learn the definition of wireframing and the things a client should understand. Learn what element should be included in a wireframe and learn best practices. 6 | --- 7 | 8 | # Wireframing 9 | 10 | ## Introduction 11 | **In this section you will learn** 12 | - The definition of wireframing and the things a client should understand. 13 | - What elements to include in a wireframe. 14 | - Best practices – DOs and DON’Ts of wireframing. 15 | 16 | ### Stakeholders 17 | - Designer 18 | - Client 19 | - QA 20 | 21 | As Product Designers, we should never skip the wireframing stage. The wireframing stage is the bridge between researching and designing visuals. It lets us test-drive ideas and iterate quickly from early on in the project. Not only does it save us a lot of time that would have otherwise been wasted on neverending adjustments, but it also makes our process more robust, our vision clearer and our rationale more valid. As a result, the final design becomes truly meaningful and valuable to the client. The outcome of this phase is usually a set of user flows and wireframes. 22 | 23 | ### Benefits of wireframing for the client 24 | - Allows for fast prototyping. 25 | - Allows clients to test ideas early. 26 | - Allows us to eliminate errors and problems early. 27 | - The client will know their product, users’ needs and behavioral patterns better. 28 | 29 | ### Benefits for the team 30 | - Wireframes will often help to discover new requirements and questions that may not have been considered by the project team. 31 | - Developers will know how the website/application will work before designers provide them with final designs. 32 | - Opportunity to gather feedback and test how the product will work before proceeding to the design phase. 33 | 34 | ## What is a wireframe? 35 | A wireframe is a basic visual interface guide that outlines the structure of an interface and the relationships between its pages. A wireframe serves as a blueprint that defines a project’s structure, content, and functionality. Wireframes are created before any visual design work starts so that the focus is on the information architecture without the distraction of color or visual elements. 36 | 37 | ## What is included in the wireframing phase? 38 | The wireframing phase can be divided into 2 subphases: 39 | 40 | ### User Flow diagrams 41 | User Flow diagrams (also known as flowcharts) are a visual representation of a desired user journey path through the designed product. They illustrate the steps, decisions, and funnels users frequently come across. Thoughtfully crafted User Flow Diagrams let you reveal the moments critical for user conversion and then apply adequate solutions to the obstacles you identify. For an example of a user flow diagram [visit](https://drive.google.com/a/netguru.pl/file/d/0B__Yya_9jbd2SFRaeU54OS1LMGc/view?usp=sharing) and to check out flowchart click [this link](https://drive.google.com/a/netguru.pl/file/d/0B__Yya_9jbd2cHVmWUhISUFUdk0/view?usp=sharing). 42 | 43 | ### Single-page wireframes 44 | Single-page wireframes (also known as page schematics or screen blueprints) are a visual guide to a page's structure, composition, and information hierarchy. Their purpose is to arrange the elements of a website’s content in an informed, user-friendly and business-effective manner. As their main focus lies in the functionality unobstructed by flashy visuals, they need to be stripped of all elements of visual language such as colors, infographics, effects, etc. Have a look at an example of [a single-page wireframe](https://netguru.invisionapp.com/share/HZADD9DD8#/screens/218094218). 45 | 46 | ## What elements should I include in a wireframe? 47 | 48 | ### List of elements 49 | Wireframes should include all the important elements of a product: 50 | - navigation, 51 | - the company's logo (if it exists), 52 | - content area sections + sample content (placeholder text), 53 | - calls to action, 54 | - widgets, 55 | - fields, 56 | - forms, 57 | - pop-ups, 58 | - hover states (if applicable). 59 | 60 | ### What kind of software should I use for designing wireframes? 61 | At Netguru, we use: 62 | - Sketch for wireframes. 63 | - InVision for quick prototyping. 64 | 65 | ## Wireframing Best Practices 66 | 67 | ### DOs and DON'Ts 68 | The main purpose of wireframing is to create a visual representation of ideas to support conversations, iterations, and rapid ideation. Below is a list of best practices we truly believe in at Netguru: 69 | 70 | 81 | 82 | 94 | 95 | 107 | 108 | 119 | 120 | 132 | 133 | 142 | 143 | 152 | 153 | 162 | 163 | 172 | 173 | 184 | 185 | ## Questions your client may ask 186 | 187 | 193 | 194 | 198 | 199 | 203 | 204 | ### Questions to ask yourself at this stage 205 | - Are user flows complete? 206 | - Are wireframes available on InVision? 207 | - Are wireframes clickable? 208 | - Do wireframes follow our best practices? 209 | -- Use of real content 210 | -- Focused on information architecture 211 | -- Wireframe is ready to be reused in the visual design phase 212 | - Has feedback been gathered? 213 | 214 | ## Desired outcomes of this stage 215 | 216 | 1. Clickable wireframe of low or high fidelity (preferably high-fidelity) 217 | 2. User flows covering jobs to be done/user stories 218 | 3. Usage of real content included 219 | 4. Designed test scenarios for wireframes 220 | 5. Wireframes tested and accepted by the client – ready to use in the visual design stage 221 | 222 | ## Additional reading 223 | - [Improve Your Online Store UX With These Handy Tips](https://www.netguru.co/blog/ecommerce-ux-tips) 224 | - [How to get value from wireframes](https://medium.com/@dustin/how-to-get-value-from-wireframes-f40c2cf27960#.2yuoqqwmz) 225 | - [Wireframes: A Good Communication Tool, a Poor Design Tool](https://medium.com/@danritz/wireframes-a-good-communication-tool-a-poor-design-tool-1bc64b033962#.jp1i8lyxt) 226 | - [The product design sprint: decide (day 3)](https://library.gv.com/the-product-design-sprint-decide-day-3-7d4804bd2fd1#.fhdrt1bfx) 227 | - [Choosing the Right Level of Fidelity for Your Wireframes](https://blinkux.com/blog/choosing-the-right-level-of-fidelity-for-your-wireframes/) 228 | - [InVision User testing ](http://blog.invisionapp.com/invision-usertesting/) 229 | - [How NOT To Design An Interface For Your Mobile App](https://www.netguru.co/blog/how-not-to-design-an-interface-for-your-mobile-app) 230 | -------------------------------------------------------------------------------- /chapters/05-testing.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Testing" 4 | chapter_number: "05" 5 | description: Testing is important part of design process. You will learn when to test wireframes and designs and what tests should be used in specific situations. 6 | --- 7 | 8 | # Testing 9 | 10 | ## Introduction 11 | **In this section, you will learn** 12 | - When to test wireframes or designs. 13 | - What tests to use in specific situations. 14 | - Tips for testing designs. 15 | - Questions most frequently asked by clients. 16 | 17 | 21 | 22 | You can test just about anything in a digital product: design solutions, code, performance, forms, buttons, etc. In this article, we will focus on design only. We are working in the Agile Scrum methodology, in which **testing is part and parcel of every sprint**. That’s why each design team needs to include a dedicated QA specialist, who is responsible for testing. 23 | Every iteration you make on your design should be tested. The primary stages of the design process, which you can see below, should involve testing methods that are adequate to the project’s scope and the stage you are in. 24 | 25 | ## Benefits of testing 26 | **For the client** 27 | - Minimize the risk of the product’s failure – when it’s in users’ hands, it must work as intended. 28 | - Be more confident and calm upon the product’s launch. 29 | - Save money on fixing bugs and flaws after the product is launched. 30 | - Save money on customer service; otherwise, users would ask for help after not being able to accomplish what they set out to do. 31 | - Get to know your customers, their behavior, needs, and preferences. 32 | 33 | **For Designers** 34 | - Even a team of skilled designers won’t spot all the points where real users may get stuck when using the product. 35 | - People not involved in creating the product will give the most valuable feedback because they will have a fresh view. 36 | - Avoid the embarrassing moment when you have to admit that you made a mistake in front of the client. 37 | - When designing, be sure you are not going in a wrong direction for too long, because bugs and flaws can escalate quickly. 38 | - You will make a positive impression on the client when you recommend testing and give strong arguments about it. 39 | 40 | **Stakeholders** 41 | - QA 42 | - Designer 43 | - PM 44 | - Developers 45 | 46 | ## When to test 47 | ### Tests after wireframing 48 | 49 | **Participants**: PD, QA, users 50 | **Goal**: Test the UX. Wireframes are focused on high-level design decisions such as user experience, user flow, and information architecture. So, before you go to the next stage – the visual design – you will need to test these elements. In small projects, you can test the UX and the UI at the same time in the next stage. 51 | **Tools**: design bug bash, user testing within your organization, guerrilla usability testing. 52 | 53 | ### Tests after design 54 | **Participants**: PD, QA, users 55 | **Goal**: Test the UI. Visual design is focused on more specific design solutions such as UI elements, colors, shapes, and interactions. Assuming you ran tests after the wireframing, you need to test these elements now. 56 | **Tools**: design bug bash (link), user testing within your organization or with outside testers, guerrilla usability testing. 57 | 58 | ### Tests after implementation 59 | **Participants**: PD, QA, users 60 | **Goal**: Analyze user behavior to make sure customers use the product the way it was designed and if the client’s goals are met. 61 | **Tools**: heatmaps, A/B tests, user testing within your organization or with outside testers, analytics. 62 | 63 | ## Tools and techniques for testing 64 | **Feedback from the team (e.g., delivered in a Slack channel)** 65 | - **Time:**
66 | 15 minutes 67 | - **When?**
68 | After wireframing and after design. 69 | - **Why?**
70 | This is the very first step, and the easiest one you can take, to validate your design at any stage. 71 | - **How?**
72 | Just share your design with others, preferably with a question – what you need to have validated/tested or what you would like to get people’s opinion about.
73 | Deliverables: Others should leave comments on the design you've shared (e.g., on InVision). 74 | 75 | **[Design bug bash](https://www.netguru.co/blog/tips-for-a-bountiful-bug-bash-netguru-qa-flow)** 76 | - **Time**
77 | Up to 1h 78 | - **When?**
79 | After wireframing and after design. 80 | - **Why?**
81 | As you progress with the design, it gets more and more complex, you lose your fresh view, and help from other people becomes necessary. 82 | - **How?**
83 | Arrange a 30- to 60-minute-long design bug bash that will include at least three QA specialists: the project’s QA specialist and two QA specialists not involved in the project. It should also include a PD. Also nice to have: a PM, a front-end developer, other project team members.
84 | Your QA specialist will lead the bug bash. In the beginning, you can tell others what the project is about, and who the typical users will be. Explain what tasks you want to have accomplished by participants but don’t explain any design solutions beforehand. Everyone should go through the whole prototype, performing tasks given by the PD individually. 85 | Deliverables: Any bugs/doubts should be taken note of by their finder as, for example, InVision comments. 86 | 87 | **[Guerrilla Usability Testing](https://userbrain.net/blog/7-step-guide-guerrilla-usability-testing-diy-usability-testing-method)** 88 | - **Time**
89 | Up to 2h 90 | - **When?**
91 | After wireframing and after design. 92 | - **Why?**
93 | This is the most casual version of user testing. The main goal of guerrilla testing is to find errors and fix them as quickly as possible. Guerilla testing is about finding and fixing the most severe problems, not agonizing over every possible obstacle a user might encounter. 94 | - **How?**
95 | You will need from 3 to 5 participants – they can be your colleagues, friends or family. Steps of the process: 96 | 1. Come up with a list of tasks. 97 | 2. Prioritize tasks and decide which to test. 98 | 3. Turn your tasks into scenarios. 99 | 4. Combine all scenarios. 100 | 5. Start guerrilla testing. 101 | 6. Capture the insights from the guerrilla testing. 102 | 7. Fix your usability problems. Deliverables: Write down the top 3 usability problems or capture the task completion in a table. See detailed instructions [here](https://userbrain.net/blog/7-step-guide-guerrilla-usability-testing-diy-usability-testing-method). 103 | 104 | **[User testing: moderated](https://www.uxpin.com/studio/blog/moderated-vs-unmoderated-usability-testing-better/)** 105 | - **Time**
106 | At least 3h 107 | - **When?** 108 | - After design, after implementation 109 | - Incomplete or buggy interfaces – MVPs, early-stage prototypes, low fidelity prototypes, or parts of the app that need a really direct and clear explanation 110 | - Very complex interfaces – To make app learning process shorter/smoother 111 | - Mature product – Product needs a test of particular functionalities 112 | - Security concerns – If you’re testing a product with access to data that you don’t want to become public, a moderator will keep the user where they belong 113 | - An existing product that needs to be redesigned 114 | - **Why?**
115 | You need a reliable and objective test of your design (it must be something that your internal team or design-oriented bug bash can’t deliver) and of the existing product. The test should require a specific target/personas. 116 | - **How?** 117 | - Use a specialized agency. 118 | - In person: give a user a task and assist him/her through the test. Ask questions, guide, and explain if necessary.
Deliverables 119 | - Detailed report 120 | - Attachments (recordings, etc.) 121 | 122 | **[User testing: unmoderated](https://www.uxpin.com/studio/blog/moderated-vs-unmoderated-usability-testing-better/)** 123 | - **Products:**
[Userzoom](http://www.userzoom.com/remote-usability-testing/), [AppSee](https://www.appsee.com/features/user-recordings), [UserTesting](https://www.usertesting.com/plans) 124 | - **Time**
125 | At least 3h 126 | - **When?** 127 | - After design and after implementation. 128 | - MVPs – you need to test and validate early-stage products. 129 | - Low budget – the client has no budget for other kinds of testing. 130 | - No time – No time to run a moderated user test. Unmoderated tests can be done virtually anywhere at any time by anyone who meets your criteria. 131 | - An existing product that needs a redesign. 132 | - **Why?**
133 | You need a reliable and objective test of your design (it must be something that your internal team or design-oriented bug bash can’t deliver) and of the existing product. The test should require a specific target/personas. 134 | - **How?** 135 | - Use third-party tools. 136 | - Personally: give the user a task and leave him/her alone while a camera is recording.
137 | Deliverables: A video recording summarized in a report 138 | 139 | **A/B testing** 140 | - **Products:**
141 | [Qubit](http://www.qubit.com), [VWO](https://vwo.com/) 142 | - **When?**
143 | After implementation. 144 | - **Why?**
145 | A/B testing allows you to make more out of your existing traffic. While the cost of acquiring paid traffic can be substantial, the cost of increasing your conversions is minimal. The Return On Investment on A/B testing can be massive because even small changes on a landing page or website can result in significant increases in generated leads, sales, and revenue. 146 | - **What can you test?** 147 | - Headings 148 | - Subheadings 149 | - Paragraph text 150 | - Testimonials 151 | - Call to Action text 152 | - Call to Action button 153 | - Links 154 | - Images 155 | - Content near the fold 156 | - Social proofs 157 | - Media mentions 158 | - Awards and badges
159 | - Advanced tests can include pricing structures, sales promotions, free trial lengths, navigation and UX experience, free or paid delivery, and more.
160 | - **Links:** 161 | - To learn about A/B, visit these links [link](http://unbounce.com/landing-page-articles/what-is-ab-testing/), [link](https://vwo.com/ab-testing/) & [link](https://www.optimizely.com/ab-testing/). 162 | - Learn how to bust these 7 A/B testing myths by Kissmetrics [link](https://blog.kissmetrics.com/ab-testing-myths/). 163 | - The ultimate guide to A/B Testing by Smashing Magazine [link](https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/). 164 | - Learn about most important A/B Testing checklist by HubSpot [link](https://blog.hubspot.com/marketing/a-b-test-checklist#sm.00001z5neov22f9pvdk194oo5d7tq). 165 | - **How?**
166 | The correct way to run an A/B testing experiment is to follow a scientific experimental process. It includes the following steps: 167 | 1. **Study your Website Data:** Use a website analytics tool such as Google Analytics and find the problem areas in your conversion funnel. For example, you can identify the bottleneck pages with bad metrics. 168 | 2. **Observe User Behavior:** Utilize visitor behavior analysis tools and find out what is stopping the visitors from converting. For example, “The CTA button is not prominent on the home page." 169 | 3. **Construct a Hypothesis:** Per the insights from visitor behavior analysis tools, build a hypothesis aimed at increasing conversions. For example, “increasing the size of the CTA button will make it more prominent and will increase conversions.” 170 | 4. **Test your Hypothesis:** Create a variation per your hypothesis and A/B test it against the original page. For example, “A/B test your original homepage against a version that has a larger CTA button.” Calculate the test duration with respect to the number of your monthly visitors, current conversion rate, and the expected change in the conversion rate. 171 | 5. **Analyze Test Data and Draw Conclusions:** Analyze the A/B test results and see which variation delivered the highest conversion. If there is a clear winner among the variations, go ahead with its implementation. If the test remains inconclusive, go back to step number three and rework your hypothesis. 172 | 6. **Report results to all concerned:** Let others in Marketing, IT, and UI/UX know of the test results and the insights generated. 173 | 174 | **Heatmaps** 175 | - **Products:**
176 | [Crazy egg](https://www.crazyegg.com/), [Hotjar](https://www.hotjar.com/) 177 | - **When?**
178 | After implementation. 179 | - **Why?**
180 | Heatmaps are great for analyzing your visitors’ behavior. They can bring insights you wouldn't have found using other methods, and, consequently, they can greatly increase your conversion rate.
181 | Rather than showing raw statistics, it works by using different colors to indicate such things as: 182 | - Mouse movement: where the mouse moved (using mouse-tracking). 183 | - Click tracking: where the actual click occurred. 184 | - Scroll tracking: how far down the page the visitor scrolled. 185 | - Eye tracking: where people are most likely to focus upon the first viewing of an image.
186 | - What’s more, a heatmap can be incredibly helpful in improving the clickability of your images. It will let you know what people look at and what details they miss. From there, you can adjust, remove, and add whatever you need to increase the effectiveness of each image used.
187 | - **Links:** 188 | - Learn about 8 heatmap tests that reveal visitors’ behavior [here](https://www.hotjar.com/heatmaps) (by Hotjar). 189 | - Learn how to use heatmaps to increase conversions [here](https://adespresso.com/academy/blog/the-ultimate-guide-for-using-heat-maps-to-increase-conversions/) (by Dan Virgillito from AdEspresso). 190 | - Look at a practical guide how to increase conversions by using heatmaps [here](https://vwo.com/blog/increase-conversions-using-heatmaps/) and [here](https://mouseflow.com/blog/2016/10/how-to-boost-your-conversion-rate-and-lower-your-bounce-rate-with-heatmaps/). 191 | - **How?**
192 | You can use Hotjar to generate heatmaps of any page on your site, including password-protected pages and dynamically generated pages. 193 | To learn about the different types of heatmaps (Click and Tap, Move, Scroll) visit this [link](https://docs.hotjar.com/docs/types-of-heatmaps#section-scroll-heatmaps) 194 | 195 | [**Analytics**](https://blog.kissmetrics.com/expert-google-analytics-reports/) 196 | - **Products:**
197 | [Google Analytics](https://analytics.google.com), [Woopra](https://www.woopra.com/), [Intercom](https://www.intercom.com/) 198 | - **When?**
199 | After implementation. 200 | - **Why?**
201 | Analyze the traffic and users’ behavior on a website or mobile app. You can also measure the conversion rates by setting goals. 202 | - **How?**
203 | Ask your developer to install Google Analytics (GA).
204 | You can analyze many different statistics in GA: live traffic, bounce rate, time spent on a page, how users found your page, and a lot more.
205 | Typical reports in GA: 206 | - Device/Browser Report 207 | - Visitor Acquisition Efficiency Analysis Report 208 | - Customer Behavior Report 209 | - Mobile Performance Report 210 | - Site Diagnostics: Page Timing Report 211 | - Hours & Days Report 212 | - Referring Sites Report 213 | - Content Efficiency Report 214 | - Traffic Acquisition from Social Media Report 215 | 216 | [**Beta testing**](https://www.playtestcloud.com/blog/testflight-alternatives-ios-android) 217 | - **Products:** 218 |
[TestFlight](https://developer.apple.com/testflight/), [HockeyApp](https://hockeyapp.net/), [Google Play Beta Testing](https://play.google.com/apps/publish/signup/), [Fabric.io](https://get.fabric.io/) 219 | - **When?**
220 | After implementation and before official launch. 221 | - **Why?**
222 | You have your product ready and working, but before the official release, you should test it on a small sample to collect feedback and spot any remaining bugs. 223 | - **How?**
224 | Beta testing is mostly done by developers and is especially useful for mobile apps testing, but it can be applied to any digital product. You can take advantage of usage metrics that are available in tools such as HockeyApp, and users can give feedback directly in the app.The smart approach to selecting your audience is to use [focus groups](https://en.wikipedia.org/wiki/Focus_group), which work as small, representative, scaled-down groups of your future customer base. 225 | 226 | ## Tips for testing your designs 227 | - It’s wise to build prototypes and test as early and as often as possible to fix the major issues before you even move the project to the next stage. 228 | - You just need between 3 and 5 people to spot the most significant usability issues. 229 | - It’s often better to test the product with new participants without any knowledge about you and your product. 230 | - Don’t try to capture your insights (write them down, talk to yourself, etc.) while testing on real users – it makes them nervous. 231 | - You don’t want to bias your users during the test. You want to see how they figure out things for themselves, or how they don’t figure them out. In real life, you wouldn’t sit next to them while they would be using your product. 232 | 233 | ## Questions your client may ask 234 | 238 | 239 | 243 | 244 | 248 | 249 | 253 | 254 | 258 | 259 | **Questions to ask yourself at this stage** 260 | - Have I collected feedback among the team? 261 | - Is the mockup clickable? 262 | - Was a design bug-bash conducted? 263 | - Were tests conducted after the wireframe phase? 264 | - Was a test conducted after the visual design phase? 265 | - After the implementation, were Google Analytics installed, at least? (Y/N) 266 | 267 | ## Desired outcomes of this stage 268 | 1. Wireframes or designs tested using appropriate techniques. 269 | 2. Feedback collected and implemented. 270 | 271 | ## Additional reading 272 | - [How to Improve Your UI with Remote Usability Testing](https://www.netguru.co/blog/improve-ui-remote-usability-testing) 273 | -------------------------------------------------------------------------------- /chapters/06-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Design" 4 | chapter_number: "06" 5 | description: Design process means to give a function and solve a problem with a set of available resources. In this chapter you will learn where to look for inspiration, about specific design states and some tips and best practices for designing and working in teams. 6 | --- 7 | 8 | # Design 9 | 10 | ## Introduction 11 | **In this section, you will learn** 12 | - Where to look for inspiration 13 | - How to collect inspirations and prepare moodboards 14 | - How to prepare style guides 15 | - Specific design states and how to prepare one 16 | - Tips for designing for specific devices 17 | - Best practices for working in teams 18 | - Where to find design resources 19 | - Sketch tips 20 | 21 | We design something to give a form to a function and to solve a problem with a set of available resources. Good design is solving a problem so that it seems as if there had never been a problem in the first place. Well designed interfaces, communication processes, or objects shouldn’t require too much effort from their users. Good design often makes you think: Gosh, I could have done that myself!
22 | And yes, well-designed things are often a pleasure to look at or experience. In some cases, the form will precede the function. 23 | 24 | **Stakeholders** 25 | - Designer 26 | - Client 27 | - QA 28 | - Developers 29 | - PM 30 | 31 | ## Inspiration 32 | **Find an accurate style for the project**
33 | Remember that the inspiration process is critical when you start designing a new project. The overall feeling of an application/website depends on the colors, fonts, or photos you use. **Remember: Do not copy, just get inspired!** 34 | 35 | You can look for inspiration here: 36 | - [Awwwards](http://www.awwwards.com) 37 | - [Dribbble](http://www.dribbble.com) 38 | - [Behance](http://www.behance.com) 39 | - [Designspiration](http://www.designspiration.net) 40 | - [Pinterest](http://www.pinterest.com) 41 | 42 | ### Preparing moodboards 43 | This step is essential for you and your client. There will, of course, be situations when you finish your design, and the client is thrilled – but this will not always be the case. We recommend that you prepare a board with a lot of photos and pictures that will show to your client what you would like to do with the future app, what “feelings” your designs will evoke, and finally, what the client can expect. Thanks to this approach, you will increase the chances that the client likes your solutions, and you will show that you appreciate the client’s feedback. **Approximate time: 4h.** Visit [this link](https://netguru.invisionapp.com/boards/3M37AJO452DFW/) to see an example of a moodboard. 44 | 45 | **How to prepare a moodboard?**
46 | We use Boards by InVision for the following reasons: 47 | - Flexibility 48 | - Predefined layouts 49 | - Option to add images, fonts, and attachments 50 | 51 | Of course, feel free to choose your own tool! 52 | 53 | ## Style guide 54 | It’s good to start creating a style guide right after the research stage. The initial version of the style guide should at least contain the colors and typography. During the visual design phase, you should update your style guide to a full version. 55 | 56 | **What should a good style guide contain?** 57 | - **Color** (the main colors and shade variations for each of them)
58 | Useful tools: [Coolors](https://coolors.co/app), [Color Adobe](https://color.adobe.com/explore/?filter=most-popular&time=all) 59 | - **Typography** (font family and type scale)
60 | Limit the number of typefaces and sizes you use in order to keep your designs simple. As a general rule of thumb, start with two fonts at most – one for your headers, and another one for your bodies. Most of the time, you won’t need any more than that.
61 | We highly recommend using free fonts. If you want to use a paid font, check the licence carefully. Your client might be reluctant to pay extra money for fonts, so make sure they do want to spend money on fonts.
62 | Free fonts: [Google Fonts](https://fonts.google.com/)
63 | Paid fonts: [MyFonts](http://www.myfonts.com/) and [Typekit](https://typekit.com/)
64 | Having troubles with pairing fonts? Try [Typewolf](https://www.typewolf.com/) or [FontPairs](https://fontpair.co/)
65 | - **Component library** (states of design)
66 | Component-based thinking helps engineers. Design components can translate neatly into code. From the engineering perspective, components are like Lego blocks that you can put together.
67 | For example: 68 | - Buttons (normal, hover, active, disabled) 69 | - Inputs (empty, selected, typing, error, success) 70 | - **Grids and spacing**
71 | It’s important to establish a grid system that works for every use case. In the section on grids, include information on the number of columns and rows, margins, and example uses. 72 | - [8pt grid system](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632#.bipuod98k) 73 | - [Bootstrap grid](https://medium.com/@petehouston/setup-twitter-bootstrap-grid-in-sketch-f6e69eab95c2#.svi9r5wlj) 74 | 75 | ## States of design 76 | During the design process, you have to keep in mind that your UI can be in different states: 77 | 78 | **1. Nothing** 79 | 80 | Maybe it’s the first time a user sees a view, interface element, or status. Maybe it hasn't been activated yet. Essentially, the component exists but hasn’t started working yet. 81 | 82 | **2. Loading** 83 | 84 | The dreaded state. In a perfect world, no one would ever see this. Alas, here we find ourselves. There are plenty of ways to keep your loading state subtle and unobtrusive. 85 | 86 | **3. None** 87 | 88 | Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this!”), or to reward them (“Good job, everything has been taken care of”). 89 | 90 | **4. One** 91 | 92 | You have some data. On input, this might come after the first keystroke. In a list, it might be when you have one item (or only one item left). 93 | 94 | **5. Some** 95 | 96 | This is usually what you think of first. What is the ideal state for this component? Your data is loaded, you have input, and the user is familiar with it. 97 | 98 | **6. Too many** 99 | 100 | The user has overdone it in some way. Too many results (maybe you paginate them now), too many characters (maybe ellipses?), and so on. 101 | 102 | **7. Incorrect** 103 | 104 | Something is not right about the component. An error has occurred. 105 | 106 | **8. Correct** 107 | 108 | This item has had its requirements satisfied. 109 | 110 | **9. Done** 111 | 112 | The user’s correct input has been received by the application. The user doesn’t have to worry about it anymore. 113 | 114 | These states will recur based on the page, user interaction, updated data, and pretty much any change to your application’s state. By thoughtfully designing these changes, you can create a polished experience for users no matter which situation they find themselves in. 115 | 116 | ## Designing specifics for native mobile apps 117 | If you are only starting to design native apps, the best thing to do is to read the official guidelines for the Android (Material Design) and iOS (Human Interface Guidelines) operating systems. 118 | 119 | **Android devices** 120 | [Material Design Guidelines](https://material.io/guidelines/) 121 | 122 | **Apple’s iPhones** 123 | [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/) 124 | 125 | ### Designing for gestures in general 126 | Use [the most popular gestures](https://blogs.adobe.com/creativecloud/in-app-gestures-and-mobile-app-user-experience/) to make application even more interactive. Remember that when using your phone, there is no “right click” as would be the case with browsing websites on a computer. Try to put the most popular and intuitive gestures in areas where users might expect them. 127 | 128 | **Mobile app interactions matter**
129 | Read: [Microinteractions: The Secret of Great App Design](https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf)
130 | 131 | ## Designing in Teams: Best Practices 132 | 133 | 145 | 146 | 156 | 157 | 169 | 170 | 181 | 182 | 196 | 197 | 207 | 208 | 219 | 220 | 232 | 233 | ## Nice-to-haves when designing 234 | 235 | ### Prepare interactive designs 236 | If there is enough time, try to search for ready transitions between the elements of your designed interface. This will greatly enhance the experience of users, as animations in your project can do magic. To prepare such interactions, you can use: 237 | 1. **Principle.** Use _Principle_ when you need to animate interface elements, especially in a multi-screen project; the built-in transitions and element-based animations will help create quick and easily clickable prototypes. _Principle_ should be your go-to tool if: 238 | - you need to build a quick prototype to check if a UI solution works; 239 | - you want to make sure the developer knows how to code the interaction; 240 | - you want to enrich the experience by creating meaningful animations; 241 | - you want to showcase your design on social media. 242 | 2. **Adobe After Effects.** _AE_ is a true workhorse – it can do almost everything related to animation. While versatile and powerful, _After Effects_ could be better when it comes to working with Sketch files. _AE_ also won’t allow you to test your interactions on a prototype. _After Effects_ is your go-to tool if: 243 | - you need custom transitions or animation effects; 244 | - you need to use perspective or other video effects; 245 | - you want to animate icons and illustrations. 246 | 247 | ### Craft your own icons 248 | If there is enough time, you can create your own icon set. We use _Nucleo_ for our designs, but creating your own icons will add a more individual feeling to the application. 249 | 250 | ## Resources 251 | 252 | ### Icons 253 | - [Nucleo](https://nucleoapp.com/), [FlatIcon](https://www.flaticon.com/), [IconFinder](https://www.iconfinder.com/) 254 | 255 | ### Stock Images 256 | - Paid: [iStockPhoto](http://www.istockphoto.com/), [ShutterStock](https://www.shutterstock.com/), [GettyImages](http://www.gettyimages.com/) 257 | - Free: [Aggregator for all top free stocks](http://allthefreestock.com/) 258 | 259 | ### Fonts 260 | - [Google Fonts](https://fonts.google.com/), [Adobe Typekit](https://typekit.com/fonts), [Font Squirrel](https://www.fontsquirrel.com/), [MyFonts](https://www.myfonts.com/), [DaFont](http://www.dafont.com/) 261 | 262 | ### Sketch – good practices 263 | - [General Sketch good practices](https://www.uxpin.com/studio/blog/10-best-practices-sketch/), [Symbols in Sketch](https://www.uxpin.com/studio/blog/10-best-practices-sketch/) 264 | 265 | ## Questions your client may ask 266 | 267 | 271 | 272 | 276 | 277 | 281 | 282 | 286 | 287 | 291 | 292 | 296 | 297 | 301 | 302 | 306 | 307 | 311 | 312 | **Questions to ask yourself at this stage** 313 | - Do I have a moodboard? 314 | - Do I have a style guide? 315 | - Have I designed for all target devices and design states? 316 | - Have I collected feedback from client and the team? 317 | 318 | ## Desired outcomes of this stage 319 | - Moodboard (example [here](https://netguru.invisionapp.com/boards/D834FYVZBKNWP) and [here](https://netguru.invisionapp.com/boards/F736L21WBKCPU)) 320 | - Style guide (check an example of [Taqsim Style Guide](https://netguru.invisionapp.com/share/7UAMU5OB3#/screens) and short [article about color](https://projects.invisionapp.com/share/P79V1I7NK#/screens/212581073)) 321 | - Designs ([check an example here](https://netguru.invisionapp.com/share/ZD9VDND6E#/screens/212677302)) 322 | 323 | ## Additional reading 324 | - [Psychology behind Product Design – staying efficient in the age of distraction](https://www.netguru.co/blog/psychology-behind-the-product-design-staying-efficient-in-the-age-of-distractions) 325 | - [How to make Sketch even better](https://www.netguru.co/blog/how-to-make-sketch-even-better) 326 | - [How NOT To Design An Interface For Your Mobile App](https://www.netguru.co/blog/how-not-to-design-an-interface-for-your-mobile-app) 327 | - [We Give Meaning to Products – Design Flow at Netguru: the Approach](https://www.netguru.co/blog/design-flow-at-netguru-pt.-1) 328 | - [Anticipatory Design, pt. 1](https://www.netguru.co/blog/anticipatory-design-part-1) 329 | - [Anticipatory Design, pt. 2](https://www.netguru.co/blog/anticipatory-design-2) 330 | - [The Nine States of Design](https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85#.hmieefed1) 331 | - [Google’s 9 Principles of Material Design](https://blog.prototypr.io/googles-9-principles-of-material-design-fb3fef64dcf) 332 | - [Misused mobile UX patterns](https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570) 333 | - [How to Design Native Mobile Apps](https://medium.com/@uxhow/how-to-design-native-mobile-apps-55d383fcb2b2) 334 | - [Golden Rules of User Interface Design](https://uxplanet.org/golden-rules-of-user-interface-design-19282aeb06b) 335 | - [Empty State: Mobile App “Nice-to-Have” Essential](https://uxplanet.org/empty-state-mobile-app-nice-to-have-essential-f11c29f01f3) 336 | -------------------------------------------------------------------------------- /chapters/01-project-introduction-and-setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: chapter 3 | title: "Project introduction & setup" 4 | chapter_number: "01" 5 | description: In this chapter you will learn how to prepare for the first meeting with client as an actual beginning of a design process. Build a relationship with client as professional designer. 6 | --- 7 | 8 | # Project introduction
& setup 9 | 10 | ## Introduction 11 | Your work starts much earlier than the moment you pick up a pen and paper. Preparing for the first meeting with the client marks the actual beginning of the design process. By being prepared and professional during the first meeting, you start building a relationship. The reward for your professionalism will be big: the client’s trust in your decisions is at stake here. 12 | 13 | **In this section you can learn** 14 | - What the first contact with a client looks like. 15 | - What questions you should ask. 16 | - Communication tips: how to talk to a client. 17 | - How to setup Google Drive/InVision asset folders. 18 | - Questions most frequently asked by clients. 19 | 20 | ## First contact with the client 21 | ### Introduction 22 | The first contact with a client can occur in two situations: 23 | - **first** - you are participating in the first meeting with a client which is related to the pre-sales activities or 24 | - **second** - you’ve just joined a new project and have to start contributing 25 | 26 | ### So how to start? 27 | **Prepare.** Remember to manage your preparation in correlation with the issue at hand. Gather all materials and documentation; try to dig deeper within the subject to avoid asking questions which were already asked. 28 | 29 | **Do due diligence:** First, study the client. Specifically, find out who the client is (company-wise and, if you know the other person’s name, check the role or background of your interlocutor). Read about the company, read documentation – conduct some initial desk research. Do not spend too much time on it – an hour should be more than enough. 30 | 31 | **The first impression:** Look and act professionally – at least smile & be positive. It is a bit of a truism, but we have to highlight this – there’s only one chance to make the first impression and please do remember that you are acting on a company’s behalf. 32 | 33 | **If the meetings are not face to face:** Use the right place for the call – quiet, comfy, with no disturbers. Please use your camera (pro tip: do not show your chin and nose from the bottom 🐽 ;) 34 | 35 | **Start on time:** Always start your meeting on time. Again, this goes hand in hand with showing your preparedness and professionalism. 36 | 37 | **Have an agenda of key points:** Keep the client on track. Prepare an agenda for the meeting. The client will appreciate the efficiency with which you handle this first meeting and all subsequent engagements, communications, and projects. Keeping yourself on track keeps the client on track. Generally, clients tend to sit down and start telling you the story of their lives. Of course, the more information you get the better, but maintain control of what is important and what is not. You don’t need to cut your client’s story short, but when you see them drifting away from the main subject you need to get them back on track. 38 | 39 | **Manage the client's expectations:** Managing the client’s expectations is critical. When you prepare for your meeting, review all the main subjects to be discussed with the client. Identify the areas where potential risks or troubles might arise. Second, set appropriate boundaries regarding what your client should expect from our services. Your preparation before the meeting allows you to offer a rough estimate of what it might cost the client to engage our services. 40 | When you manage the client’s expectations there is a greater likelihood that when things don’t come out completely in his or her favour, the client will not be surprised. This will preserve and strengthen the bond of trust between you and the client. Try to be on point and answer questions directly. A lot of newbies have a tendency to speak more than the customer, but that's not the way it's supposed to be. Focus on asking the right question, then listen carefully. It should be a ratio of 80% for the customer and 20% for you (more or less). 41 | 42 | **Give the client action items and follow-up:** After your meeting, write an update and send it to the client, summarizing the key subjects touched upon in the meeting. The notes are mainly for you, so only write down the essentials – we suggest bullet points to elaborate later (if necessary). It is essential that you keep the client up-to-date regarding any progress or issues you encounter along the way. Agree on next steps and what needs to happen in order for us to start the project together. 43 | In addition, thank the client for taking the time to meet you and reassure them that you will be in touch if any issues or alternatives come up; encourage two-way communication. 44 | 45 | – As mentioned above, be prepared and learn about the client as much as possible from existing sources. It will pay off – we promise! 46 | 47 | ### Who are the clients? 48 | There are 3 types of clients, classified by their willingness to talk: 49 | 1. **People who don’t speak** – because you may inadvertently guide these kinds of clients through the questions in such a way that you answer them yourself, there is a real possibility that you will miss out on the details, background thinking, motivation and the main aim of the project. The best way to optimise interactions with such clients is asking “why?” questions as much as possible. ([see the 5 whys method](https://en.wikipedia.org/wiki/5_Whys) ) 50 | 2. **People who speak on the subject** – the easiest group to manage, just listen, ask the questions, write down the answers, and gather all the requirements in the most efficient way. 51 | 3. **People who talk about everything** – it can be exciting to hear loads of stories and anecdotes, but the efficiency of that kind of meeting is really low. However, it is a great opportunity to get familiar with the client and build a nice relationship. It is essential to capture the necessary thoughts, moderate the conversation according to the agenda, and show in a subtle way that the purpose of the meeting is professional rather than social. One of the best remedies is to allow the client to say whatever they want to – just to capture all the requirements, even if you do so from between the lines. 52 | 53 | ### Tools 54 | #### Do not make assumptions – ask questions! 55 | 56 | Ask what they want, but also question the status quo – be focused on providing consultancy and **expertise value** rather than selling the solution they asked for directly. Do not talk too much – let them speak. Gathering the knowledge is the essential and ultimate goal of your meeting, so we’d love to illustrate this issue with a real-life example: 57 | 58 | 61 | 62 | #### Consultative & Solution Selling Principles 63 | **What is consultative selling?** 64 | 65 | The consultative sales process is primarily focused on the experience that the potential customer (the opp) feels and sees during their interactions with you. It’s about how you find ways to provide your leads with value and make it all about them. Not your product, your business, your numbers. The consultative sales process is most especially not about you. 66 | 67 | Sometimes this is also referred to as solution-based selling. 68 | Solution selling is a sales methodology. Rather than just promoting an existing product, the salesperson focuses on the customer's pain(s) and addresses the issue with his or her offerings [products and services](http://en.wikipedia.org/wiki/Solution_selling). 69 | 70 | Generally speaking, the initial conversation with the client might begin by saying something like this: 71 | **_Hi client, I was notified that you reach out to us regarding a mobile app redesign. Great! What were you looking for help with?_** 72 | 73 | The emphasis is on what the potential customer **wants and needs**, not what you want and need from the potential customer. 74 | 75 | To describe this in more practical terms, you should follow the 5 principles of the consultative sales process: 76 | 1. **Research** – As mentioned above, be prepared and learn about the client as much as possible from existing sources. It will pay off – we promise! 77 | 2. **Ask** – Ask questions that start with the words Who, What, Where, How, Why, and When. Avoid starting questions with words like Do, Are, You, and Can. These types of questions tend to lead to yes or no answers, which is exactly the sort of response you most want to avoid. 78 | 3. **Listen.** 79 | 4. **Teach** – As you are actively listening, you need to be responding, and as you respond, you should look for opportunities to teach. But note that this is not about teaching your clients about our product or service. It’s about helping the client learn to overcome their challenges and build a plan to reach their goals. Teaching should be done by asking the right questions to the customer, so she/he subconsciously thinks “it actually makes sense to work with them, now I understand it”. It's not forcing them to work with us, it's making them understand why it's worth working with us. This may or may not involve using our product or service. Your focus should be to help the client, no matter what. Also note that you must be careful not to give away too much knowledge. You must balance the knowledge you give with the questions you ask and the answers you get back. 80 | 5. **Qualify** – After investigating your client, now it’s the moment to make a decision about the cooperation. It’s not just the client that’s making a decision here. You should also consider if he fits your company’s work and philosophy and if you are able to offer the solutions to your potential client’s needs. 81 | 82 | These 5 principles should provide a basic outline of the consultative and solution sales methodology which definitely helps in the initial contact with the client. 83 | 84 | ### Summary 85 | -The most important thing you need to remember, not only for your first successful meeting with a client, but for any stage and project in your career, is to trust yourself. Confidence is something you need to practice; with practice, you will get better. Make sure you build it in a way that when you look back you laugh out loud and say, “That was fun! Let’s do it again!” 86 | 87 | 88 | ## Strategy questions 89 | Before the first meeting with the client, provide a list of questions via email. Ask them to answer the questions and send you back a file with the answers. Inform them that thanks to being familiar with the answers we can prepare for the meeting. Both sides will be aware of what is unknown and what should be clarified. This will not only speed up the conversation, but make it more concrete and structured. 90 | 91 | ### List of questions 92 | #### General info 93 | You should start with general questions. By starting from this point you make it clear what your cooperation will look like. You have to make sure everyone on both sides understands what you agreed on. Below you can find some example questions to ask. 94 | 95 | Time & money 96 | - What is the indicative schedule? 97 | - What is the basic scope of work? 98 | - What is the indicative budget? 99 | 100 | Client’s goals and motivations 101 | - Why are you here? What is your motivation for change? 102 | - What are your jobs/responsibilities? 103 | - What are your pains? 104 | 105 | Company details 106 | - Are you a mature company or a founder? 107 | - Who are the main contact persons? 108 | - Who are the stakeholders? 109 | 110 | Client’s assumptions 111 | - What are your assumptions? 112 | - What in your opinion will make the product a success? 113 | - How do the goals of this project fit into your long-term goals? 114 | 115 | Tools 116 | - Can you grant us access to your analytics tools? 117 | - What can be automated, outsourced? 118 | - How do you test new features/ideas? 119 | 120 | #### Business 121 | After gathering insight to the general questions, you can move on to more specific ones. For the client, his/her business is the most important. Because of that, start from business-related questions. 122 | 123 | Money 124 | - What is the main selling point? 125 | - What is the money making funnel? 126 | - How do you want to fund your business in the future? 127 | 128 | Business model 129 | - What is the business model? 130 | - What is the business strategy? 131 | 132 | Business goal 133 | - What are the business goals to accomplish? 134 | - What is the main business short-term objective? 135 | - What are KPIs/goals you’d like to achieve? 136 | 137 | #### Market 138 | No company is an island. Every industry exists in some ecosystem. Because of that, you should get to know as many things about your client’s competitors as you can. It is also your job to educate the client about the importance of running market research. 139 | 140 | - Did you run market research? 141 | - Do you have a niche? What is it? 142 | - Are there any similar product offerings, alternative solutions to the same problem? What are your users doing today instead of using your product? 143 | 144 | Other requirements/law restrictions 145 | - What country (or region) is the product to be launched in? 146 | - What language is the product to be designed in? 147 | - Are there any special requirements regarding the market that should be considered (ex. cultural, religious limitations)? 148 | 149 | #### Product 150 | Now, after gathering general insights, as well as business- and market -related ones, you can finally move ON to the questions that are directly related to the product or service that you are about to work on. Remember that the product/service must both satisfy the business and user goals because only by doing so will you build value. 151 | 152 | - Do you have a working product? 153 | - What is your product’s value proposition? 154 | - What other touchpoints are valid for you? 155 | 156 | #### User 157 | Finally, the understanding that the product is for the client’s users and not for him/her directly is the key to building a product that will fit real people’s needs. Answering the user-related questions is difficult because it requires a lot of empathy. 158 | 159 | 163 | 164 | - Did you run user research? 165 | - Who are the users? 166 | - What are their jobs, pains, and gains? 167 | 168 | #### Visual 169 | Visual-related questions are crucial for you. You basically should not start the UI design without asking this basic question because by doing so you would risk doing inadequate work. 170 | 171 | - Do you have a branding, brand book, brand guides, design system, patterns, style guide? 172 | - Do you have a corporate identity? 173 | - Do you have any benchmarks/inspirations/visual style in mind? 174 | 175 | Sometimes, very direct questions won’t work as we want. 176 | - Be smart in your client’s interview, ask about the things that seem to be important for him/her. 177 | - Be sure to set clear goals of what you want to achieve. 178 | - It's highly recommended to review the [Business Model Canvas](https://upload.wikimedia.org/wikipedia/commons/1/10/Business_Model_Canvas.png). It’s not a clear example of which questions to ask, but it shows very important and basic fields related to business and product. You can treat it like an inspiration to collect your thoughts. 179 | 180 | Since everything is trackable, speak about the exact points you’re going to track. Identify the client’s KPIs (Key Performance Indicators). Good KPIs take into account the business context, predict success, show early warning signals, and validate achieved results. You can use these materials to create [tailor-made KPIs](https://bscdesigner.com/kpi-system-example.htm). For example, these could range from new signups to the number of customers using Paypal vs. purchases with credit cards. Always make sure you know how high you’re aiming for at the start. Sometimes it can be challenging to analyse. Read more here - [12 Steps System for the Most Challenging Metrics and KPIs](https://bscdesigner.com/kpi-system.htm). Make sure that all answers are documented and available for other (current & future) team members. 181 | 182 | ### Questions your client may ask 183 | 184 | 188 | 189 | 193 | 194 | ### Questions to ask yourself at this stage 195 | - Have I asked all the necessary questions? 196 | - Do I have all the necessary answers? 197 | - Is the project card created? 198 | - Is the project structure created on Google Drive and linked to the project card? 199 | - Is all project info gathered in one place and is accessible to everyone? 200 | - Was the process explained to the client? 201 | 202 | ### Output 203 | - Identifying the business’s goals 204 | - Identifying the client's needs, pains, and expectations 205 | - Identifying the end user 206 | - Identifying the end user’s needs, goals, pains, and gains 207 | - Identifying the end user’s jobs 208 | - Identifying the client’s competitors, their jobs, their value proposition and innovation 209 | - Identifying the project challenges 210 | - Identifying the restrictions 211 | 212 | ## Communication tips 213 | ### General rules 214 | - Be active, not passive – recommend solutions. 215 | - Listen to the client’s expectations, don’t be afraid to ask questions. 216 | - Consult your solutions with the developers from day one. 217 | - Make sure you explain to the client how to use communication tools e.g. comments in [InVision](https://support.invisionapp.com/hc/en-us/articles/209192426-How-do-I-comment-on-a-prototype-); explain the difference between [tour-points](https://support.invisionapp.com/hc/en-us/articles/204183549) and comments 218 | 219 | ### Feedback 220 | - Does the client have enough time to give you feedback? If not, try to ask which active stakeholders can actively participate in the communication. 221 | - Make the client aware of the value of an active and collaborative approach (feedback, communication). 222 | - Make sure that there is only one final point of feedback on the client’s part. 223 | - Make sure that you will have an opportunity to present your solutions to all stakeholders. 224 | - Make sure that the client knows that we don’t work on the basis of a fixed number of reviews but rather in a constant feedback-and-iteration mode. 225 | 226 | ### Previous experience 227 | - Has the client worked with designers before? 228 | - If not, try to educate the client on the best practices and basic principles of design during your meetings. 229 | - If yes, what are the client’s experiences of working with designers? 230 | - Does the client understand the role of a designer? 231 | 232 | ### Milestones & priorities 233 | - Make sure that the client has a reasonable approach to the creation of an [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product) (keep the scope small). 234 | - Make the client aware of the importance of going step-by-step in terms of functionalities. 235 | 236 | ### Why is it important to sell the outcomes of your work? 237 | - By selling yourself or your work well, you gain the client’s trust in your decision. 238 | - When you hesitate or don’t know the “whys” behind your design decision, you scare clients off. 239 | 240 | ### Must-haves when communicating with a client 241 | - Know the benefits and outcomes of your work. 242 | - Gain the client’s trust – they will care about your opinions. 243 | - Your client’s future often depends on you, your decisions, and your work. Everything you do serves to convince them that their business is in good hands. 244 | - Don’t ask basic questions to which you can easily find answers on Google. 245 | - Every decision you make must match the business goals of your client – always and unconditionally. 246 | - You can use the structure: 247 | [What you did] + [how you came up with the thing you did] + [why you did it/how this will help the client’s business] 248 | - **There are no maybes – there is confidence.** Be absolutely sure about your statements. 249 | - Speak about the “whys” of your design and how your work will improve your client’s chances of achieving success. 250 | - Don’t talk about the things the client can see on their own. Say it this way: “This element is placed here because it will help X achieve Y/with Z”. 251 | - Use data. Whenever you assume something, base it on best practices, behavior studies, and statistics. 252 | - It’s much better to present a small number of excellent arguments than flood the client with dozens of mediocre ones. 253 | - Adjust your language – don’t use jargon. 254 | 255 | ## Explaining the design process 256 | ### The most important aspects 257 | - **Educate the client** 258 | - Product design is a process. The process includes iterations that will result in the improvement of the product or service. The final iteration is complete when the client's goals and the users' goals are achieved. 259 | - Design is about how things work, not only about how they look. Educate the client about your role and your expectations. Establish the boundaries and expectations at the beginning. Useful links: 260 | - [What To Expect From a Designer](https://www.netguru.com/blog/what-expect-designer) 261 | - [What You Pay For When You're Hiring a Designer](https://www.netguru.com/blog/hiring-designers) 262 | - [8 Ways to Establish and Maintain a Successful Client-Designer Relationship](https://www.netguru.com/blog/8-ways-to-establish-and-maintain-a-successful-client-designer-relationship) 263 | - **Avoid multi-platform designs at the early stages of the project.** If the client needs a multi-platform design, ask another designer for help. If you believe that the scope is big enough, always suggest a design team. Learn more from: [Why a Team Approach Is the Key to Successful Product Design](https://www.netguru.com/blog/why-a-team-approach-is-the-key-to-successful-product-design) 264 | - **Emphasize that it’s impossible to predict users’ behavior accurately.** We rely on research and available data – the validity of a solution can only be assessed with relevant tests. 265 | - **We cannot guarantee business success.** Try to make it clear that even the best product design does not guarantee a product’s success in terms of revenue. 266 | - **Give a quick overview of all the Product Design phases.** 267 | 268 | ## Design files organisation 269 | 270 | This section presents the way we organize our files and folders by default. Of course, this file structure is only an example, and you might want to organize your files and folders in a way that suits you best. 271 | 272 | ### 1. Setup 273 | When we start a new project, we create a Designer folder in the client’s main folder. 274 | 275 | 276 | 277 | ### 2. The structure of the Designer folder 278 | 279 | 280 | 281 | #### 2.1. Sources 282 | 283 | 284 | 285 | Each folder (_Visual_ and _Wireframes_) contains all source files (.psd, .sketch etc.). It depends on the project, but if we have two sources of files, we create subfolders for .psd, .sketch, or any other extensions. 286 | 287 | 288 | 289 | 290 | #### 2.2. Fonts 291 | 292 | In this folder, we put all the fonts which we have used in the project, even if they are free. They are grouped by font name. Like so: 293 | 294 | 295 | 296 | #### 2.3. Assets & Exports 297 | 298 | This folder contains two subfolders: 299 | 300 | 301 | 302 | *Assets & Exports* is a folder for FrontEnd Developers. 303 | 304 | - Assets: _Assets_ contains all additional assets that we couldn’t put in Exports. For example, SVG icons, etc. 305 | - Exports: In *Exports*, we put all exports from Sketch or Photoshop. 306 | 307 | #### 2.4. Images & Icons 308 | 309 | If we have some external images (Shutterstock, etc.) or icon sets, we upload them here. 310 | 311 | #### 2.5. Documentation 312 | 313 | IMPORTANT! At the end of a project, we create a list of all screens with URLs to particular screens on the InVisionApp broken down by different platforms, breakpoints, and so on. 314 | 315 | In this folder, we upload all documents related to a specific project. Those documents can be personas, user stories, etc. 316 | 317 | We also create an _Initial interview_ subfolder, which contains the most important data collected during the initial interview, the materials sent by the client, or scoping session notes related to the design phase relevant to the project. --------------------------------------------------------------------------------