User experience checklist for creating websites and applications

What do you do when you have tasks that you do again and again? How do you make sure that you do them correctly each time? One good solution, as it has been proven in many different fields, is to use checklists.

In a software agency, like 11 Rockets, projects have repeating deliverables and user experience is what we primarily focus on optimizing during the whole duration of the project. So we created a user experience checklist that we use internally.

It consists of 6 main phases: Discover, Plan, Explore, Create, Finalize, Analyze. In the following part, we’ll go through the steps of each of them.

1. DISCOVER

1. Current situation analysis — If the product is the continuation of the previous one, gather and interpret existing data from tools like analytics software. Use usability testing to gather more information about what can be improved on an existing product.
2. Competition analysis — Take a look at similar products which already exist on the market and are successful. Take notes of what works for them.
3. Find and talk to users individually — Try to find 5–12 relevant persons to interview. Gather their feedback by carefully preparing a script and asking open-ended questions. This is a qualitative technique and is more intensive and smaller scale.
4. Use quantitative techniques to gather data about users and their needs — Do higher-volume research, and use tools like online surveys, landing pages etc.

2. PLAN

1. Create personas — After learning about users, create personas by using the phrase “User is a ____ who wants to ______”. Find a matching picture to identify and empathize with each persona. Personas give an answer about WHO is the product for.
2. Create user scenarios — After identifying users, write down a sequence of events to match them with their objectives and goals. User scenarios answer a question about WHAT is the product about.
3. Create user flows — By using the scenarios, describe through diagrams the user’s journey when interacting with the product. User flows answer a question about HOW will product work.
4. Identify red routes — Red routes are the key activities that people expect to be able to complete with the system: these are the reasons why people have purchased it. Defining them helps us avoid obstacles on key user journeys. If the red routes aren’t obstacle-free, it will be hard to convince users to continue using the system.

3. EXPLORE

1. Information architecture — Organize, structure, and label content to help users find information and complete tasks.
2. Sketch — Use pen and paper to quickly visualize your ideas. Do as many variations as you like. Take a picture with your phone to share with others if needed. Use sketches to get very basic concepts done and to brainstorm the ideas with clients and teammates.
3. Wireframe — Refine the concept further by creating pixelated grayscale designs. They represent skeletal frameworks of a product and are minimally detailed. Use tools like Sketch or Balsamiq.

4. CREATE

1. Language — Think about branding, user’s culture and context in which the product is to be used.
2. Color palette — The fastest way to create a good color scheme is to add colors by starting with one of the predefined, traditional color schemes and then work out from there. Use tools like Adobe Kuler.
3. User Interface Mockup — Create and refine visual elements and content. Reuse elements and patterns to create UI. Create guidelines and keep the UI elements consistent throughout the project.
4. Prototype — Choose mockups and their specific parts and add layers of interaction by linking them through. To create clickable mockups use tools like InVision or technologies like HTML/CSS.
5. Compatibility with target devices — If the product is to be used on a mobile phone define how are gestures handled. Work on responsiveness and behavior on devices like smart-watches, big TV-s, etc.

5. FINALIZE

1. Define guidelines & hierarchy for typography — Use a limited number of fonts on a page and make sure they complement each other. Consider what message they communicate. The 12-point font is most often the sweet spot for human readability.
2. Optimize & improve the existing designs — If there are any alternatives to consider, now it’s the time to do so. Finalize the designs and make them presentable to customers.
3. Copywriting — Optimize the wording throughout the project.
4. Give feedback to users inside the product — Show a loader when a user needs to wait and errors if something went wrong, give feedback of successful user’s actions, etc.
5. Pass the designs to the development team — Along with documents and specs to have everything ready to be turned into code.

6. ANALYZE

1. Set up KPI-s — Based on the project goals, define key performance indicators to track for the product.
2. Create A/B testing plan — Make a short roadmap of possible improvements and changes that can be made on the product.
3. Continuously test the product — Observe and learn with usability testing, A/B tests, surveys, etc.
4. Sync with the development team — Talk and inform the development team about the performance indicators changes and test results and decide on the changes to be made.

Originally published at www.11rockets.com.