Putting this in @Cntlsn's column for him to think about.

For future reference, I'm adding here some feedback by @Dyolf77_WMF which is relevant to this task.

• The four modules at the top of the page (Start module) look confusing on first visit, and don't convey a clear hierarchy on where to get started (they have same size, same color treatment)
  • When I used the Home page for the first time, I was a little bit confused how to use it. There are so many boxes and I was searching what to do first and how I could understand what task was done or not.
• A design proposal was also suggested: grey background and red link color (note: temporary solution just to show how it could work) would highlight the tasks that haven't been accomplished yet.
  

Thanks @Cntlsn my design is just a rough suggestion, fully of design errors. But I hope you understand my point of view.

Hello!

I have worked on a possible design solution to the issue of clarifying transitions between module states in the start module.

The idea is to animate elements in the module whose task has just been accomplished to capture the attention of the user upon returning to the Homepage, and to progressively dim the completed modules to convey the idea that the module turned into its "silent" state.
(The existing treatment for changing module's copy and button state will remain unchanged).

Desktop

• The completed module will feature an animated checkmark and a grey background color (entering with a light animation) when user gets back to the Homepage after completing the task.
  
• The first transition to be displayed will always be the completion of the Account creation module, on the first visit to the Homepage.
  • The checkmark icon will animate with a light bouncing effect
  • The background color will fade in
    
    
    start_module-states_transition-FIRST_STATE.mp4360 KBDownload
  • All other modules will display the same treatment and animation, when the user gets back to the Homepage after completing the related task.
• The last transition to be displayed will turn the whole start module into its temporary completed state (the definitive completed state will be addressed in T219391)
  
  • The background color for the whole start module will fade to green, while the background for the completed modules will fade from grey to green
    start_module-states_transition-LAST_STATE.mp4452 KBDownload

Desktop noJS
Users with noJS will get the dimmed background treatment, without animations.

Mobile

• The completed module will feature an animated checkmark in the Start module preview when user gets back to the Homepage after completing the task, and a grey background color (entering with a light animation) in the module details dialog when first visiting after completing the task.
• The first transition to be displayed will always be the completion of the Account creation module, on the first visit to the Homepage.
  • The checkmark icon in the Start module preview will animate with a light bouncing effect
  • The background color in the Start module details dialog will fade in
    
    
    start_module-states_transition-mobile-FIRST_STATE.mp4162 KBDownload
• The last transition to be displayed will turn the whole Start module preview into its temporary completed state
  • The background color for the whole Start module preview will fade to green
    
    
    start_module-states_transition-mobile-LAST_STATE.mp4189 KBDownload
  • At this point all the modules in the Start module details dialog will have grey background

@RHo @MMiller_WMF @Catrope Looking forward to get feedback on this before adding alla the relevant specs.

I forgot to mention that, for the new designs to work well from a visual point of view, I would suggest to remove the dividers currently placed between the modules of the Start module.
The modules are already spaced enough to communicate separation of their content and actions, removing the separators would just result in a cleaner layout.

Are we sure about moving this to 4 tasks to make to a step-by-step to complete? It is the feeling I have when I look at the mockups.

If we go for a step by step, we should make the steps more clear, with numbers.

In T221875#5410415, @Trizek-WMF wrote:

Are we sure about moving this to 4 tasks to make to a step-by-step to complete? It is the feeling I have when I look at the mockups.

If we go for a step by step, we should make the steps more clear, with numbers.

It is likely that the number of tasks or content of the tasks may change, and given they are not meant to be sequential steps, I support @Cntlsn's design which keep it to this minimal animation change for now (with no numbers).