Concept of redesign Watch and Learn platform based on UX research, which I conducted for Webanywhere with the support of the UX/UI team.
Join full UX research
Join full UX research
Background
Watch and Learn is an online platform for the creation of integrated video meetings and a communication panel for posting and replying to text, voice or video messages.
Webanywhere employees have been using Watch and Learn for several years. The platform was used during the pandemic period when everyone was working from home.
A few months ago, the company returned to hybrid mode. This is a great time to verify how well the plafrofm supports users and helps build the Webanywhere community.
A few months ago, the company returned to hybrid mode. This is a great time to verify how well the plafrofm supports users and helps build the Webanywhere community.
By the UX reaserch we want to understand how users use the platform. We want to find out what features are used most often, what interactions users make and what their pain points are.
Scope of work
Discover
Objectives
Interactions to understand how users are interacting with Watch & Learn app, users actions to understand what actions users take while using Watch and Learn app, painpoints to evaluate the pain points experienced by users, accessibility to verify that the site meets Web Content Accessibility Guidelines.
UX Research
We used various UX research methods to learn as much as possible about Watch and Learn user behavior and answer a wide range of questions. Used metods: website traffic analysis, heatmaps, session recording, accessibility testing and user interviews.
Tools used to conduct UX research
↓
Heatmaps and screen recording
The study indicates that the highest traffic was recorded on the Public Timeline page in the post creator area. Many users switch the post creator from video to text which may indicate that they prefer to create posts as text.
Accessibility testing
Accessibility analysis of the website based on the standards of The Web Content Accessibility Guidelines (WCAG) by Wave Tool and Contrast analysis of the website elements by WebAIM contrast chcecker.
↓
↓
Result of the accesibility analysis
Analysis showed 52 errors and 175 alerts. Most of errors are Contrast Errors: 2 for Reception, 79 for Public Timeline and 27 for Inbox, 2 for Expo Hall, 42 for meetings, 4 for Bookings, 2 for Live Stage, for Networking, 57 for People. Which means it is very low contrast between text and background colors.
User Interviews
We asked Watch and Learn platform users about their pain points and satisfations.
↓
Define
Key findings and problem statement
The biggest problem with this platform is the lack of natural, organic involvement. UX research results show that Watch and Learn users limit their activity to adding a debrief in the form of a text post.
Persona
↑
Patryk Nowak, Front-end Developer
Patryk Nowak, Front-end Developer
"I enjoy my role as a front-end developer, and I find fulfillment and joy in it. However, I'm not fond of bureaucratic tasks like detailing tickets, completing progress tables, and attending meetings. While I understand their importance in larger teams, I prefer these administrative duties to be as minimal as possible so I can concentrate on my work effectively."
Scenerio
Patryk has been employed as a front-end developer in the company's Polish division for two years now. Each day, he collaborates closely with four other front-end developers, a UX/UI designer, and a product manager on an e-learning application project. Their interactions primarily occur through online meetings, with a weekly in-person gathering at the office. Alongside the tools essential for his role, Patryk uses Jira for tracking progress and Slack for communication with the team.
Goals
• create the daily debrief post required by the boss as quickly and easily as possible,
• participation in weekly All Hand Meetings,
• participation in weekly Virtual Coffee, which he enjoys,
• check the list of employees and find out what each person is responsible for
Frustrations
• feels forced to reate the daily debrief post, doesn't understand why he should do this
• when he reports the progress of the work in Jira,
• does not like to create daily debierfs in audio or screencast form,
• is not very sociable
• does not like to create daily debierfs in audio or screencast form,
• is not very sociable
Emphaty map
How to improve user's involvment?
Watch and Learn is our corporate communication tool. We would like users to use the platform because they want to, not because they have to. We mean introducing such visual, functional and useful mechanisms to W&L that will make W&L an everyday and desirable part of our work environment.
Feeling of closeness with co-workers - less anonymity of posts, let's add photos of people next to their posts on Public Timeline.
User involvement - let's improve the commenting functionality, thanks to which Timeline will come to life and draw attention from other communication channels.
Team integration - because most of users writes in isolation from other employees, and after all, the work of each of us is the team's success, let's tag their team's posts for users, let's help them comment, like and celebrate their successes.
Elements of gamification - let's inform about the most discussed post of the day to keep attention around what our company lives.
Adding posts - redesing of post creator to make adding basic post as easy as possible.
Additional options, e.g., formatting text, adding videos or images will make posts attractive and engaging.
Additional options, e.g., formatting text, adding videos or images will make posts attractive and engaging.
Redesign - creating a new interface in line with current trends.
Verify functions of pages - removal of duplicate functions e.g., there is some overlap between the Timeline and Inbox functions.
Verify functions of pages - removal of duplicate functions e.g., there is some overlap between the Timeline and Inbox functions.
Accessibility - using darker shades of existing colors to increase contrast.
Improving the usability of features - adding attachments to posts, adding video/audio/text filters to Timeline, improve the search tool, improve commenting functionality.
Design
Colour palette
The color scheme of the application is based on the colors of the logo. A vibrant and bold primary red color stimulates user engagement and prompts action. To moderate the intensity of the red, I have used dark and light shades of gray.
↓
The color scheme of the application is based on the colors of the logo. A vibrant and bold primary red color stimulates user engagement and prompts action. To moderate the intensity of the red, I have used dark and light shades of gray.
↓
Typography
Inter font improves how users interact with content by offering a well-crafted, harmonious design tailored for easy reading on various digital devices. With its range of weights and styles, it ensures both accessibility and visual attractiveness, promoting effortless reading. Inter's careful design considerations prioritize clarity, making it perfect for creating intuitive and user-centric interfaces.
↓
Components
Public timeline improvments
↑
Refreshed interface - the previous interface made the Watch and Learn platform seem outdated and incomplete. The new, polished, and in line with current trends, motivates users to delve into various functions and encourages usage.
The new appearance of posts - changing the post creator to simplify the process of adding basic posts effortlessly. Incorporating additional features such as text formatting, has enhanced the attractiveness and interactivity of the posts.
A sense of community - Including user photos in posts reduces anonymity. Interactions such as liking posts and commenting encourage users engagement.
Element of gamification - the list of the day's most talked-about posts helps maintain focus on the pulse of company's activities.
Accessibility - updating the user interface by moving away from the combination of red text on a white and light gray background, which caused too little contrast.
Post creator improvment
Based on the results of the UX research, which indicate that the majority of users create text-based posts, I've decided to design a text-based post creator. As the project progresses, I will incorporate the option to create voice posts and record videos.
The post creatior launches in a pop-up window, designed to draw the user's attention. Incorporating additional features such as text formatting, has enhanced the attractiveness and interactivity of the posts. In addition, there are features allowing users to attach files and include emoticons to enhance the attractiveness of posts and encourage interaction.
Let's take a look how adding post flow look like
Let's take a look how adding post flow look like
↓
Let's take a look at what the new posts look like
↓
Deliver
Feel free to explore prototype created in Figma. The project is in process, I will develop more functionalities and update it.
↓
↓
Thank's for watching!
