NOTE: This post also includes 4. Microsoft Teams meetings: The process behind the prototyped redesign of the presentation mode due to the 3 post-per-day limit.
Introduction
Following the research gathered in our user mapping, personas, scenarios, task analyses and usability testing, we then began to generate prototypes of our solution. Prototypes are a starting point for UX designs that allow designers to gain early feedback on their work and allow us to fix problems in our work early in the process. This means that we can work faster, as we have not gone to the effort of developing a high fidelity product with features that will later require changes and cost time and money in the long run. We generated paper prototypes rather than wireframed prototypes, as it allowed for a more swift, fluid process. However, due to the COVID-19 pandemic, we needed to make them interactive via InVision in order to conduct usability tests so that we could accommodate for social distancing requirements.
Methodology and Deliverables
Process
Initially, we developed individual paper prototypes that were made interactive and presented to one another, identifying what worked and what did not in each prototype.
Please click the link below to view my first individual prototoype.
https://liz843363.invisionapp.com/overview/Teams-Presentations-ckggvbv9k0ae2019h9di0849s/screens
The process that we employed thereafter was an iterative model that we repeated three times. At each stage, the goals and tasks that we developed changed in tandem with the design.
Please click the following link to view the goals and tasks we defined, with older versions further down in the document.
Please click the link below to view our first group prototype.
Our first prototype was presented to and tested by our lecturer. It was found that it was quite complicated due to it being a combination of all of our ideas. Following feedback from this test, we redeveloped the next prototype that removed the “hand raised” and “pop out” functions and focused instead on making the Layout Options feature more robust.
This was present to and tested by another lecturer, who encouraged us to add features that would increase the functionality of our design. This included adding the ability to scroll through meeting participants while they’re visible in a grid and adding a “custom layout” function to allow users to move the elements on the screen around to their preferences.
After receiving feedback from both lecturers associated with the module and actioning the advised changes to the prototype, we each conducted formal usability tests.
Please click the link below to view our final prototype.
https://hanahvickers.invisionapp.com/console/share/XF1P5UBIMJ/494984203
These included gaining informed consent, either verbally or via a signed form, generating a script to follow, and guiding and recording participants through the paper prototype that we had created using the tasks that we had developed. We took recorded and took notes during our tests and collated the results to determine the usability of our prototype.
Please find the results and recordings of our usability tests in the links below.
https://miro.com/app/board/o9J_kikA5J0=/
Reflections
I conducted two tests, one in-person moderated test and one online moderated test via Skype. Unfortunately, the first usability test was undocumented due to a technical error in the recording of our session. This was an important lesson for me to test my recording apps/equipment prior to conducting tests such as these to ensure that my data is correctly gathered. Following this error, I made sure to test the app that I used to record the online moderated test worked properly before beginning my test.
I believe that we followed a robust process for in the development of our final paper prototype, and am pleased with the outcome of the design. I found that the “less, but better” approach was helpful in the refinement of the prototype, and as a user of MS Teams I would enjoy having this feature available to me.
References
4. Microsoft Teams meetings: The process behind the prototyped redesign of the presentation mode
Introduction
This post will critically analyse and evaluate our final prototype, outlining the design process we followed alongside planning and management.
Methodology and Deliverables
Critical Analysis of Prototype
Our prototype sought to add a Layout Options function to the MS Teams interface whilst presenting. During our usability tests, we found that one of our testers was confused by what this meant, and could have benefited from a tool tip to tell them what it was. Users that had seen a similar icon before and understood its meaning were able to decipher its function.
Most other confusion was due to testers being unfamiliar with MS Teams and the layout of the navigation.
Design Process
Following the design process as defined by Mayur Kshirsagar in his article for Smashing Magazine “A Brief Guide About Competitive Analysis”, we employed the steps below:
- Empathize
Understanding of the problem we are trying to solve from the user’s point of view. Personas, scenarios, heuristic evaluations, surveys, interviews - Define
Task analyses, user needs statement and user problem.
- Ideate
Come up with ideas for how the screen sharing/presentation mode could be improved. - Prototype
Creating a paper prototype that incorporates the aspects of the design that we believed would improve the experience for users of MS Teams. This was then uploaded to InVision and made clickable so that it could be used for remote usability tests. - Test
Conducting usability tests and refining the prototype based on results. This involved creating goals and tasks to follow during usability tests is an important means of guiding testers through the prototype to ensure that it works properly.
Planning and Management
During this project, we all conducted user research, prototyping, user testing and collaborated overall to ensure we were in agreement regarding the results of our research and iterations. We collaborated via MS Teams and using Miro boards to gather our findings. There were a number of tasks that required delegation due to abilities and time availability.
- Liz
Survey of MS Teams presentation mode and collate results. Group heuristic evaluation. Goals and tasks Round 1 of group prototype. Conducting 1 usability test. - Michael
Group As Is/To Be task analysis. Refine goals and tasks. Sourcing a script to follow during usability tests. Conducting 2 usability tests. - Hanah
Competitive analysis. Visual research. Survey of MS Teams overall and collate results. Round 2 and 3 of group prototype. Conducting 1 usability test.
Reflections on Prototype
Please see the final prototype below.
https://hanahvickers.invisionapp.com/console/share/XF1P5UBIMJ/494984203
Overall I am pleased with the outcome of our final prototype. If there were to be a fourth version created, I would like to have refined it to be more functionally accurate and possibly incorporated an “Audience Only” view, as the document that is being shared may be available in another window or screen. However, we were designing with the mindset that the user would only have one screen available to them, and as such would like to see everything on one screen.
Another addition would be to include visible tooltips for all available functions.
Below are examples representing how the custom layout function could work.
References:
Murphy, C. (2018) A Comprehensive Guide To Wireframing And Prototyping. https://www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/
Komninos, A. (2020) How to improve your UX designs with Task Analysis. https://www.interaction-design.org/literature/article/task-analysis-a-ux-designer-s-best-friend
