POP
02
Pop redesigns video communication platforms as flexible tools to promote sustainability and facilitate the needs of professionals in remote working environments.
Objective
Promoting SUSTAINABLE REMOTE WORKING
Scope
10 weeks
Project Type
Individual
My Roles
Research, Analysis, Wireframing, Prototyping, USER Testing, BRANDING, Visual Design
Tools Used
Figma, Google Form, Notion, Principle, Rotato
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat lacinia sem, quis placerat arcu interdum eget.
Welcome to pop
Call Libraries and VOD Review
Accessed via the libraries panel, recordings of past calls can be accessed and reviewded.
Upon opening a recording users are presented with the recording timeline, this features traditional playback functionality such as pause/play and progress scrubbing but located above the progress bar is the recording timeline. This provides a digestible overview of the call progress broken down by topics.
When hovering over each topic, the secondary level of navigation is revealed, displaying the specific events themselves in order of occurrence.
Upon opening a recording users are presented with the recording timeline, this features traditional playback functionality such as pause/play and progress scrubbing but located above the progress bar is the recording timeline. This provides a digestible overview of the call progress broken down by topics.
When hovering over each topic, the secondary level of navigation is revealed, displaying the specific events themselves in order of occurrence.
These events are user interactions such as questions, breaks or breakout rooms. From here users can click on an event to jump to that portion of the recording.
In the event of a user disconnecting during a live call their call progress with be remembers and upon loading up the recording VOD they are presented with a prompt to continue where they left off.
The goal of which being to reduce the dependency on live attendance and accommodating users should connectivity issues come into play.
In the event of a user disconnecting during a live call their call progress with be remembers and upon loading up the recording VOD they are presented with a prompt to continue where they left off.
The goal of which being to reduce the dependency on live attendance and accommodating users should connectivity issues come into play.
clip generation
Thanks to the recording library, users are also able to clip specific portions of a call to share both internally and externally.
Both title and description fields are requiered as to display a detailed overview of the clip so that the context is known to the recipient or other users when browsing clips in the library.
Both title and description fields are requiered as to display a detailed overview of the clip so that the context is known to the recipient or other users when browsing clips in the library.
Clips are of great benefit to those on support teams who should not have to attend an entire call for a few minutes of details.
Combatting "the great leap"
"Peak" functionality and visual representations of current participants and their vocalisations combat anxiety and stress often associated with joint meetings.
Peaking works by hovering over the CTA and displaying the current call activity through a popup window.
Peaking works by hovering over the CTA and displaying the current call activity through a popup window.
Accompanying peaks are participants previews in the call card and live vocalisations that radiate from the participant to visualise who is currently speaking.
In an effort to further reduce anxiety around joining meetings, context panels can be added by the host that displays overviews of the participants and their relevance.
In an effort to further reduce anxiety around joining meetings, context panels can be added by the host that displays overviews of the participants and their relevance.
The freedom to choose
Physical environments are subject to all sorts of interpretations and design decisions tailored to the needs of the participants.
Similarly, Pop affords the host the ability to personalise the call environment via both panels and custom system layouts that bring a new dynamic to every call.
customization As simple as Click, drag and drop
Based on the environmental control insights from my secondary reserach, affording the users the power of extensive customisation you empower them to create environments that suit their needs and combat stress.
Whilst this is a great strength of the solution, considerations must be made that this power could come at the cost of the user experience if users add too many panels and overload the participants' working memories.
Whilst this is a great strength of the solution, considerations must be made that this power could come at the cost of the user experience if users add too many panels and overload the participants' working memories.
Taking this into account, removing panels in Pop is as simple as click, drag and drop.
By using long press interactions it combats accidental deletion and then through reducing the contest of the window the user's focus can be shifted onto the selected panel before using colour signifiers to guide them to removing the panel.
By using long press interactions it combats accidental deletion and then through reducing the contest of the window the user's focus can be shifted onto the selected panel before using colour signifiers to guide them to removing the panel.
How it started
In a world of increasing connectivity how do we promote a healthy work/life balance and combat digital creep
In recent years, remote working has been a growing trend as technology has improved, however the acceptance of its viability was not proportional to those technological innovations until very recently with the COVID-19 pandemic.
Remote working is a fantastic shift that opens the door to a wide array of new opportunities that were previously unavailable due to localization, it, however it has its shortcomings.
Remote working is a fantastic shift that opens the door to a wide array of new opportunities that were previously unavailable due to localization, it, however it has its shortcomings.
Within the brief period of time since remote working has come to the forefront of our daily lives it has received a lot of praise for its liberating impact, saving several hours each day commuting to work, dressing casually and even allowing those with disabilities access to new job opportunities, what isn't seen though is the lasting impact on productivity and work/life balance as a result of limited market solutions.
The problem
Leading market solutions such as Zoom are built off of the foundation of their technological innovation and have little value added through software functionality, operating more as a platform than a tool with minimal consideration for human needs outside of producitvity.
The goals
Encourage accessible and inclusive remote collaboration.
Design a solution to promote a healthy work/life balance whilst retaining productivity.
Identify and Understand the needs of of multidisciplinary teams to create a more usable and sustainable remote working tool for the future.
Allow users to tailor their working environment to their needs, as they would their physical workspace.
leverage design to integrate the beneficial aspects and principles of the modern working dynamic.
The PROCESS
01
Discover
02
Define
03
DEvelop
04
Deliver
Discover
The starting point was conducting research in order to develop insights into remote working tools, users and the contexts in which they exist. The first method used being a preliminary survey aimed at identifying targe users, identifying potential pain points and understanding the human impact of remote working tools
Preliminary Survey
The preliminary survey focused on collecting data to help identify the target users, the context in which they adopted remote working tools, what functionality they value and their general sentiment towards current remote working/communication tools.
Survey insights
82
users surveyed
25
average age
25
average hours spent remote working per week
61%
felt their work/life balance was average-terrible
20%
thought current tools increased productivity
40%
thought current tools decreased productivity
Suggested Improvements
MAke them simpler/easier
to use
to use
MAke it more approachable/ less stigmatic
add engagement/ voting/interaction functionality
INtroduce connectivity with other programs
IMprove enjoyability and "Fun" aspect
Freedom to customise your workspace
User InterviewS
User interviews were then conducted across students, employees, freelancers and project managers to gain further qualitative data to develop on themes from the preliminary survey.
Some of the key themes identified from these interviews surrounded the necessity of current tools and significant shortcomings around usability and sustainability.
Newfound context
Current tools are Simple to use but hard to manage.
Such tools are Commonly accessed Via The desktop.
minimise productive accessory interactions.
They are a necessity that's far from optimal.
Main goal is communication of varying forms.
balance functionality, fun, & ease of use.
Secondary Research
Secondary Research into academic papers and studies was carried out to explore possible design and psychological concepts.
The areas of research focused on factors influencing quality of life, understanding play, and traditional workplace design principles that may be transferable to digital solutions.
Competitive Analysis
Competitive analysis was conducted to explore the current market solutions and to understand their strengths and weaknesses as well as any notable design decisions that were made.
These market solutions were categorised by conventional (established) solutions and emerging (experimental/unpacked) as to explore as many diverse approaches in the problem space.
These market solutions were categorised by conventional (established) solutions and emerging (experimental/unpacked) as to explore as many diverse approaches in the problem space.
It came to to attention that there is a lack of solutions that are both fun and productive,
key painpoints
These solutions have poor/work life balance
Users felt a decresed level of productivity using remote working tools
Current tools are not fun!
Organic engagement during meetings is difficult
Remote working has stigmas around having cameras off, taking breaks or muting yourself etc.
How might we redesign video communication platforms as flexible tools to facilitate the needs of professionals in remote working environments?
Define
Using the data collected in the discover phase, parsing and framing methodoligies were leveraged to produce valuable insights and understandings about the problem, user's and their needs.
Affinity Diagraming
288
Valuable Data Points
61
Groups
8
Themes
3
Areas
Affinity Diagraming was leveraged in order to derive insights around suggested improvements and shortcomings of market solutions.
Shortcomings such as infrastructure issues like connectivity and call quality were voiced as well as limitations resulting from high levels of fragmentation as the current solutions do not provide enough functionality, causing users to spread their workflow across numerous different tools that do not integrate with one another.
Shortcomings such as infrastructure issues like connectivity and call quality were voiced as well as limitations resulting from high levels of fragmentation as the current solutions do not provide enough functionality, causing users to spread their workflow across numerous different tools that do not integrate with one another.
Notable improvements were centred around work/life balance issues, namely a reduction of dependence on the tools and combatting stigmas that cause anxiety caused such as lack of web cam usage.
Moreover, it was heavily suggested that the user interfaces felt contrived and convoluted resulting in usability issues.
Moreover, it was heavily suggested that the user interfaces felt contrived and convoluted resulting in usability issues.
The affinitization processe highlighted insightful pain points that provide numerous opportunity areas and a more focused direction.
user personas
Based on the developing understanding of the target users via the data parsed from the preliminary survey and user interviews, 3 user personas were created. These aimed at sufficiently representing the diverse range of users and their potential needs.
These three personas represented concerns about the scaleability of the solution when conducting recurring meetings, the lack of referenceability of current solutions in the event of call disruption (be it connectivity issues or life/family needs) and providing structure to calls to ensure clarity and productivity for all.
Empathy Mapping
Following this, three empathy maps were created to derive the pains and gains through analysing the perspectives of each of the contexts summarised in the user personas.
The pains and gains serve to display the value each user context can extract from the system but also the reasons that may deter them from engage with it.
The pains and gains serve to display the value each user context can extract from the system but also the reasons that may deter them from engage with it.
Understanding these motivations and concerns is important in designing a solution that meets the user's needs.
User Journey Maps
Using the new founds understanding of user's, their context, goals and motivations, three user journey maps were produced to represent the user journey across touchpoints using conventional market solutions.
In doing so I was able to identify where pain points occur in the flow and the related opportunities associated with solving these pain points.
In doing so I was able to identify where pain points occur in the flow and the related opportunities associated with solving these pain points.
For example, the opportunity to have a reference able space for shared assets during meetings as current solutions lose assets in chat logs, clip generation and sharing so that external or absent members can reflect on highlights from meetings or added context to member lists to reduce the barrier to engagement and fight social anxiety.
The solution should
Allow for flexible & informal calls.
Make THe sharing OF resources easier.
Fight stigmas around breaks & unavailability.
Make it easier to track who is saying & doing what.
Afford a more enjoyable & fun experience for all.
Maintain a high level of productivity & formality.
develop
Having developed a deeper understanding of the problem, users, their needs and contexts I started the develop phase of the process where the solution ideation and exploration took place.
Card Sorting
Following the define phase, card sorting was used to help develop an understanding of the hierarchy surrounding different aspects of the solution, the resulting hierarchy serves to best align the conceptual model with the mental models of users by ordering content/functionality in the optimal arrangements for users' needs.
The results of this activity went on to inform the Information Architecture and User Flows to further refine the user experience.
The results of this activity went on to inform the Information Architecture and User Flows to further refine the user experience.
Information Architecture
Using the heriarchy derived from card sorting and the opportunities identified across affinitizaiton and user journey mapping, an Information Architecture diagram was created to visualise the overall structure of the solution.
The final architecture aiming to promote ease of access to the most valuable functionality, increase usability and ensure logical navigation.
User Flows
Considering the information architecture, user flows were designed for the 3 main tasks outlined by the user journey maps, these being creating a call, generating and sharing a clip and creating a poll.
When creating these user flows, a major consideration was creating fluid experiences for users in their daily contexts, this meaning producing optimal flows that are not strictly linear in nature.
Initial Sketches
Having defined the overall solution architecture and key task flows, initial sketching took place to ideas through potential solutions.
Starting with creating a system to enforce visual hierarchy via windows, frames and panels that would go on to facilitate responsiveness.
Starting with creating a system to enforce visual hierarchy via windows, frames and panels that would go on to facilitate responsiveness.
Following this, potential solutions for a call timeline that affords efficiency call VOD reflection were explored considering the gamut of different events that can occur within an online call, from user interaction, topic changes, connection issues and more.
Low-Fidelity Wireframing
Starting to visualise the solution across the 3 main flows low fidelity wireframes were created in Figma.
These implemented the proposed structural hierarchy and solutions explored in the initial sketches according to the existing user flows.
These implemented the proposed structural hierarchy and solutions explored in the initial sketches according to the existing user flows.
These wireframes were then converted into low fidelity prototypes in order to generate user feedback and test their effecitness at solving user painpoints and providing a consistent and efficient user experience.
Low Fidelity Prototyping
Task 1: Call Creation
Task 2: Poll Creation
Task 3: Clip Creation & SHaring
User Testing FeedbacK
Based on the feedback received from user testing, it was highlighted that a consideration that was not made in the initial call creation user flow was that the there are two context in which the user will have an increased dependency on templates rather than creating new calls.
These being:
The first few uses where they explore the functionality and get accustomed to the tool.
These being:
The first few uses where they explore the functionality and get accustomed to the tool.
When users have been using the product for a significant period of time and have created n number of templates they will have a diminishing need to create new templates as they will have accounted for the majority of their frequent use cases.
Taking this into account, the user flow was updated to accommodate these two contexts.
Taking this into account, the user flow was updated to accommodate these two contexts.
DELIVER
In creating an identity for the solution, I set out to create something representative and functional but also easily memorable. Leveraging the primary brand colour of purple to enforce notions of ambition with a flexible logo construction that transcends styles.
Introducing Pop
Creating the identity
The Pop moniker represents the values of the solution, promoting remote working that supports work/life balance.
Gummy 3D assets are used across branding, meeting reactions and internal illustrations to support the light hearted and easy going nature of the solution.
HiGH Fidelity Visualisations
After devising the brand direction, the low fidelity wireframes were then overhauled with this new visual identity.
Considering the wide scope of the solution, the visual design was intentionally minimal using light strokes and shades to create depth.
Considering the wide scope of the solution, the visual design was intentionally minimal using light strokes and shades to create depth.
This was done with the consideration of the potential market as to provide an inoffensive foundation from which further supporting functionality can afford organisations the ability to customise specific aspects of the design language such as accent colours to be in fitting with their operations.
The dashboard
The dashboard houses an overview of the entire application functionality and user activity. It is distributed across four frames.
Recent activity provides the user with an overview of the happenings both past and present so that they can have peace of mind to take time for themselves without fear of being out of the loop.
Following this is the Calendar frame, this displays the upcoming and past calls for the user in the form of nested call cards that provide an overview of the call, all the way down to the call active call participants.
Recent activity provides the user with an overview of the happenings both past and present so that they can have peace of mind to take time for themselves without fear of being out of the loop.
Following this is the Calendar frame, this displays the upcoming and past calls for the user in the form of nested call cards that provide an overview of the call, all the way down to the call active call participants.
The Organization frame targets the components of play from my secondary research and helps to flatten the work environment by displaying the status of organization members, with groupings ordered by team relative to the user and showcasing their recent activities as to fight social anxiety due to infromation asymmetry catching user's in inconvenient/awkward scenarios.
Finally the Library frame contains recordings (VODs) of all past calls as to enable reflection. In addition to this the Clip tab allows users to conveniently browse clips generated from the recordings and reduce the dependency on live attendance should life get in the way.
Finally the Library frame contains recordings (VODs) of all past calls as to enable reflection. In addition to this the Clip tab allows users to conveniently browse clips generated from the recordings and reduce the dependency on live attendance should life get in the way.
Responsive by design
Frames act as a foundation to facilitate application responsiveness, as the window scales the content with each frame resizes dynamically and upon reaching breakpoints the frames begin to collapse into the top navigation.
At the final state where the menu items then collapse into an dynamic CTA that represents the number of frames nested within to signify to the users where the frames have been moved to.
Flexibility Via PAnels
Panels serve as highly flexible assets that support the underlying system functionality through a highly customizable visual interfaces
Nested within frames, panels allow contain the application functionality and are the smallest structural denominator of the atomitized system.
A template for (almost) every occasion
Templates accommodate the core use cases for calls and represents the Pop values in hopes of saving the user's time and provide additional structure to calls without adding time or complexity.
Templates such as Casual call back to the post-Fordist management technique of bluring boundaries identified in my secondary research to entice users to relax and take time to themselves, video communication does not have to be a bad thing.
Similarly Face to Face promotes "offboarding", this comes from the understanding that for a solution to be truly sustainable users need to strike a balance with with work and life.
Templates such as Casual call back to the post-Fordist management technique of bluring boundaries identified in my secondary research to entice users to relax and take time to themselves, video communication does not have to be a bad thing.
Similarly Face to Face promotes "offboarding", this comes from the understanding that for a solution to be truly sustainable users need to strike a balance with with work and life.
Moreover Anonymous calls anonymise voices and identities to combat anxiety and stigmas wether that's from design critiques or performance reviews.
In the event that a use case hasn't be considered users can create a new template to fit their needs and such custom templates can be saved to the Past Calls section for future reference which over time should reduce the need for new templates and increase efficiency as users begin to accomodated their own edge cases.
In the event that a use case hasn't be considered users can create a new template to fit their needs and such custom templates can be saved to the Past Calls section for future reference which over time should reduce the need for new templates and increase efficiency as users begin to accomodated their own edge cases.
Panels in action
Whether used on a horizontal secondary monitor, a notebook or boardroom TV, thanks to the supporting structure provided by Windows, Panels and Frames, the Pop experience responds to the hardware constraints and meeting contexts to provide the user with the best possible experience.
Promoting accessibility
It was important that all users feel considered on Pop, that's why live closed captioning was a key feature to support those with visual impairments and foster an inclusive setting environment.
Endless possibilities
Thanks to the freedom afforded by panels, Pop can enable third party integrations that provide even greater functionality to support every workflow, a few native examples being Affinity Diagraming and Planning Poker.
Takeaways
When looking at Pop's strengths it sufficiently targets the vast majority of the key painpoints whilst remaining navigationally and visually consistent, The project was a great way of refining my visual design skills and practicing composition within the constraints of achieving a high level of functionality
The solution champions flexibility as to support the needs of individual users and I was able to holistically evaluate the work-life balance and make unconventional design decisions to ensure Pop does not become part of the problem.
It is not perfect however, numerous shortcomings such as not being able to incorporate all desired functionality as a result of a limited project scope and the project needing further testing at a high-fidelity level highlight that there is still plenty of work to be done.
The solution champions flexibility as to support the needs of individual users and I was able to holistically evaluate the work-life balance and make unconventional design decisions to ensure Pop does not become part of the problem.
It is not perfect however, numerous shortcomings such as not being able to incorporate all desired functionality as a result of a limited project scope and the project needing further testing at a high-fidelity level highlight that there is still plenty of work to be done.
Moreover collaboration with third party software companies would allow for deeper integrations to better encompass the user's productivity needs and the modular system poses challenges in balancing the overall experience and prototyping n number of configurations.
As for the future, further exploration of the functionality is needed, continued refining of the user flow by further user testing would be of much benefit to improving the experience and ifnally more exploration into "pop out" functionality that keeps users in the loop whilst not actively in the application would support work/life balance.
As for the future, further exploration of the functionality is needed, continued refining of the user flow by further user testing would be of much benefit to improving the experience and ifnally more exploration into "pop out" functionality that keeps users in the loop whilst not actively in the application would support work/life balance.