Page Comparison

Audit of existing should be done if the goal of this sprint is to modify an existing page or feature. It can be an analysis of the page or an analysis of the statistics.

🗒 Best practices

•  Record or screenshot current pages or features

⭐ Useful links and tools

• Learn more about heuristic criteria for user interface.

• Learn more about user experience audit with our course (in French)

• You can use Hotjar for video recording and heatmaps

The goals of a stakeholder workshop are to review with them the business objectives of the feature, to be sure that everybody is aligned and to keep the objectives in mind as long as you work on your feature.

Surveys should be made when you need quantitative asynchronous feedback from users.

🗒 Best practices

•  Define the goals of your surveys → what are you looking for?
•  Always ask open questions
•  If you offer several options, always use the option “Other” with the possibility for the users to write a free answer

⭐ Useful links and tools

• Learn more about user research with our French course or our English course

Shadowing should be done when you need to observe a user using an existing feature or page. It can be done IRL or using a tool like Hotjar.

⭐ Useful links and tools

• Hotjar

• Template: Observation grid for shadowing

• Learn more about user research with our French course or our English course

Competitor analysis and other websites benchmarks should be made to understand how others have already treated the same subjects and detect standards and patterns.

⭐ Useful links and tools

• You can add a competitor analysis as a child page of this page

• Pageflows

• Mobbin

In this step, insert all the articles, video, etc., that are useful for you on this subject

⭐ Useful links and tools

• Medium

• Nielsen Norman Group

Experience map should be used to visually represent the current experience of the user, with their pain points and the opportunities to improve. It should be based on the results of User Research

⭐ Useful links and tools:

• Find more about UX mapping with our UX mapping methods course

Persona and user problem help framing the problem we are trying to solve and for who.

🗒 To be defined

•  The persona
•  The user problem: How might we…?

⭐ Useful links and tools:

• An article about good “How might we?” questions

A user scenario is the fictitious story of a user’s accomplishing an action or goal via a product. It focuses on a user’s motivations and documents the process by which the user might use a design.

In this section, UX writers (or others) can define some key elements of the writing: terminology, tone spectrum… It has to be thought early enough in the process, especially for key, structuring terms.

🗒 UX writing definition must include

•  Writing strategy
•  Terminology
•  Tone spectrum

Terminology table

Here you can describe all the solutions that were considered during the “ideate” step and, if relevant, why they haven’t been chosen.

In this step, you can embed a user flow made on Lucidchart or link to a Figma file.

⭐ Useful links and tools

• Lucidchart

Domain model and OOUX

⭐​ Useful links and tools

• Lucidchart

• Learn more about Object-Oriented UX (OOUX)

• Learn more about domains model with the first part of our UML course

Every design should be reviewed at least once by your peers, to ensure enough communication and sharing between everybody.

⭐ Useful methodologies

• Design critique

• Channel for design feedback on Slack

• Peer review with a dedicated designer

Wireframes are made on Figma, preferably in black and white.
Insert the link to your Figma file in the colored panel.

🗒 Quality Criteria

•  User can complete a task
•  Edge cases are managed
•  Error states are managed (+ error prevention)
•  Admin Scenarios are designed if relevant
•  Exception scenarios are managed
•  Responsive states are designed (desktop/mobile/iOS)
•  Main empty scenarios are designed
•  Alternative scenarios are designed
•  Time to perform a task - Fitt's Law (distance) / Miller's Law (memory)
•  Information Architecture
•  Navigation is consistent
•  Navigation - user can navigate back and forth on any page
•  Navigation - users know where they are on the website
•  Interaction - the interface gives feedback on actions

Every feature should be tested by users - whether quantitatively or qualitatively.

⭐ Useful links and tools

• Always prepare a test protocol, with goals, hypothesis and scenarios detailed

• Learn more about usability testing with our course

• Lookback (for qualitative tests)

• Calendly (to organize remote and in-person user tests)

• Maze (for quantitative tests)

Stakeholders must be consulted before sending the feature to development.

🗒 What to check during stakeholder consultation?

• business is aligned with the suggested solution

• nothing important from the business point of view has been forgotten in the solution

Every UX solution is shown to the squad: PM, Solution manager, developers and QA.
It’s an opportunity to check if everybody is aligned on the solution and see if there are any questions or technical issues.

In this step, you can write the summary of the changes decided in this checkpoint, if any.

Final prototypes are made on Figma

⭐ Useful links and tools

• Design system documentation

• Adobe creative cloud (for punctual needs of Photoshop, Illustrator or After Effect)

• Lottie for animations

🗒 Quality Criteria

•  Consistency with the Design System
•  Visual hierarchy leads users to the required action
•  Colors guide the users
•  "Affordance" - An element clearly indicate its function
•  Icons clearly reflect the essence of an element
•  Spacing and Proximity laws
•  Alignments and grid
•  Accessibility
•  Motion & Interaction
•  Consistency with the standards - Jacob’s law
•  Consistency with branding
•  Emotional design

🗒 Checklist for the Figma final prototype

•  All screens in every responsive format
•  Main scenario
•  Empty states
•  Loading states + skeletons
•  Error states + cases
•  Edge cases
•  For new components: states are described or illustrated. Material design reference is available.
•  Copy is final and keys are defined
•  Transition / scroll / pagination behaviours are described if needed

Every design should be reviewed at least once by your peers, to ensure enough communication and sharing between everybody.

⭐ Useful methodologies

• Design critique

• Channel for design feedback on Slack

• Peer review with a dedicated designer

Every final solution is shown to the squad: PM, Solution manager, developers and QA.
It’s an opportunity to check if everybody is aligned on the solution and see if there are any questions or technical issues.
In this step, you can write the summary of the changes decided in this final checkpoint, if any.

🗒 Checklist before final commitment

•  The whole squad has been invited
•  The file has been sent 1 day before on the squad channel
•  Figma Final prototype checklist is complete

Here you can describe all the solutions that were considered during the “ideate” step and, if relevant, why they haven’t been chosen.

Once the feature or page is online, it should be followed to check if further iterations are needed. Here you can gather everything useful for next iterations.

🗒 Best practices

•  Define KPIs to compare before/after the feature