SwiftRetro

01 Onboarding screens for SwiftRetro

Step 1 of the onboarding process for facilitator persona (Sign up).

1. Sign-up
1.1 Wizard is a indicator as to how many steps are remaining and which step the user curretly on. There are 2 scenarios possible one

is Sign up from google, and the 2nd is manual entry of details.

In this screen, all fields are inactive. There is no complusion for stating your company email address.

Time zone has a dropdown. (remove helper text)

1.2 Below sample is for active fields and for the password strength indicator. Once all the mandatory fields are filled the
next button would become active.

1 Sign-up 2 New retro 3 Select template 4 Select icebreaker 5 Invite members

Hello!

Welcome to

SwiftRetro First name* Last name*

Inara Nilgiriwala

Company email*
inaranilgiriwala@digite.com
Share your office email address, it will help us personalise your onboarding experience
“The goal of retrospectives is
Company name*
help teams to continuously

Digite Or Sign up with Google

improve their way of working.”
-Ben Linders
Password* By signing up, I accept the company’s privacy policy
***************
Strong password
Confirm password*
***************

Time zone*
IST

next

1.3 Below is the sample when a user has entered a wrong email address.

1.4 Below sample is for weak password validation.

1.5 Below sample is for average password validation.

1.6 The minimum lenght of password should be 8 characters.

1.7 The maximum lenght of password should be 20 characters.

1.8 Error state when password does not match.

SwiftRetro

Onboarding screens for new retro

02 Step 2 of the onboarding process for facilitator persona. User can create and schedule a retro.

2. New retro (for facilitator)

2.1 Once the user has completes the Sign up step, we will ask users to enter retrospective name. Users can also use toggle

button to schedule the retrospective for a later date.

Once the retrospective name is entered by user, the next button will get activated and they can proceed to the next step.

2.2 User has named the retro.

2.3 User has enabled the toggle button to schedule the retro for a later date. A start date text field would be displayed.

2.4 Upon clicking the text field user can select the start date from the calendar component.
2.5 Once user has choosen a start date the text field will get populated

2.6 Feedback option

Note There are two possible scenarios possible after the above screen
If the user choses to start his retro right away he will not turn on the toggle for schedule retro.
If the user want to schedule for later date he will turn the toggle on and he can choose a date and schedule the
retro
The steps for both scenarios are same till invite members
If he has scheduled a retro and invited the members he will be taken to the home pag
If he wants to start the retro right away he will continue setting up the retro
If he cancels the onboarding steps, then we will take him to the feedback page
SwiftRetro

Onboarding screens for select template

03 Step 3 of the onboarding process for facilitator persona. Here the user can choose any template.

3. Select template (for facilitator)

3.1 Once the user come to template selection, by default most used template would be selected. Users can choose to select

another based on their preference.

User can also click on back - they will go to the previous step. To cancel the onboarding process click the cancel button.
SwiftRetro
Onboarding screens for select Icebreaker
04 Step 4 of the onboarding process for facilitator persona. Here the user can select one of the four

Icebreaker. User can choose to continue without an Icebreaker.

4. Select Icebreaker (for facilitator)

4.1 User can select any of the four ice breaker template. If user selects the ice breaker question, then they will have to set one

question with four multiple choice answers.

If user wants to continue without the ice breaker question, they can check the check box that says continue without ice breaker

4.2 User will get a form where they can type their ice breaker question and set multiple choice answers in the text fields.

Radio button would also be displayed.

4.3 User is typing the ice breaker question.

4.4 User is setting the multiple choice answers

4.5 Once the user saves the ice breaker, Next button will get activated

4.6 Once the user saves the ice breaker, a snackbar info will come “icebreaker question saved sucessfuly.”

Note: Press next button to go to the next step.

SwiftRetro

Onboarding screens for invite members

05 Step 5 of the onboarding process for facilitator persona. This is the last step of the onboarding.

5. Invite members (for facilitator)

5.1 Inactive fields for Team member access.

5.2 User will start typing the email ids to invite. Once they hit enter button or space button the text will convert into a chip.

5.3 User has added members in invite facilitator column and invite contributor column.

5.4 Sample for when user has added multiple users in invite contributor text field (multi line).
5.5 Facilitator text field will have a maximum of 2 row of chips and contributor text field will have 4 rows with a scroll.

5.6 On click of guest access tab user can copy link or downlaod QR code.

5.7 Sample for snackbar when the link is copied.

Note : Once the user has added the the participants and clicks on finish button invite will be sent.

User will move to next step. (Retrospective settings screen)

SwiftRetro

Start a New Retro

06 This would be the first page the facilitator would be taken when the retro has not been scheduled

for a later date. Facilitators first action would be to upload a profile pic and tweak the default

settings based on their needs.

6. Retrospective Settings (for facilitator)

6.1 After the completion of the onbaording user will be directed to the Retro settings page. The “change profile picture” modal


is shown so that the user can upload a profile photo. This modal is only shown in the first retrospective after the onboarding.

6.2 User has uploaded the profile picture.

6.3 Once user uploads his profile picture. User comes to “time for retro steps”, time is set by default for all steps.

User can change the time according to their requirements. User proceeds to next step by clicking next button.

6.4 User can set number of votes per participant to be used while voting.

6.5 Participants joining the retro would be seen on the right participants panel in real time. The particiants panel will be open by

default. Names will be alphabetically sorted. Once the facilator feels enough participants have joined they can start the retro.

Note: Facilitator can also use share icon to invite more members. (this use cases will be cover in further screens)
SwiftRetro

Icebreaker step
07 Icebreaker is the first step of a retrospective process once started. It is a activity or game designed

to welcome attendees and warm up the conversation among participants.

7. Icebreaker (for facilitator)

7.1 After setting up the retro, the user will come to the first step of the retro “Icebreaker”. Based on what type of icebreaker the

facilator has choosen, they will get the response screens respectively showing the four options.

Option one - Icebreaker - The question which had been set earlier will be displayed with the summary view and in a graph style

format, by default the graphs will be on zero. When the participants start submitting their responses, the facilitator will be able

to see the response in form of the graph. To keep an eye of how many participants have voted user facilitator can view that in the

below summary tab.

We have pause and stop buttons and the timer which is set by the facilitator, running. (Explaination in screen 7.7 and 7.8 screen)

7.2 The facilitator can view real time responses.

7.3 Option two - Happiness Index - This question which had been set earlier will be displayed with the summary view and in a

graph style format, by default the graphs will be on zero. (properties are same just the visuals are changing, same as 7.1)

7.4 The facilitator can view real time responses. (same as 7.2)
7.5 Option three - Explorer, shopper, vacationer and prisioner- The question which had been set earlier will be displayed with

the summary view and in a graph style format, by default the graphs will be on zero. (properties are same just the visuals are

changing, same as 7.1)

7.6 The facilitator can view real time responses. (same as 7.2)

7.7 Option four - Sprint weather report.- The question which had been set earlier will be displayed with the summary view

and in a graph style format, by default the graphs will be on zero. (properties are same just the visuals are changing, same as

7.1)

Timer properties - Timer will start automactically on every step

If facilitator stops the time, the timer becomes zero and red. The next step (Ideate) gets activated.

If the facilitator pauses the time, only the time will get paused, all the action on both facilitator and team member side will

stay activated. No step will get activated.




For expample : If the facailitator sets the timer for 15 mins and when 5 mins are left the alarm will beep and timer will turn

amber.

When the timer is set for less than 5 mins and the timer will turn amber when it reaches 4mins. When timer reached 0 it will

turn red.



When the time runs out the timer will turn red and the timer will keep going to indicate how much time has been utilized

even after the timer has run out. This will be in red only.

When the timer reaches the amber state a snack bar will come “add your card fast, only 5 mins are left”.
7.8 Once the timer is zero (red state), next step will be activated and facilitator can move to the Ideate step.

7.9 By clicking on the top left hamburger icon, facilatator can collapse the left side panel. Facilitator can referesh by clicking on
the refresh icon.

7.10 Once facilitator clicks on the participants image in the action bar, member panel will slide out from the right.

7.11 In this screen facilitator is trying to revoke himself as the facilitator, but gets an error.

7.12 Facilitator selects a team member and grants them the facilitator rights.

7.13 Confirmation dialog open up when facilitator clicks on ideate label or right arrow in action bar. This comfirmation bar
comes on each step when user trys to move to next step.
SwiftRetro
Ideate step
08 Ideate is the second step of a retrospective process. The facilitator should explain how the
technique works based on the template chosen for the retrospective. They would then set a
timebox for the ideate step depending on the size of the team. Facilitator makes sure the entire
team is aware of the procedures and everyone feels comfortable moving forward.

8. Ideate

8.1 Once FC comes to ideate phase, FC can view the screen in 1x, 2x, and 3x views. 2x is the default view for all the users.

This sample shows 1x veiw.




Timer properties will remain same as defined in the screen 7.7 and 7.8.

FC will be able to add cards by clicking on the add icon in each column. Cards will added below the input add card field. Input
card fields position is fixed to the top. Total number of cards added will be displayed next to the name of column.

Team member panel will have the same properties as defined in 7.10.

8.2 The 3x zoom level view in Ideate phase.

8.3 Empty state for 2x view.

8.4 In this screen the facilitator has clicked on the add icon. Facilitator can write his views in the card and can add how many

ever views he wishes to address.

8.5 A sample where facilitator has added a card.

8.6 This screen shows sample where facilitator has added multiple cards .

8.7 Multiple cards added in multiple columns.

8.8 Add comment input field has been closed in this screen.

8.9 Once the Fc click on the over flow menu on the card. FC will be able to perform 2 actions “edit” and “delete”.

8.10 Delete validation

8.11 Sample for when the facilitator double clicks or clicks the edit icon via overflow menu. A card modal pops up where

the facilitator can edit the content and save.

8.12 When the facilitator clicks on the share button a modal pops open. Here the facilitator can add users to send an invite.

In the admin settings screen when the ‘invite user only from my company” setting has been enabled, any external Email IDs

would be displayed in red error state. If this setting is disabled then facilitator can invite anybody with any email credentials.

Refer to screen 5.1 - 5.5

8.13 Refer to screen no. 5.6 and 5.7.

8.14 The facilitator can drag and increase the width of the columns.

8.15 Timer propertitise refer to screen 7.7 and 7.8

8.16 Timer propertitise refer to screen 7.7 and 7.8

 09 Group step
SwiftRetro

Group is the third step of a retrospective process. Once the team has submitted their ideas;
facilitator can combine similar or related ideas into themed groups to make them easier to discuss.
In this step, the facilitator can drag and drop similar ideas into groups.

9. Group
9.1 After the Ideate step is over, the facilitator will proceed to the group stage where all the participants cards would be
populated in 2x card zoom level. 2x card view would be the default state. Zoom level can be changed as per user preference.

9.2 The Facilitator will start making groups by dragging and droping cards on top of each other in their respective columns.
They cannot be dragged and dropped to other columns.

9.3 In this screen the facilitator has created a group which is indicated by the text “Group” in bracket. Only for the grouped
cards navigation icons are present so the user can navigate between the different cards inside the group.

9.4 Under the group overflow menu user will have the option “Set as cover”. The facilitator can set any particular card as the
group’s cover card. Facilitator can also add, delete and edit the cards.

9.5 A cover card will be shown with a pin icon upfront. A cover card can only be set when a group is created.
9.6 For grouped cards, navigation icons are shown for the users to switch between the different cards.

9.7 Facilitator can expand the column and see multiple groups. If facilitator tries to expand the grouped cards for eg. 2/3
columns then to avoid the variable card height issue, the size of the column will reduce to one column and grouped cards will
been show in an expanded view.

9.9 Sample below is when the facilitator has expanded the group in 3x zoom level.

9.10 Sample below is when facilitator has changed the zoom level to 1x.
 10 Vote step
SwiftRetro

Vote is the fourth step of a retrospective process. Facilitators would customize the total votes per
person to suit the needs of their teams in the beginning of the retrospective. The idea with the
biggest number of votes would be taken up for discussion. Swift Retro will automatically organize
the cards for discussion based on which ones have the most votes when facilitator clicks on “Auto
allocate”. With this feature facilitator can easily save their time compared to manually calculating
and organizing this information.

10. Vote
10.1 After the facilitator proceeds to “Vote” step the members side panel is shown upfront along with the participants
remaining votes. Facilitator can close the member panel by clicking on the close icon. By default all the card vote count will be
zero.

10.2 When the facilitator closes the side panel an info snackbar is shown. All names will be alphabetically sorted in the team
member panel.

10.3 As participants are voting, the vote count on cards would keep increasing but the poisition of cards will stay fixed.

My votes are shown with a filled green vote icon and would be placed at the top left corner of each respective columns. Other
voted cards will be shown in decending order of the vote count.

10.4 For e.g. in 2/3 columns if facilitator tries to expand the grouped cards then to avoid the variable card height issue, the size
of the column will reduce to one column and grouped cards will been show in an expanded view.

Add, delete and edit can be done in vote step also.

10.5 If a facilitator exceeds their vote limit an error snackbar would be shown.

10.6 The position of card will get refreshed once the facilitator clicks on refresh board or when the timer is up.

10.7 When the timer reaches 00.00.00 then next step will get activated. A new column will also get added next to 3rd column
named “Cards to be Discussed”.

10.8 In the “Cards to be discussed” column an auto allocate clickable link is present. If facilitator clicks the auto populate label
then the 5 most voted cards will be shifted to this column.
10.9 Auto allocate of cards when the link is clicked.

10.10 Facilitator can also remove and add cards by simple drag and drop.

10.11 3x Card zoom level view.

10.12 1x card zoom level view.

 11 Discuss step
SwiftRetro

Discuss is the fifth step of a retrospective process. Based on the voting stage results the facilitator
would pick a few issues to work on and create concrete action plans of how they’ll address them.
The goal of this step is to find the root cause of the selected problem using the 5 Whys activity

11. Discuss
11.1 When the facilitator proceeds to the dicsuss step the “Dicsussion and action items”panel will be shown upfront.

If facilitator opens team member panel the “Discussion and action items” panel will collapse automatically and once the
facilitator closes the team member panel the “Discussion and action items” panel will slide out automatically.

From the “For Discussion” tab, facilitator can select any card to start a discussion.

11.2 When a card is selected for discussion it would be colored and have a blue border highlight. On the left a problem
statement and 1st Why template gets loaded for the facilitator to enter details. Once a problem statement is added the
selected card would move to the top of the “For discussion” panel.

11.3 An inline edit mode would be shown when Facilitator clicks on “Enter your problem statement here”. Facilitator can save
the written problem statement by hitting enter. After two lines of text the problem statement would show ellipsis. If Facilitator
clicks on the edit icon a modal is shown (refer 11.19).

11.4 After the problem statement is added the facilitator can add the 1st Why.
11.5 Facilitator can add uptp 5 Whys by clicking on the add icon present on the card’s top right corner. After the first time entry
of a comment on the card, next time when the facilitator clicks on the card a modal will open with the details. They can also
access it from the overflow menu to view the details by clicking on edit. (refer 11.18)

11.6 The overflow menu has “Add root cause” & “Edit”. After the 1st Why facilitator can directly add the root cause.

11.7 Facilitator can add upto 5 Whys by clicking on the add icon. Below sample the 1st Why add icon is disabled after the 2nd Why
is added.

11.7 FC has clicked on the add icon and added 2nd why. As soon as FC added 2nd why the add icon on the 1st why gets disable.

11.8 In the below scenario all the 5 Whys have been added. To add a root cause in facilitator has to click on overflow menu. Once
a root cause has been added, the facilitator can add an action item by clicking on the add icon in the Root cause card. A modal is
shown to add the action item.
11.9 Facilitator can also add root cause after the 1st, 2nd, 3rd, 4th, and 5th why.

11.10 Facilitator can also add an action item from the tab in the right panel.

11.11 Below is a sample of the “Add Action Item” modal

11.12 Facilitator filling the details (assigning users).

11.13 Facilitator filling the details (selecting due date).

11.14 Facilitator filling the details (selecting priority).

11.15 Once all the details are filled facilitator clicks on the add button.

11.16 When a action item is successfully added it would show up in the “Action Item” tab.
11.17 When a card discussion is over and a action item has been created, a tick icon will be shown on that particular card.

11.18 Refer 11.5

11.19 Refer 11.3

 12 Feedback step
SwiftRetro

Feedback is the last step of a retrospective process. The goal of this last step is to sum up the
results of the Retrospective and generally leave a good feeling behind for the participants of the
meeting. . Here the facilitator would clarify follow-up; appreciations; clear end; how could the
retrospectives improve?

12. Feedback
12.1 In the retro feeback screen facilitator will see the real time responses of the participants regarding the feedback they share
about the retro.

Facilitator can view the comments given by the participants on the right side panel. Facilitator can also pin the comments.

12.2 Sample for no feedback.

SwiftRetro

01 Onboarding screens for SwiftRetro

The onboarding process for Team member persona (Sign up).

1. Sign-up
1.1 When an invite has been sent by the facilitator, an email will be sent to those respective email IDs. The email would contain
the below information with an “Accept Invite” button. Once users click on the “Accept Invite” button they onboarding process
would start. The onboarding screens for the invite members are different compared to the facilitator screens.

1.2 Once the user accepts the invite they would to directly to the below screen. By default all text fields would be inactive.

1.3 User would need to fill in the details available on the page. This includes the first name, last name, password and timezone.
Password would show the strenght meter. No email address would be taken since the user is accepting the invite from their
email and the facilitator has already provided the email address. Next button will be inactive till all the text fields are filled.

Below is a sample for weak password strength meter.

1.4 Below sample for Average password strength meter.

1.5 When passwords do not match we will give them an error

1.6 Minimum lenght of password : 8 characters

1.7 Maximum lenght of password: 20 characters

1.8 Strong password screen and all activated fields. when all fields are filled then only the next button will be activated
SwiftRetro

Landing page of the New Retro

02 This would be the first page the team member (participants) would be taken when the retro has

not been scheduled for a later date. Team member (participants) first action would be to upload a

profile pic if they have logged in for the first time while they wait for the facilitator to start the

retro.

2. Retrospective landing page (For team member / participant)

2.1 After the completion of the onbaording user will be directed to the Retro settings page. The “change profile picture” modal


is displayed where user needs to upload a profile photo if they are first time users of the application.

2.2 Participant has updated their profile picture.

2.3 Participant can view other participants joining the retro on the members panel while they wait for the facilitator to start the

retrospective.
wiftRetro
Icebreaker step
03 Icebreaker is the first step of a retrospective process once started. Participants would need to
S

answer the question and submit. The responses given would be anonymous A timer would be set

by the facilitator.

3. Icebreaker (For team member / participant)

3.1 Participants need to choose one option from the multiple choice question. Sample for “How are you feeling?”

Participants will not be able to control the retro unless they are given facilitator rights.

3.2 Upon submission of the participant’s answer they will be taken to summary view.

7.8

3.3 Participants need to choose one option from the multiple choice question.

Sample for “Explorer Shopper Vacationer Prisioner”

7.9

3.4 Upon submission of the participant’s answer they will be taken to summary view.

7.10

3.5 Participants need to choose one option from the multiple choice question.

Sample for “Weather Report”

3.6 Upon submission of the participant’s answer they will be taken to summary view.

3.7 Participants need to choose one option from the multiple choice question.

Sample for “Custom Icebreaker question”

3.8 Based on the time set by the facilitator, participants would be notified at certain intervals that the time limit is about to get

over. E.g. If facilitator has set time for 15 mins and 5 mins is left then a snackbar will be pushed “add your cards fast only 5min

is left.” The timer will also turn amber and the participant would also be alerted by a alert sound.

3.9 When the timer is over it would turn red and a snackbar would be pushed “Timer for icebreaker is over.”

If team member joins the icebreaker late, they would need to submit their answer in the time left for that step. If the time is over

and facilitator has moved to next step then the participant would also proceed to the next step.

3.10 When the participant has finished submiting their answer and the time is up a snackbar will be pushed “Please wait for the

facilitator to move to next step”.

 04 Ideate step
SwiftRetro

Ideate is the second step of a retrospective process. The team member (participant) need to
follow the instructions given by the facilitator. They would need to submit their idea within the
given time frame. They cannot navigate between different steps.

4. Ideate (For team member)

4.1 When team member (participant) comes to ideate phase, team member can view the screen in 1x, 2x, and 3x zoom level. 2x
zoom level is the default view for all the users.



Timer properties will remain same as defined in the screen 7.7 and 7.8. (in facilitator screen)

Team member can add cards by clicking the add icon in each column. Cards will added below the input add card field. Input
card fields position is fixed to the top. Total number of cards added will be displayed next to the title of column e.g. Glad (1).

Team member panel will have the same properties as defined in 7.10. (in facilitator screen)

Below sample shows 1x veiw.

4.2 Below sample for 3x zoom level view in Ideate phase.

4.3 Below sample for 2x zoom level view in Ideate phase.

4.4 In this screen the participant has clicked on the add icon. Participant can write their views in the card and can add how
many ever views they wish to address.
4.5 A sample where participant has added a card.

4.6 This screen shows sample where participant has added multiple cards .

This screen shows multiple cards added.

4.7 Multiple cards added in multiple columns.

4.8 Add card input field has been closed in this screen.

4.9 Once the participant clicks on the overflow menu on the card two actions “edit” and “delete” are available.

4.10 Below is a sample for delete validation.

4.11 Sample for when the participant double clicks or clicks the edit icon via overflow menu. A card modal pops up where the
participant can edit the content and save.
4.12 When the participant clicks on the share button a modal pops open. Here the participant can add users to send an invite.

In the admin settings screen when the ‘invite user only from my company” setting has been enabled, any external Email IDs

would be displayed in red error state. If this setting is disabled then participants can invite anybody with any email credentials.

Refer to screen 5.1 - 5.5.(in fc screens)

4.13 Refer to screen no. 5.6 and 5.7.(in fc screen)

4.14 The participant can drag and increase the width of the columns.

4.15 Timer properties refer to screen 7.7 and 7.8 (in facilitators screens)

4.16 Timer properties refer to screen 7.7 and 7.8 (in fc screens)
SwiftRetro

Group step
05 Group is the third step of a retrospective process. Once everyone has submitted their ideas;

facilitator can combine similar or related ideas into themed groups to make them easier to discuss.

In this step, only the facilitator can drag and drop similar ideas into groups. For the participants

they can view the cards submitted by other members.

5. Group (For team member/ participant)

5.1 When the Ideate step is over, The participants will come to the group stage where all the cards from all participants will be

populated in 2x default view. The banner gives participants info that the facilitator is grouping similar cards so please wait.

5.2 Once the facilitator has created groups, participants can view the grouped cards by clicking on the refresh board icon. The

facilitator would notify them when groups have been created.

5.3 Participant can expand the column and see multiple rows of groups.

If participant tries to expand the grouped cards for eg. 2/3 columns then to avoid the variable card height issue, the size of the

column will reduce to one column and grouped cards will been show in an expanded view.
5.4 In overflow menu an option to set as cover card is given. Only facilitator can set a particular card as the groups cover card.

Participants can also add, delete and edit the cards in group step. Refer to screen 8.9 (Facilitator Ideate). That cover card will be

shown upfornt with a pin icon. Participants can toggle between the different cards inside a particular group by clicking the

arrows.

5.5 When the facilitator has created any group a snackbar would appear.

5.6 Sample for 1x zoom level view in group step.

5.7 Sample 3x zoom level view for group step.

5.8 Sample of 3x view group expanded.

SwiftRetro

Vote step
06 Vote is the fourth step of a retrospective process. Team members can give votes to any cards. The

idea with the biggest number of votes would be taken up for discussion.

6. Vote (For team member/ participant)

6.1 When the participants proceeds to the vote step the members panel showing will be open by default. It would show the

remaining votes for each individual participants.

Participants can close the member panel by clicking on the close icon. On the cards the vote count will be zero by default.

6.2 As soon as participants closes the member panel a snackbar info would be pushed. All the names in team member panel will

alphabetically sorted.

6.3 As participants votes, the vote count on cards would keep increasing but the poisition of cards will stay fixed.

My votes are shown with a filled green vote icon and would be placed at the top left corner of each respective columns. Other

voted cards will be shown in decending order of the vote count.

6.4 For e.g. in 2/3 columns if participant tries to expand the grouped cards then to avoid the variable card height issue, the size of

the column will reduce to one column and grouped cards will been show in an expanded view.

Add, delete and edit can be done in vote step also.

6.5 If a participant exceeds their vote limit an error snackbar would be shown.

6.6 The position of card will get refreshed once the facilitator clicks on refresh board or when the timer is up.

6.7 3x zoom level view in voting phase.

6.8 1x zoom level view in voting phase

6.9 When the timer reaches 00.00.00. A new column will also get added next to 3rd column named “Cards to be Discussed”.

FC clicks on the auto populate label and 5 most voted card shifts to new column.

6.10 Participant can view the 5 most voted card shifted to new column.

6.11 3x zoom level card view in “Card to be dicsussed” column.

6.12 1x zoom level card view in “Card to be discussed” column.

 07 Discuss step
SwiftRetro

Discuss is the fifth step of a retrospective process. Based on the voting stage results the facilitator
would pick a few issues to work on and create concrete action plans of how they’ll address them.
Participants would only be able to view at this stage.

7. Discuss (For team member/ participant)

7.1 When the participants proceeds to the dicsuss step the “Dicsussion and action items”panel will be shown upfront.

If a participant opens team member panel the “Discussion and action items” panel will collapse automatically and once the
facilitator closes the team member panel the “Discussion and action items” panel will slide out automatically.

Participants will wait for facilitator to select the card and start dicussion on the card. In this step participants can only view and
will not be able to perform any actions.

7.2 Participants can view the facilitator is typing the problem statement. Once the problem statement is added by the facilitator
then the participants can read what has been written.

7.3 Once the Problem statement is added facilitator will start writing the first why. The participants will be shown that “Sudipta
Lahiri is typing..”

7.4 First why is added by the facilitator

7.5 Participant is viewing that facilitator is typing 2nd why.

7.6 5 Whys have been added and the last card is for the root cause

7.7 In this scenario, The facilitator has just add 3 Whys and added the root cause directly. The two whys which has not been
added will be blank but their position won’t change.
7.8 Participants can click on the action item tab to view the action items.

7.9 Action item is added by the faciliator in action item tab.

7.10 Participants can view the problem statement by clicking on the problem statement section.

7.11 Participants can view the 1st why by clicking on the card.
 08 Feedback step
SwiftRetro

Feedback is the last step of a retrospective process. The goal of this last step is to sum up the
results of the Retrospective. Participants would need to rate the retrospective and share feedback
if they want.

8. Feedback
8.1 Participants have to select one of the three options and share a feedback. Feedback is not mandatory.

8.2 Sample for when the participant has selected one option and written a feedback.

Once participants are done with the feedback they will be taken to the home page of the of SwiftRetro account.
 01 Onboarding screens for SwiftRetro
SwiftRetro

The onboarding process for Team member persona (Sign up).

1. Sign-up
1.1 The guest user can only be invited through an link or a QR code. GU will come to this screen where he has to enter to his first name and

last name both mandatory fields. JOin retro button will be inactive becuase fields are not filled

1.2 Active fields. Join retro button activated once the fields are filled. There is no need for email.
SwiftRetro

Landing page of the New Retro

02 This would be the first page the team member (participants) would be taken when the retro has

not been scheduled for a later date. Team member (participants) first action would be to upload a

profile pic if they have logged in for the first time while they wait for the facilitator to start the

retro.

2. Icebreaker (Guest user)

2.1 Once the guest user has entered his name he will enter the retro, he won’t be having any access to the left side panel and to

share retrospective.

BS
 03 Icebreaker step
SwiftRetro

Icebreaker is the first step of a retrospective process once started. Participants would need to
answer the question and submit. The responses given would be anonymous A timer would be set
by the facilitator.

3. Icebreaker (Guest user)

3.1 The question set by the TM, will be shown to the GU he has to choose one option in order to move forward.

BS

3.2 Once u have selected one option from the above screen, the next screen will be this, where we are showing the graph of the
responses and also the summary.

BS

3.3 Same features as the above screen. Visuals for Explorer, shopper, vacationer, prisoner

BS

3.4 Similar to above screen. Explorer, shopper, vacationer, prisoner

BS

3.5 Same features as the above screen. Visuals for Weather report

BS
3.6 Similar to above screen. Visuals for Weather report

BS

3.7 Similar to above screen. Visuals for Select Ice breaker questions

BS

3.8 Similar to above screen. Visuals for Select Ice breaker questions. A snack bar will come up when there are just 5 mins
remaining

BS

3.9 Similar to above screen. Visuals for Select Ice breaker questions. A snack bar will come up to inform to wait for the FC to
move to the next step.

BS

3.10 Similar to above screen. Visuals for Select Ice breaker questions. A snack bar will come up to inform that the time for ice
breaker is over

BS
SwiftRetro

Ideate step
04 Ideate is the second step of a retrospective process. The team member (participant) need to follow

the instructions given by the facilitator. They would need to submit their idea within the given time

frame. They cannot navigate between different steps.

4. Ideate (Guest user)

4.1 When guest user (participant) comes to ideate phase, guest user can view the screen in 1x, 2x, and 3x views. 2x is

the default view for all the users.

This sample shows 1x veiw.




Timer properties will remain same as defined in the screen 7.7 and 7.8. (in fc screen)

Guest user will be able to add cards by clicking on the add icon in each column. Cards will added below the input add

card field. Input card fields position is fixed to the top. Total number of cards added will be displayed next to the name

of column.

Guest user panel will have the same properties as defined in 7.10. (in fc screen)

BS

4.2 The 3x zoom level view in Ideate phase.

BS

4.3 This is the by default 2x view, which the GU will see when they come to this step. GU can change the view to 1x or 3x .

BS

4.4 In this screen the guest user has clicked on the add icon. Guest user can write his views in the card and can add how many

ever views he wishes to address.

BS
4.5 A sample where guest user has added a card.

BS

4.6 This screen shows sample where guest user has added multiple cards .

BS

4.7 Multiple cards added in multiple columns.

BS

4.8 Add comment input field has been closed in this screen.

BS
4.9 Once the participant click on the over flow menu on the card. Participant will be able to perform 2 actions “edit” and “delete”.

BS

4.10 Delete validation

BS

4.11 Sample for when the guest user double clicks or clicks the edit icon via overflow menu. A card modal pops up where
the guest user can edit the content and save.

BS

4.12 The guest user can drag and increase the width of the columns.

BS

4.13 Timer properties will remain same as defined in the screen (7.7 and 7.8 in FC section).

BS

4.14 Once the timer is up guest user will receive the snackbar saying please wait for the facilitator to move to next step.

BS
 05 Group step
SwiftRetro

Group is the third step of a retrospective process. Once everyone has submitted their ideas;
facilitator can combine similar or related ideas into themed groups to make them easier to discuss.
In this step, only the facilitator can drag and drop similar ideas into groups. For the participants
they can view the cards submitted by other members.

5. Group (Guest user)

5.1 When the Ideate step is over, The guest users will come to the group stage where all the cards from all participants will
be populated in 2x default view. The banner gives participants info that the facilitator is creating group, please wait.

BS

5.2 Facilitator has created the group.


Participants can see the groups that has been made.

BS

5.3 Guest users can expand the column and see multiple rows of groups.

If participant tries to expand the grouped cards for eg. 2/3 columns then to avoid the variable card height issue, the size of
the column will reduce to one column and grouped cards will been show in an expanded view.

BS

5.4 The Guest user will just be a able to witness these things. Can use the navigation icon to move to the next card.

BS
5.5 Guest user can expand the column and see multiple groups.

If guest user tries to expand the grouped cards or cards in 2 column or 3 column, to avoid the variable height issue the size
of the column will reduce to one column and grouped cards will open up in one column.

BS

5.6 3x view of guest user page

BS

5.7 Open grouped cards in 3x view

BS

5.8 1x view of group step

BS
SwiftRetro

Vote step
06 Vote is the fourth step of a retrospective process. Team members can give votes to any cards. The

idea with the biggest number of votes would be taken up for discussion.

6. Vote (Guest user)

6.1 Once the guest user comes to vote step the side panel showing the participants and their remaining votes will be open.

Guest user can close the member panel by clicking on the close icon on the panel. By default all the vote count will be zero.

BS

6.2 As soon as GU closes the side panel we will show the info. snackbar saying “click on the team members image to open

the team membes panel”. All the names in team member panel will alphabetically sorted.

BS

6.3 As people are voting, the vote count on cards will keep incrementing but the poisition of cards will stay fixed.

The cards with the green (my votes) will be in the top left corner of respective column followed by the other cards in

decending vote count.

BS

6.4 The guest user can expand the grouped card in vote phase also. If GU tries to expand the grouped cards or cards in 2

column or 3 column, to avoid the variable height issue the size of the column will reduce to one column and grouped cards

will open up in one column.

Add, delete and edit can be done in vote step also.

BS
6.5 Guest user has collapsed the group and cards will remain in one column only. GU can expand the column to 2, 3, or 4 columns.

BS

6.6 If the Guest user has exceesed the vote limit, a snackbar will come up stating that you have reached you vote limit.

BS

6.7 Guest users have to wait for the FC to move to next step.

BS

6.8 3x card view in vote step.

BS

6.9 1x card view in vote step.

BS
 07 Discuss step
SwiftRetro

Discuss is the fifth step of a retrospective process. Based on the voting stage results the facilitator
would pick a few issues to work on and create concrete action plans of how they’ll address them.
Participants would only be able to view at this stage.

7. Discuss (Guest user)

7.1 Once the guest user will come to the discuss screen, He will wait for the faciitator to select one card. Then the card will come
on the to of the right hand side panel and be highlighted.

BS

7.2 Guest user will see that facilitator is typing the problem statement. Once the problem statement is added by the facilitator
then only guest user will be able to see it.

BS

7.3 Once the Problem statement is added facilitator will start writing the first why. The guest user will be shown that “Sudipta Lahiri is typing..”

BS
BS

7.4 First why is added by the facilitator and facilitator is adding 2nd why.

BS
7.5 5 whys has been added and the last card is for the root cause

BS

7.6 In this scenario, Thefacilitator has just 3 reasons so he has added root cause directly. The two whys which has not been
added will be blank but their position wont change.

BS

7.7 Guest user clicked on the action item tab to view the action items.

BS
7.8 Action item is added by the facilitator in action item tab.

BS

7.9 Guest user can view the 1st why by clicking on the card.

BS

7.10 Guest user can view the problem statement by clicking on the problem statement section.

BS

7.11 If Guest user selects the any other card on which no dicsussion has taken place then guest user will be shown a illustration
with a text saying no dicussion has taken place on this card.

BS
SwiftRetro

Feedback step
08 Feedback is the last step of a retrospective process. The goal of this last step is to sum up the

results of the Retrospective. Participants would need to rate the retrospective and share feedback

if they want.

8. Feedback (Guest user)

8.1 Guest user has to select one of the three options and enter the feedback as well. Feedback is not mandatory.

BS

8.2 Guest user has added and the feedback and click on the submnit button.

Once Guest user is done with the feedback he will taken to the home page of the SwiftRetro.

BS
SwiftRetro

01 Home Page screens for SwiftRetro

This would be the page when “Admin” or “team member” view once they finish the the retrospective

steps. New retro can be created from the left side panel. Users can view the details about Retro summary,

Actionable summary, My collection and Last 5 retrospectives.

1. Home page
1.1 There are four widgets in home page.

a) Retro summary : In this widget the team member can only view the details of upcoming retro, closed retro and retro they are
part of. Admin can view the details of all retros.

b) Actionable summary : In this widget the team member can only view the details of their open action items, closed action
items and action items exceeded due date.. Admin can view the details of all actionables.

c) My collection : In this widget the team member can create their own collections by clicking on create new label button or by
dragging and dropping the retrospective inside the “My collection” widget. Admin can view all the collections.

d) Last 5 Retrospective : In this widget the team member can view their “Last 5 retrospectives” which are reversed sorted
based on start date. Admin will view the last 5 retrospective that is been started by any team member in the organisation. Team
members and admin can click on “View all” to enter the listing page of retrospectives.
SwiftRetro

02 My collections screens for SwiftRetro

In my collection widget users can create collection in which they can add existing retrospectives and club them

together. Users can create multiple collections, one collection can have multiple retrospectives. A retrospective

can not be part of multiple collection.

2. My Collection

2.1 To create a new collection user should click on the “Create new” label inside the my collection widget. A modal would open,

where the user has to enter the collection name (mandatory), description and select retrospective.

2.2 In this sample user clicks on select retrospective dropdown to see the list of retrospectives to add inside the collection.

2.3 Selected retrospectives will be shown in chip format. After the details are filled, users can click on create button for the
collection to be created.

2.4 After the creation of a collection it will show up in my collections widget. The collection would show the no. of
retrospectives and when it is last updated.

2.5 In this sample user is draging and dropping the retrospective from “Last 5 retrospective” widget. User can only drag and drop

one retrospective at a time. In the sample below the “Design Team Collection” gets focused when the user has dragged a retrospective

on it.
2.6 In this sample user is dropping the retro in the “My collection” widget when there are no collections added.

2.7 When the my collection widget is empty and user has dragged a retrospctive inside it, the create new collection modal
would open and the selected would be prepopulated in text field.

2.8 User can create a new collection when all required deatils are filled. Select retrospective field is a multiselect dropdown.

2.9 Sample for filled “My Collections” and “Last 5 retrospectives” widgets.

2.10 Below is the sample when a user has selected multiple retrospectives.
2.11 Below is the sample where a user has added a retrospective inside “Design Team Collection”.

2.12 User can click on “my collection” label and enter its listing page. Here the user can view all the collection that has been

created. Admin and Org. admin can view all the collections created by other team members.

2.13 Below sample is where user clicks on the overflow menu. It has “Edit” and “Delete” options.

2.14 Inline edit mode gets enable when user clicks on “Edit”. To save the changes user needs to click on the save button on action bar.

2.15 Sample for description. To reset the changes user has to click on the “cancel” button.

User can write the description in 4 or 5 lines. After saving, the description will turn into 2 lines of text with ellipsis.
2.16 Below is the sample where user clicks on the delete icon in overflow menu.

2.17 When the user clicks on the “Create” icon in the action bar, new collection modal opens up where user has to fill in the

required details.

2.19 Below is the sample where user has created two collections.

2.20 Below is the sample where user has created multiple collections.
2.21 Sample where user clicks on the “Design Team Collection” and no retrospective have been added yet.

2.22 Sample where a user clicks on the add button and a modal opens up to add retrospective.

2.23 Sample where user selects a retrospective from the dropdown.

2.24 Add button gets enabled once a retrospective has been selected by the user .

2.25 Sample where user has added a retrospective inside the collection.
2.26 Below sample is where user clicks on the overflow menu. It has “Share” and “Delete” options.

2.27 Sample where user is selecting facilitator.

2.28 Sample for start date dropdown.

2.29 Below is the sample where the text field is filled with user email ID’s. Grey chip indicates users is in enterprise and yellow

chip indicate user is not part of enterprise. In the admin settings screen if the “invite user only from my company” setting has

been disabled then any external Email IDs would be displayed in yellow state.

Team: Product Management

2.30 On click of guest access tab user can copy link or downlaod QR code.
2.31 Below is the sample when a user wants to delete the retrospective. This is the validation screen.

2.32 Refer screen : 2.22

2.33 Refer screen : 2.23

2.34 Refer screen : 2.24

2.35 Sample of list of retrospective in my collections.

2.36 Information snackbar comes when all the retrospective are added in one collection.

2.37 Sample of multiple retros in collection.

2.38 Sample for adding multiple retrospective from add retrospective dropdown.

2.39 Below is the sample when a user has added three retrospective inside collection. Even if all the retrospectives are added inside the collection,

retros will still show up in “Last 5 retrospective” widget. Retro will be sorted based on reverse order date created.

2.40 If a user wants to shift a retro that is already part of a collection to a different collection, this is the validation that we will

ask them to confirm.

SwiftRetro

03 Last 5 Retrospective screens for SwiftRetro

In this widget “Admin” see the last 5 retrospectives accessed by anyone in this organisation.

“Team member” can only view their last 5 retrospectives.

3. Last 5 Retrospective
3.1 Below is the sample when a user entered the retrospective lisitng after user clicks on view all in “last 5 retrospective” widget.

3.2 Scroll right to retrospective lisitng.

3.3 Below sample is when user clicks on the overflowmenu and gte “Delete”,”Share” and move to collection.

3.4 The minimum lenght of password should be 8 characters.

3.5 Refer sample 2.27 for editing.

3.6 Refer sample 2.29

3.7 On click of guest access tab user can copy link or downlaod QR code.

3.8 Below is the sample for delete validation

3.9 Below is the sample when a user clicks on “move to collection” from overflow menu.
3.10 Below is the sample when a user has selected the collection to move retrospective inside the collection.

3.11 Below sample is when user clicks on caeate new form “move to collection” modal. The selected retrospective will be prepopulated.

3.12 Below sample is when all the required fields are filled.

3.13 Sample for multiple collections

3.14 Sample for searching the collection.

3.15 Sample when retrospective is moved inside collections.

3.16 Sample for where user has created multiple retrospectives.

3.17 Below sample is for when user clicks on filter icon in action bar and filter panel slides out from right.

3.18 Sample for filter panel.(retro status)

3.19 Below is the sample when filters get applied and show in action bar.
SwiftRetro

04 Workboard screens for SwiftRetro

In this “Workboard” users can track their action item, add new action items and assign them to
users.
4. Workboard

4.1 Below is the sample for 1x zoom level in workboard.

4.2 Below sample is for 2x zoom level view

4.3 Below sample is for 3x zoom level view,

4.4 Sample when user clicks on the list view label icon in action bar.

4.5 Scroll right in list view.

4.6 Sample for opening global filter.

4.7 Below is the sample where user clicks on the overflow menu of card and get option to “Assign card”, ”Archive Cards” and Delete card.

4.8 Below sample is for “Assign Card” popup.

4.9 Below is the sample when a user has clicks on block from card popup.

4.10 Below is the sample when a user has clicks on unblock icon in card popup.
4.11 Below is the sample when clicks on any card popup modal open up where user can see the details of his card.

4.12 Below sample is for creating a new action item by using add icon in action bar.

4.13 Below sample is for filter panel.

4.14 Below is the sample when filters are applied.

4.15 Sample where user clicks on more to see all the applied filters.
SwiftRetro

05 My profile screens for SwiftRetro

My profile dropdown shows users personal details, billing ,change password and logout option.

Only “Admin” user can view admin settings option.

5. My Profile

5.1 When user clicks on the profile image icon user gets multiple options personal profile, Admin setting (that is only shown to
admin users), Billing, Change password and Logout.

5.2 Below sample is when user is not a part of any team.

5.3 Sample is when user is part of multiple teams

5.4 Sample is when user is not a part of any retrospectives

5.5 Sample when user is participating in multiple retropective.

5.6 Sample is for admin setting modal that is only shown to admin users.
SwiftRetro

06 My teams screens for SwiftRetro

In “My teams ” users can create their own team. Existing retro members can also be invited to

new teams that are being created.

6. My Teams

6.1 When the user enters the “My teams” section for the first time they do not have any teams. User will click on the create team

button to create team.

6.2 Sample where user will add team name and add team members to create a team.

6.3 Users has filled all the required details to create a team.

6.4 User is selects the entity (image) of the team.

6.5 User is uploading the entity (image) from system.

6.6 Team entity is updated. User clicks on the create button to create the team.
6.7 Sample when user has created a team.

5.1 When user clicks on the profile image icon user gets multiple options like personal profile,

Admin setting (thatis only shown to admin users and org. admins), Billing, Change password and Logout.

6.8 Sample when user clicks on edit button in action column. User can add and remove members form the team.

5.2 Below sample is when user is not a part of any team.

6.9 Sample where user is adding external members inside the team.

5.3 Below sample is when user is part of multiple teams

6.10 Invite member validation is shown when user trys to add external members.

5.4 Below sample is when user is not a part of any retrospectives

6.11 Sample when invite has been sent sucessfully.

5.5 Sample when you is participating in multiple retropective.

6.12 User can select multiple teams and invite the team to retrospective by clicking on the “invite to retro” label button in action bar.

5.6 Admin setting modal that is only shown to org. admin or admin users.
6.13 Sample when user is selecting the retrospectives from the dropdown.

6.14 Sample is when user has sent invite to team(s).

SwiftRetro

07 Dashboard screens for SwiftRetro

Dashboard gives users details about all the retrospectives they have been part of. Admin will be
able to see the dashboard for all the retros that have been conducted in the organization.

7. Dashboard

7.1 Dashboard is section where user can view the analytics of the retrospectives that have been completed. There are six widgets

that have been provided.

a. Total no. of retrospectives : Total number of retrospectives that user is part of.

b. Average time of retropective : Average time taken for retrospectives to complete.

c. Average time duration of retrospective steps : Average time for each step in the retros.

d. Template distribution : Number of templates used by the users.

e. Action item closure data : Tracking the open action items and time to close action items indicated in a bar chart.

f. Paticipation : Tracking the invited, joined and participated members for the retrospectives.

7.2 User can click on filter icon in “action item closure data” widget and modal opens up.

7.3 Tooltip will come when user hovers on the graphs.

 08 Help and notification screens for SwiftRetro
SwiftRetro

In Help section you will be assisted in best way to understand and help will be provided for

the swiftretro tool.

7. My Profile

7.1 Sample for help section when expanded.

7.2 Sample for no notifiactions.

7.3 Sample where user has filled all the required details to create a team.
99+

7.3 Sample for feedback page. This page opens up when user logs out or either cancel onboarding.
SwiftRetro

09 Admin screens for SwiftRetro

An would have an additional page called “All user”. In this page admin can add, edit and remove
the team members from the organisation.
9. Admin Screens
9.1 Admin can see the list of all the user who are part of this organisation.

9.2 Sample where user click on “invite user” button in action panel and modal opens up.

9.3 Admin has to select the persona.

9.4 Admin will enter the E-mail ID’s for the users to invite them to SwiftRetro.

9.5 Sample when admin click on edit button and then the inline edit mode gets enabled.

9.6 Sample where admin is selecting persona for the user.

9.7 Sample for dropdown to change persona.

9.8 Sample for admin clicks on delete icon.

9.9 Sample dialog for delete validation.

 10 Take a Tour
SwiftRetro

10. Take a Tour

10.1 Quick tour

You can access the product tour here to help

you with navigation. It will take you less than

a minute.

Close let’s go

10.2 Timer

Timer gives you indication how much time is

left for your retrospective step or how much
time have to taken to comeplete each step.
You can start or stop the timer by using the
play and stop button.

2 of 7 Prev Next

10.3 Next Step for retrospective.

You can press on the next step label or icon to

move to next step. Once the timer is over the
next step gets enable automatically.

3 of 7 Prev Next

10.4 Team members and share option

You can access the team member listing by

clicking on the team member images. You can
also invite other users by clicking on share icon.

4 of 7 Prev Next

10.5 Notifications and My Profile

You can access the notification and My profile

page by clicking on the respective icons.

5 of 7 Prev Next

10.6 Menu options

You can access the product menu option from

left side panel.

6 of 7 Prev Next

10.7 New Retro

You can create a new retro by clicking on new

retro button on the left panel.

7 of 7 Prev finish