2021
Online video communication is our agile future!
Era of Digital Design
Modern Communication
Did you ever know that Modern Communication means;
Social media, instant message, e-mail marketing, SMS text messaging, direct Email, Blogging, Voice Calling, Video Chatting and Video Marketing!
Yes! it surely is a modern world.
In the last few years video has really taken off with the help of social channels like YouTube, Facebook, Snapchat and Instagram. With several video-calling apps available fo free such as Apple's Facetime, Facebook messenger, Skype and WhatsApp video calls have become worth considering in the design sector.
1984 to present the digital label had made an entry into our lives, reshaping our designs, increasing our productivity, and instantly evolving!
Designers are the most remote workers, who already use their PCs, laptops, and pads to design.
Adding a video conference call to your favorite design software would be a plus, it may be not be as favorable as voice calling, and that is why Figma's new video conference feature proposal includes all the necessary communication tools that designers, developers, mentors, and decision makers need, and or prefer.
About
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.
Figma has become a leading software for UI|UX designers, product designers, students, mentors, and anyone interested in the world of design clients.
In 2019, Figma launched Figma Community, allowing designers to publish their work for others to view and adapt.
Today, I am introducing Figma JOIN for meetings and workshops to allow designers, co-workers, students, mentors, clients, and the community to directly connect, meet and discuss work through a live video conference.
Running remote meetings and online workshops can be challenging. Figma is adding a new feature to keep things simple and manageable in one place.
So you can:
Share your work with anyone
Gather meeting participants
Overview your work with anyone
Iterate, edit and refine your work
Take meeting notes with Visual Notes
Cast a vote to make decisions quickly
Make live tests of your prototypes
Save discussions to re-work any missing details
The aim is to help, individuals, bootcamps, businesses and organizations bring their teams together in a frictionless environment to get more done.
It is introducing an easy, reliable cloud platform for video, voice, and content sharing.
Goal
Figma’s research and finding about the JOIN feature is going to add a great asset to the software as it will manage everyone’s remote need through one API.
Design a JOIN feature that allows designers to go live and to be able to Design, Discuss and Refine.
JOIN feature will open new horizons to the interface’s usability strength, especially when there is a high demand for group crits, connecting with developers, and work ideation progress.
Key Feature:
Video Call meeting feature
Functions added to the main feature may include:
Chat option window/room
Share content
Share reactions
Video filters
Mute/Unmute Control
Cool Backgrounds
End-to-end encryption
Suppress and control noise
Record, Save and download conversation
Gallery view and other window views
My role: UX Designer
Team: N/A
Problem Solving
Problem: Years 2019 & 2020 - The pandemic steers the need for an agile solution to move UX|UI design bootcamps such as (DesignLab, Career Foundary, Springboard...etc.) into the digital online world.
Design students use graphic vector softwares such as Figma to work on their designs, and then to present their work.
At DesignLab Students weekly connect online with their mentors for a 1:1 student/mentor session, and with their group crits through a 3rd party communication tool like "Zoom", this process creates a new learning curve of how to communicate, and at the same time of how to be able to present their work, which becomes a bit tedious especially with large groups as students need to share their Figma screen, or copy their Figma's link into "Zoom" to present, and discuss their work.
Solution: Adding a Video Conference Feature into Figma saves time and effort. Creating a full service realtime hub will assist with maintaining all communications, discussions, design presentations, and ideations under one umbrella.
Users
The nature of Figma's software usage limited the circle of users to share with an online survey, and to run the usability test on for the new video conference feature.
Categories of digital users were UX | UI designers, graphic designers, tech-mentors and developers. The limitation of contributors to my capstone feature project did not have any setbacks, on the contrary testing a specific circle of users for my new design feature was a success.
Age group: 20-55
Stakeholders
Incredible Things
Figma officially started in September 2016. Three years later, on October 22, 2019, Figma started the Figma Community, where designers could publish their work for others to see and edit.
Field — one of Business Insider's 10 people transforming the enterprise technology industry in 2020 — sees that as an opportunity for Figma, which allows designers to create, share, and collaborate on their designs with its cloud-based software. Figma, now valued at $2.05 billion, has raised a total of $132.87 million, even as it places competitive pressure on leading incumbent Adobe and its Creative Cloud suite.
In April, it closed a $50 million round of funding led by Andreessen Horowitz, even as the COVID-19 pandemic hit the US in full force. Figma impressed investors with its revenue growth and major customer wins, including teams at Microsoft, Airbnb, GitHub, Square, Zoom, and Uber.
"We're seeing more people use Figma for things that are not necessarily interface design," he said. "That's the way we see ourselves long term. There are more products around visual communication."
My video conference feature is just an idea that I would love for Figma to truly consider using as I believe Figma can open a new solid foundation for their users to connect and process their work faster.
Research
Desk Research
Most companies now are competing to evolve with their communication tools, and with adding features that leverage the multiple number of users who can connect, share and communicate to complete their work while using one platform.
The competitors:
Miro, Zoom, Microsoft Team, Google Meets, and Adobe Connect
All the listed companies provide the basics to start a meeting and it seems that a basic service is all that we need, but the deeper we go into research to compare apple to apple the more we find that few companies have certain set backs that does not comepelty fulfill their users needs, below is my desk research for companies that I was able to study, and gain better knowledge of how I can design my Figma feature.
Online Survey
It was my first attempt using Google's online survey, I was impressed by the ease of using their templates, and of how effective the survey was for my project.
It was a great experience forming my online survey, sending out the link to my DesignLab fellow students over our Slack channels, and of sharing my link on social media over Linkedin and Twitter.
The results that came back were also great, 66.7% of the surveyors use Zoom during their design work and presentations, 44% of the surveyors are willing to shift and start using Figma rather than using their current vector design software If Figma adds the Communication Tool, 40% are willing to switch and try using Figma then judge if that would be feasible for them, and only 10% would rather stick with their current norm using Zoom and another vector design software like Adobe XD.
People loved the idea, and highly agreed with adding the video conference feature to Figma!
Information Architecture
Communication Design
As a new UX|UI designer I highly relate to the term information architecture, my background is in interior architecture, and I had worked as a graphic designer, and an advertising PR|Marketing manager.
I strongly think that UXIUI design should intertwine with the term communication design.
Communication design is a mixed discipline between design and information-development, that focuses on delivering a message through multiple media interventions such as printed, crafted, electronic media or presentations to communicate with people, and delivering a message is a strong part of the user experience.
Landing on this phase of my project, I feel a new fire ignite my energy as I enjoy the analytical part of building personas after conducting my interviews, research, and creating a foundation that connects the psychological and physical need of users while playing with colors and shapes to start the preliminary design sketch.
I created personas in accordance to my daily interactions with different people from work and form DesignLAB, I wanted to bring forward the multiple layers within each persona through their empathy map, and following I generated. down each personas POV (point of view) and HMW (How Might We).
The Golden path was something new I had learned from my mentor, it is basically a quick user and task flow developed on a one single path with dotted walls dividing the parent and child actions required to accomplish the task. The golden path made absolute sense for my sprint project.
Personas
Empathy Map
POV | HMW
The Golden Path
Mid-Fi | Hi-Fi design
Brand
Shapes & Colors
The branding of the video conference feature was focused on using Figma's standard UI Kit, color scheme and icons.
When designing a feature for an available product designers have certain limitations in terms of building a new identity or changing a design, and yet it is a great opportunity to learn from the best design companies in the market, and to dig deep into their world.
Adding a new bar that includes all the necessary communication tools was my approach for the branding, I made sure to follow the same outline of icons that Figma uses, along with their typefaces and color scheme.
Logo Design
Figma's UI Kit
Experimentation
Ideation
Most companies now are competing to evolve with their communication tools, and with adding features that leverage the multiple number of users who can connect, share and communicate to complete their work while using one platform.
The pandemic took a hit on changing our world to turn 90% dependent on digital communication, a lot of people prefer using digital communication rather than physical interaction, studies from my own company, and I am certain other companies also show the high efficiency of the new online communication methods and the time saving even during meetings and presentations.
I kept on asking myself what feature would I need now? What problem would I want to solve?
Experimenting the use of a video feature is not new in the industry, and due to the high demand of online communication, I was utterly happy to design this feature, especially when I saw a re-affirmation of my idea used by Figma's competitors like Miro had already launched this new feature in October 2020.
Responsive Design
Prototype
The prototype of the video conference feature included multiple pages, I wanted to showcase the usage of the new communication bar during a meeting call.
My selection of the elements in the communication bar was done after checking what is currently used in the market of communication tools and communication design.
I aimed at sticking with Figma's color scheme for all action buttons using the blue and the red as highlighters of communication action.
The test was also done through Maze as requested by my mentor, working on an agile project required less time spent communicating with people person to person, and for the other reason that my testing users are mainly familiar with One Figma, two communication tools, and three Maze.
The test gave good results with few users noting their dislike on the color scheme & the UI design. Minimal ideations took place for Figma's video feature, the users remarks on color scheme and UI design does not have a huge impact on making these ideations, since adding a new feature to an existing software or service UI design and color scheme is the last thing any designer would consider changing unless asked by the owner of the company!
Usability Test
Feedback Grid
Conclusion
Choosing to add a new feature to an existing service or business is not easy to find.
For me I wanted to invest in finding a new feature to add to a service that I myself use, and at the same time adequately measure the practical usage of that feature.
Do we really need it? Is it going o be useful to add ? Will users actually make use of it? And will it make my users' and my work life easier?
Yes, that was the answer I received with a confirmation on my online survey.
I would say I was also lucky to find a full Figma UI Kit during the design phase, that helped with reducing the amount of time spent in generating new wireframes that matches with Figma's interface, and design.
I enjoyed using the agile method while working and collecting information for my video conference feature project, it was a fun experience.
My wish is for Figma to actually adopt this idea and implement it in the coming near future!!!
