UX DIU Project Checklist

UX CheckList para Diseño de Interfaces de Usuario, Universidad de Granada (https://github.com/mgea/DIU19)

Online version: https://mgea.github.io/DIU (https://mgea.github.io/UX-DIU-Checklist/index.html)

Github repositorio: https://github.com/mgea/UX-DIU-Checklist

ver 1.0 01/02/2020 ver 1.1 updated 18/02/2021 GPL-3.0 CCBYSA

Desk Research

• Competitive Analysis/heuristic review. See how others solve similar problems and try to not reinvent the wheel. http://boxesandarrows.com/competitive-analysis-understanding-the-market-context/

  Realizar revisiones, análisis de uso de websites de competidores y del sistema antiguo. [1, ] https://medium.com/@alexgilev/how-to-do-a-competitive-analysis-1aa4b05e80a3

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Usability Review, Heuristic review determining how usable a site is entails working through a checklist UX for the Masses: A guide to carrying out usability reviews http://www.uxforthemasses.com/usability-reviews/

  Template http://www.uxforthemasses.com/wp‐content/uploads/2011/02/Usability‐review‐template.xls

  Template https://www.uxforthemasses.com/wp‐content/uploads/2011/02/Usability‐review‐template.pdf

  img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Ethnography research is to see the world and challenge, from the perspective of another person. Try to make observations and conversations to understand of who you are designing for with these guidelines https://dschool.stanford.edu/resources/ethnography-fieldguide / http://www.clearworks.net/wp-content/uploads/2016/03/Ethnographic-Field-Guide..pdf

  Img: grub

User Research

• Persona. Look for your users. Write stories to guide your design. http://www.uxforthemasses.com/personas/

  (Alternative: [1] https://www.justinmind.com/blog/user-persona-templates/)

  img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Experience Journey map. represent a scenario in which a user might interact with the thing you are designing and their emotional state in each step http://theuxreview.co.uk/user-journeys-beginners-guide/

• Empathy Map. An Empathy Map is just one tool that can help you empathise and synthesise your observations from the research phase, and draw out unexpected insights about your user’s needs. https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it

  img: https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it

Design Thinking

• Feedback Capture Grid is a structured way of organising feedback that is gathered from your testing sessions.https://public-media.interaction-design.org/pdf/Feedback-Capture-Grid.pdf

  https://dschool-old.stanford.edu/sandbox/groups/dstudio/wiki/2fced/attachments/1ba97/Feedback-Capture-Grid-Method.pdf?sessionID=a4c32167e58dc598ac57b770de7cb0f4f838ac50

  img: .https://public-media.interaction-design.org/pdf/Feedback-Capture-Grid.pdf

Basado en DITTE MORTENSEN Three Ideation Methods to Enhance Your Innovative Thinking, https://www.interaction-design.org/literature/article/three-ideation-methods-to-enhance-your-innovative-thinking (version en español) https://www.codensign.com/pensamiento-innovador/

• Point of View. Allow you to ideate and solve your design challenge, you keep a focus on your users, their needs and your insights about them. https://www.interaction-design.org/literature/article/define-and-frame-your-design-challenge-by-creating-your-point-of-view-and-ask-how-might-we

  img: https://public-media.interaction-design.org/images/uploads/e07fe7f7836c43502cdc6e617d3d42f6.jpg

• MVP. By using a LeanUX cavas to achieve the minimum viable product, the version of the final product with less effort http://scopecanvas.com/

Otros métodos Basado en DITTE MORTENSEN Three Ideation Methods to Enhance Your Innovative Thinking, https://www.interaction-design.org/literature/article/three-ideation-methods-to-enhance-your-innovative-thinking (version en español) https://www.codensign.com/pensamiento-innovador/

• SCAMPER. Looking for new strategies to challenge our habitual ways of thinking? Re-expression is a method to help you think about the challenge in a new and different way. https://www.designorate.com/a-guide-to-the-scamper-technique-for-creative-thinking/

  img: https://2.bp.blogspot.com/-gpPqes8NIvc/WRyPuFDLe7I/AAAAAAAAABc/GtSsoE5ehwAiWA0T7y3MigS1zOiKgiufQCLcB/s320/descarga.png

• What if. The Revolution thinking method to break the rules that your way of seeing the world. You can start challenging these rules by asking ‘what if’ questions

  img: https://www.makeplayingcards.com/design/dn_product_share.aspx?type=11F48D428FF36AB59BE22C9B145D0EC9&id=C5425163BA449E682B7EFFE2DD12A95A2BF154CD4C404F13BD88124449BB90E977F85981BFAE5DD6&w=320&ws=1&f=&sign=&c=1

• Random Links(Faltaría) https://public-media.interaction-design.org/pdf/Template-Random-Links.pdf

Analysis

• Task Analysis Identify your users’ goals and what they are trying to achieve. Also, the steps that your users currently take in order to achieve their goals. https://www.interaction-design.org/literature/article/task-analysis-a-ux-designer-s-best-friend

• IA: Sitemap. Focus on the Information Architecture task at the beginning of the design process creating a complete list of all pages available on a website and the intitial navigation

  https://www.uxmatters.com/mt/archives/2016/01/the-purpose-of-site-maps-and-other-design-deliverables.php?source=post_page-----8dc3487111a3----------------------

  https://theuxreview.co.uk/sitemaps-the-beginners-guide/

• Labelling i18n Follow your brand personality, keep in mind users' culture and language, the context of your product and make sure they understand you. https://medium.com/@tnishantha/a-localization-cheatsheet-designing-for-international-audiences-b018e2800291

  (http://alistapart.com/article/translation-is-ux)

  (http://www.cvc.uab.es/shared/teach/a21291/temes/i18n/slides/handouts/i18n.pdf)

Design

• Moodboard. It helps designers and stakeholders get on the same page for the visual aspects of the project. In UX Design and product design, a mood board is a collage of images, fonts, interactions, features, icons, and UI elements to communicate the artistic direction of a project.

  A UX guide to designing better mood boards (UX Collective, 2019) https://uxdesign.cc/a-mood-board-strategy-for-cohesive-visual-design-5620dec3fed7

  Creating Better Moodboards for UX Projects (UX Planet, 2017) https://uxplanet.org/creating-better-moodboards-for-ux-projects-381d4d6daf70

• Landing Pages. For branding, a landing page is a dedicated online page built solely for accomplishing one or more marketing goals such as generating leads or getting clicks

  https://hackernoon.com/top-7-ux-principles-for-designing-high-converting-landing-pages-3e4cb951c8e2

• Wireframe. Add some details and structure to your ideas, reuse patterns and create pages on top of your user flows so you'll not leave anything behind http://www.uxpin.com/guide-to-wireframing.html

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

  https://theuxreview.co.uk/wireframes-beginners-guide/

• Storyboard. A comic strip that illustrates the series of actions that consumers need to take while using the product. Translates functionalities into real-life situations. https://uxmag.com/articles/storyboarding-in-the-software-design-process

  book: Storytelling for User Experience, Whitney Quesenbery and Kevin Brooks

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

Design

• UI Patterns Reuse elements and patterns. Follow your style guidelines. Don't have any? Create your guidelines. Start small, then create pages. http://styleguides.io

  https://boagworld.com/design/pattern-library/?source=post_page-----657f54ce3c7d----------------------

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Guidelines . UI guidelines explain the best practices of UI components and understanding of their behavior by giving real examples. https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759

  User Interface Design Guidelines: 10 Rules of Thumb https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb

  Img: https://storage.googleapis.com/spec-host-backup/mio-develop%2Fassets%2F1Xymmln77UUM8Ro4ZcCrOxnY_QtYY02SP%2Fdevelop-android-2x1-large.png (en https://material.io/develop/)

• Mockup. A mockup is a visual way of representing a product, wireframe represents a product’s structure while a mockup shows how the product is going to look like

  (info: https://uxplanet.org/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b)

Testing

• Qualitative Reseach: 5" test. What users think about a new landing page or a new logo. Test the first impressions, and also what people will understand at first look https://usabilityhub.com/guides/five-second-testing

• Usability Testing. Take survey, sessions recording: test, observe and fix, test, observe. Validates and collects feedback of flows, design and features. https://medium.com/swlh/how-to-do-user-testing-on-a-budget-bc4000d4387

  (https://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)

  (https://uxmastery.com/better-user-research-through-surveys/)

  (https://uxdesign.cc/5-ways-to-improve-your-prototype-testing-3cce3465a7d5)

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• A/B Testing. What users think about a new landing page or a new logo. Test the first impressions, and also what people will understand at first look https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Questionaires. Quick and unexpensive way of measuring user satisfaction and collecting feedback about the product. The System Usability Scale (SUS) is a frequently used questionnaire to measure usability. http://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/

  (https://uiuxtrend.com/measuring-system-usability-scale-sus/)

  (https://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/)

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Eye Tracking A technology that analyzes the user’s eye movements across the interface. Provides data about what keeps users interested on the screen and how their reading flow could be optimized by design. https://www.uxmatters.com/mt/archives/2009/10/eyetracking-is-it-worth-it.php

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Usability Reports A Usability Testing Report is a key document that allows you to gain insight into your users’ expectations and frustrations and is crucial in evaluating your product’s success. http://www.sage-research.com/v4/sage_usability_study_report_example.pdf

  Img: https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

• Prototype. Prototype is an early sample of design used to get feedback and rapid experiments with new ideas. Publish on Github to test functionality. Yes, your product can do that! https://uxplanet.org/basics-of-prototyping-1a4106e12c0e

Accesibility

• Accesiblity A study to measure if the website can be used by everyone, including users with special needs. https://uxplanet.org/how-to-create-interfaces-that-benefit-all-accessibility-testing-and-inclusive-design-principles-ed15477bcce0

  (https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)

  Img: https://tecnoaccesible.net/sites/default/files/styles/medium/public/Accesible-Web-02_0.png?itok=_AOwzkZN

• Inspection Methods. Check for W3 WCAG accessibility standards for compliance https://uxdesign.cc/accessibility-guidelines-for-a-ux-designer-c3ba775539be

  (https://webaim.org/standards/wcag/checklist)

  (https://www.mediacurrent.com/blog/5-website-accessibility-checkers)

  (https://www.accessibility.sa.gov.au/introduction/testing)

  (Img https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoUHhytnUnlsd3EGJisnzltV7druvViNlrbhgk4KpPfTSjLuhY&s)

• Disability Simulator. The Web Disability Simulator lets you experience how people with different disabilities or inadequate abilities perceive a web site. https://lilianna11y.com/2017/10/24/disability-simulator-plugin-perfect-accessibility-tool-designers/

Otros

• Kickoff meeting The kickoff meeting is also a good time to talk about project success metrics and the design framework that you will be using during the project. https://www.smashingmagazine.com/2015/01/hold-a-kickoff-meeting-before-diving-into-the-design/

  (from: https://blog.usejournal.com/the-ux-designers-toolkit-26-methods-tutorials-and-free-templates-8dc3487111a3)

  Img: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCJZBbtdUugpKLF27GCA_UORKvo3QBVMbY4dDq1K5AwXLcuWwA&s en https://pebbled.io

• Stakeholders Interviews. Conversations with the key contacts in the client organisation funding, selling, or driving the product. https://www.uxmatters.com/mt/archives/2007/09/conducting-successful-interviews-with-project-stakeholders.php

  (http://boxesandarrows.com/a-stakeholder-interview-checklist/)

  Img: https://cognition.happycog.com/article/better-stakeholder-interviews

  (from https://blog.usejournal.com/the-ux-designers-toolkit-26-methods-tutorials-and-free-templates-8dc3487111a3)

• Inclusive design: 6 Principles for Inclusive Design (UXPlanet) How designing for equity & accessibility benefits everyone https://uxplanet.org/6-principles-for-inclusive-design-3e9867f7f63e

  Img: https://www.atlassian.com/blog/inside-atlassian/designing-inclusive-illustrations-at-atlassian

Referencias

[1] http://uxmastery.com/resources/process  https://uxmastery.com/resources/techniques/

[2] http://uxdesign.cc/ux-methods-deliverables/

[3] https://blog.usejournal.com/the-ux-designers-toolkit-26-methods-tutorials-and-free-templates-8dc3487111a3. (http://www.juliocreative.com)

[4] http://boxesandarrows.com

[5] http://uxchecklist.github.io