GRADUATION PROJECT FLOCK 2.0 - Redesigning Enterprise Chat Sponsor : Directi, Gurgaon Volume : 1 of 1 STUDENT : ANANYA PROGRAMME : Master of Design GUIDE : Rupesh Vyas
2016 GRAPHIC DESIGN
The Evaluation Jury recommends ANANYA for the
Master of Design of the National Institute of Design GRAPHIC DESIGN herewith, for the project titled “FLOCK 2.0 - Redesigning Enterprise Chat� on fulfilling the further requirements by*
Chairperson Members :
*Subsequent remarks regarding fulfilling the requirements :
Registrar (Academics)
Copyright Š2016-2017 Student document publication meant for private circulation only. All rights reserved. Master of Design, Graphic Design, 2013-16 National Institute of Design, Ahmedabad, India. No part of this document will be reproduced or transmitted in any form or by any means including photocopying, xerography, photography and videography recording without written permission from the publisher, Ananya and National Institute of Design. All illustrations and photographs in this document are Copyright Š2016-2017 by respective people/organizations. Edited and designed by Name: Ananya Email: ananya@nid.edu, ananya.mittal1990@gmail.com Processed at National Institute of Design (NID) Paldi, Ahmedabad - 380007 Gujarat, India. www.nid.edu Printed digitally in Ahmedabad, India. July, 2016.
ORIGINALITY STATEMENT
COPYRIGHT STATEMENT
I hereby declare that this submission is my own work and it contains no full or substantial copy of previously published material, or it does not even contain substantial proportions of material which have been accepted for the award of any other degree or diploma of any other educational institution, except where due acknowledgement is made in this degree project. Moreover I also declare that none of the concepts are borrowed or copied without due acknowledgement. I further declare that the intellectual content of this degree project is the product of my own work, except to the extent that assistance from others in the project’s design and conception or in style, presentation and linguistic expression is acknowledged. This degree project (or part of it) was not and will not be submitted as assessed work in any other academic course.
I hereby grant the National Institute of Design the right to archive and to make available my degree project/ thesis/dissertation in whole or in part in the Institute’s Knowledge Management Centre in all forms of media, now or hereafter known, subject to the provisions of the Copyright Act. I have neither used any substantial portions of copyright material in my document nor have I obtained permission to use copyright material.
Student Name in Full: Ananya Signature: Date:
Student Name in Full: Ananya Signature: Date:
FLOCK 2.0 REDESIGNING ENTERPRISE CHAT
ACKNOWLEDGEMENTS
I deeply appreciate the help, support and guidance of a number of people. Their help and support has made this project possible. All my teachers and friends at NID, for teaching me about not just design but also life. Rupesh, for being supportive every step of the way and for being patient with all my doubts and questions. Directi, for offering me this wonderful opportunity and showing me what a really great workplace feels like. Ninad and Shweta for taking interest in my ideas and guiding me throughount with their valuable critique. Krishna, Tanushee, Manasi, Prachi, Kulmeet for making office a lot more fun and taking so much interest in my project. My parents for giving me the freedom to choose my own path in life. Vidit, for staying up with me and putting up with all my unreasonableness. Titu for helping me with prints and submission. I owe a lot to each one of you.
SYNOPSIS
You’re part of a new project at your company with team members spread across different floors, different buildings, or even different cities. Excited to get started, you want to make sure that the team is able to communicate with each other seamlessly to get the project moving as fast as possible. You turn to email to get your messages across quickly. Hours go by simply waiting for people to respond, even if it’s just for a quick update or short confirmation. Sound familiar? For many enterprises such situations are an everyday story. While emails remain stuck in the 90s, a new wave of communication and collaboration technology offers a fast and real time experience. At Directi, it is believed that the way people communicate with each other should be richer, easier and cheaper than what it is today. Flock is pushing the boundaries of what is possible with enterprise chat. This project aims at understanding the real need of users by examining their typical work days, and creating solutions that offer value. We have tried to address challenging issues such as aiding virtual collaboration, building a unified communication experience, by using design research methods to gain a deep understanding of the needs, and frustrations of the users. The design solutions include redesign of the identity of the product to be more in line with the direction it’s heading into, and redesigning the android app by incorporating the solutions emerging from research insights. We hope to make a real impact in how people communicate at work by offering them and experience that is real-time and pleasant.
CONTENTS
PROJECT BACKGROUND
14
DESIGN METHODOLOGY
16
PART 1 - SENSING INTENT
19
The Product Initial Conversations The Segment The Competition Objectives
PART 2 - KNOWING PEOPLE & CONTEXT Research Objectives Literature Review Evaluating Research Techniques Group Discussions across Departments In - Depth Interviews
33
PART 3 - FRAMING INSIGHTS
59
Design Goals Design Interventions
PART 4 - EXPLORING CONCEPTS
67
Redesigning the Visual Identity Redesigning the Android App
PART 5 - DESIGNING SOLUTIONS
135
The new identity The Android app
LEARNINGS
164
REFERENCES
166
PROJECT BACKGROUND
Directi
THE COMPANY
THE SPONSOR
Directi is a technology centric company established in 1998 by Bhavin Turakhia, a serial entrepreneur. The company focuses on developing volume based Web Products and Services for a global audience. The Directi Group has been ranked 10th in the Deloitte Technology Fast 50 India program 2005, under his leadership. The Group also boasts of 11 business units under its umbrella. Every business is bootstrapped, self sustaining, and has no external debt or investment. All of the businesses were started with limited capital from internal accruals and then subsequently grown into large global businesses that rank amongst the top 10 worldwide.
Ninad Raval THE MENTOR
THE PRODUCT
At Directi, it is believed that the way people communicate with each other should be richer, easier and cheaper than what it is today. With that goal, they are developing several products in the communications vertical. Their goal is to build the best real-time communication experience possible with today’s technology. This is a large, complex problem and has the potential to impact millions of people in a positive way. Within this broad vision, they have created a product for the specific need of collaboration for teams within organisations. This is a problem for which there are no clean solutions yet. Flock aims to solve this by creating a communication experience that is instant, real-time and pleasant.
DESIGN METHODOLOGY
sensing
INTENT
knowing
CONTEXT & PEOPLE
framing
INSIGHTS
exploring
CONCEPTS
designing
SOLUTIONS
sensing INTENT
Early on in the process, it was important to figure out where to start. Before jumping straight into the project, I studied the product, had some conversations with existing users, looked at competing products as well as trends of the segment. Studying the overall effect of these changes, helped frame the initial problem statement and design brief.
Before diving into the project, it was important to first get some sense of the industry and the users, the product was aiming to service. Some of the things that I set out to understand were :
THE PRODUCT What is the product story? What is the USP? THE INDUSTRY
THE PRODUCT
THE COMPETITORS What do they offer, how they communicate, what user experience is like?
THE MARKET What is upcoming? What has already been done?
THE AUDIENCE What are the demographics? What are the user personas?
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
THE PRODUCT THE USERS
THE MARKET
THE COMPETITION
Looking at the inter-relationship of these, gives a sense of the context in which the product exists or hopes to exists.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 21
THE PRODUCT
It was important to understand what the product was all about and what kind of features it offered to the users. Flock is a freemium (free for basic features, paid for advanced features) chat service for work and business environments that speeds up and simplifies communication within teams or organizations. It is available on all your devices and can be used by small to large enterprises. Flock need not be adopted by an entire company. Fast moving teams within a firm can use it for internal conversations to get work done faster. Traditional methods of communication within organizations, like emails are slow, asynchronous and cumbersome. Many situations require quicker interaction and faster turnaround times. Flock solves this problem by providing an easy, feature-rich product for teams and workplaces to seamlessly chat in a one-to-one or a group setting, thereby eliminating delays in responses inherent with emails. The next page outlines some of the features of the product.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
GROUPS AND 1-ON-1 CHAT
MESSAGE HISTORY SEARCH
COMPANY DIRECTORY
Flock enables you to make decisions quicker by discussing ideas, sharing files and getting instant feedback from your team through one-on-one and group chat.
You can now search across all your conversations be it with individuals or in a group. Searching in Flock is blazing fast and easy, you can find what you’re looking for no matter who said it or when.
New members in your company are automatically added to everyone’s contact list, and are available to chat when required.
@MENTIONS IN GROUPS
STICKERS
Make group conversations easy, prioritized and effortless with @mentions. They help you quickly draw the attention of a group member to the conversation at hand by highlighting their name.
Add a hint of personality and old school charm to your conversations. Communicate more effectively and add your own personal touch to your messages with stickers.
SECURE MESSAGING Flock uses state of the art technology and industry best practices for data encryption during transit to and from Flock.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 23
INITIAL CONVERSATIONS WITH EXISTING USERS
The contacts are listed as a roster, which is redundant and unnecessary. It would help if it could be hidden or extracted from the chat window. Would prefer them to be separate. Becomes painful, have to resize my chat window for a more fluid experience.
There is no way to figure out which teams or locations the people are in. Internal communication becomes difficult unless you already know the people beforehand/ offline. There is too much external dependence. There needs to be some indication regarding a person’s availability. Difficult to judge from ‘last seen at’.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
All the products together solve 99% communication problems. In isolation however, there is always something that is lacking. Uniformity is a big issue. Currently you have to use 6 different products for 6 different needs. If you could plug-in users who were not using that product, that would be ideal. Juggling between different products is time consuming and frustrating.
Talking to the users in the other Business Units of the company about their experience of using the product everyday.
With e-mail there isn’t a sense of urgency, you don’t anticipate a conversation. You are not expected to respond immediately. With chat there is a general sense of immediacy.
The ideal business communication tool would have to be seamless, where you don’t need to add contacts and can see people’s phone number. emails etc all in one place. Currently it’s very fractured.
Although the essential features are same as competition, its different since there is a lot of attention given to ease of use, user experience, user interface, functionality. This is the selling point. More resources will be invested in making Flock’s UI/UX better than the competition. The product is constantly improved based on customer feedback.
There is no way for me to sort contacts according to my own preference. Should be able to have favorites. The UI needs to offer more personalisation.
Enterprise chat will always be a top-down decision. Its influenced not by what an individual prefers but what an organisation decides to use or what the people you need to communicate with are using. In bigger organisations it would be the IT team, in smaller it could be the founder, management etc.
It is ideal for start-ups. Builds that community amongst people, they can constantly be involved with everything that happens at work, makes work a part of their day-to-day life.
These conversations helped gain some insight into the challenges faced by the users. By understanding their pain points, I was able to articulate some design opportunities.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 25
THE SEGMENT
Rapid communication among teams in any organization is crucial for success, yet today’s communication technology offerings seem to fall short when it comes to enterprise. Email has seen little innovation over the last decade, continuing instead to remain slow, asynchronous, and unsuitable for anything requiring speed. In today’s fast-paced world, defined by time scarcity, ‘quick and easy’ communication tools are heartily welcomed. People need to access the right information, real-time, and chat does just that. When one hears ‘Chat’, people often relate the term automatically with Consumer Chat; e.g. WhatsApp, WeChat or Viber. Chat as a mainstream communication tool originated in the consumer space after all. Yet the days are long gone where chat applications are only targeted at consumers. Organisations across the globe have now started adopting chat for internal communication purposes, with chat becoming an important element in Enterprise Communication.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Unified communication apps can make a real impact for a business, not to mention considerably improve productivity of its workers. Enterprise chat has done everything from provide instant informal feedback. lift the burden of email, become the glue that bonds workers in remote offices all over the world.The chat allows people to interact with each other from their desks, without having to run around the office looking for people or interrupting people while they are in the middle of something. Chat helps redefine what an office workspace is. Everything is opened up to everyone, so folk feel connected and engaged even if they are not actively working on the project and no matter where their desks are.
Semi Real-time + Cluttered inboxes + arbitrarily cced + message overload + more time consuming = DEPRECIATED EFFICIENCY
Real Time + short messages + no clutter + directed at exactly the right people + less time demanding = INCREASED PRODUCTIVITY
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 27
THE COMPETITION
Flock competes indirectly with free public instant messaging services like gtalk, Skype and Whatsapp that serve as substandard alternatives for workplace communication. Direct competition includes enterprise messengers like Microsoft Lync, IBM Sametime, Lotus note and other startups in the space like Hipchat, Cotap, Slack, Hall, Fleep and Campfire. What differentiates Flock is, a single minded focus on providing the fastest way for teams to connect unlike other chat apps that provide a plethora of functions. Some notable differentiators include: Native desktop client  Ability to chat with external work contacts such as clients and vendors Feature rich mobile clients for iOS and Android No IT admin required for setup
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
HipChat has a more focused environment that’s about getting the job done. Features like persistent,secure, searchable chat, video calling, screen sharing help team members keep communication on track.
Slack is group-centric and offers the ability to easily customize rooms, and, significantly, the ability to integrate one’s workflow with cloud services. It is good for synchronous communication and the integrations allow to push notifucatiosn directly from Slack.
Yammer is an enterprise social network designed for private communication for members within a given organization. The basic set up is free, easy to use, and, it provides a private, manageable, and secure online space for businesses to communicate.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 29
PROJECT PROPOSAL
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
POTENTIAL DESIGN OPPORTUNITIES
After getting some understanding of the segment, product and competition I was able to define some objectives for the project : Exploring new ways of how communication can take place or make a difference in an organisation for eg. how can remote collaboration between teams be improved, how can implicit communication be created in a digital, text-rich medium, how can communication and collaboration be made more meaningful. Understanding internal communication needs in workplaces by gaining better understanding of people’s typical work days and then Exploring new fun ways of expressing, communicating, giving feedback, follow up, building encouragement, showing appreciation. To understand the brand attributes by conducting qualitative research through indepth intervies with creators and users. To convert these brand attributes to visual concepts for a visual identity for the product. Redesigning the UI of the android app to be in sync with the upgraded functionality, aesthetics and philosophy. To understand communication from a psychological perspective to have clarity about the underlying principles and processes through qualitative design research methods. To apply the insights from research to create meaningful and relevant communication experiences that aid collaboration.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 31
knowing CONTEXT & PEOPLE
The goal was to understand people (end-users and other stakeholders) and their interactions with everything during their daily lives using design research methods, to uncover critical insights. All this information would enable the articulation of the context and the design challenges.
RESEARCH OBJECTIVES
Before we can begin to explore solutions, it was important to get deep understanding of the context and the users. Some things we wanted to get some insight into were : How do we bring about the nuances of implicit communication in a text rich medium like chat? How can we reduce communication breakdowns happening frequently in written communication (sms, chat, email)? What aspects of implicit communication will be useful to internal communication via chat? How might we add value to internal communication for organisations/enterprises/ workplaces? How do we understand the real needs of our users? How do we uncover what they truly value? How might we gain insight into the everyday life / behaviour / needs of our users? How might we improve the communication experience at the workplace? How do we study the tools people use currently to communicate and stay productive and organised?
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Some of the books and research papers I read to gain some insight into the research objectives I had identified.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 35
The research methodology followed was largely based on the Human Centred Design Toolkit by IDEO.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
CREATE
HEAR
Collect stories and inspiration from people; prepare for and conduct field research. Qualitative methods can uncover deeply- held needs, desires, and aspirations. Deep understanding, not broad coverage, is the strength of qualitative research.
Translate what you heard from people into frameworks, opportunities, solutions, and prototypes. Synthesis is the act of making sense of what we’ve seen and heard during the observations. Synthesis takes us from inspiration to ideas, from stories to strategic directions.
GOALS who to talk to how to gain empathy how to capture stories
GOALS making sense of data identifying patterns defining opportunities creating solutions
OUTPUTS peoples’ stories deeper understanding of needs, barriers, & constraints
OUTPUTS opportunities solutions prototypes
DELIVER
Realize your solutions through rapid revenue and cost modeling, capability assessment, and implementation planning. GOALS Once there are many desirable solutions, it is time to consider how to make these feasible and viable. The deliver phase will move your top ideas toward implementation. OUTPUTS This phase will challenges us to create the elements necessary to make the solution successful.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 37
LACK OF SOCIAL CUES PHYSICAL PROXIMITY LACK OF FAMILIARITY
FRACTURED DIGITAL COMMUNICATION
SWIFT TRUST
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
WAIT TIME
People who are physically co located are more likely to communicate frequently and informally. Physical proximity supports the opportunistic conversation which are vital to planning and definition phases of projects. Employees are more likely to be familiar with and to respect the work of colleagues who sit close to them.While employees who are in the same office commonly chat about their lives virtual teammates do so much more rarely. This is why isolation creeps in when people don’t work together physically.
A McKinsey Global Institute study found that high-skill knowledge workers spend 19 percent of their average workweek searching for and gathering information. That’s an incredible amount of lost productivity time in keeping track of the digital clutter created due to the myriad of communication tools used by workers today.
Dipersed teams typically see much more wait time (time taken to get back to them) which ultimately leads to collaboration fatigue. Projects go round and round, when, where and how somebody will decide noone knows. Lack of social cues may lead to misinterpret the quality of their own and other’s performance. Observing input of others via a computer results in focusing on only the content of the delivered tasks, lacks sensitivity to the ‘behind the scenes’ work necessary for successful task completion. Lack of interpersonal interaction leads to perceptions of increased individual performance as one becomes more aware of their own ‘behind the scenes’ work.
An initial face to face meeting can go a long way towards introducing team mates, seting expectations for trust and cander. Eye Contact and body language help to kindle personal connections and the “Swift trust” that allows a group of strangers to work together before long term bonds develop.
Business Miscommunication Business doesn’t happen face to face as often as some would like. Instead, today’s communication depends on conference calls and emails chains that make it challenging to get to know your partners. Because of this business world is full of miscommunication. At home and in social settings, miscommunication can lead to arguments. In the workplace, the repercussions can be far more serious. Poor productivity, unmotivated employees -- even lawsuits -- can result from communication breakdowns at the office. When someone writes a text in all capital letters, does it mean they’re yelling? Are one- or two-word responses a sign that the person doesn’t want to engage? On the flip side, does a smiley face or an acknowledgement of agreement really mean they’re bought in and aligned?
Some key findings
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 39
OVERUSING PUNCTUATION
REVERTING TO PERSONALITY STREOTYPES SYNCHRONY BIAS
EGOCENTRICISM
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
When people lack information, they tend to rely on stereotypes to fill in the gaps. In the case of emails and other digital messages, the missing information tends to be a full appreciation of the sender’s personality. That’s why it’s usually clear when a friend or loved one is joking in a note or text, but not always clear that a remote colleague is doing the same. So when we receive an email from someone we don’t know too well, we often revert to personality stereotypes, and in doing so raise the chances of emotional misinterpretation.
Overuse of punctuation or unecessary usage suggests something is not normal or the person is upset/offended. Emoticons may not be appropriate especially in the workplace and are limited in their ability to convey intentions accurately
people overestimate both their ability to convey their intended tone when they send an e-mail as well as their ability to correctly interpret the tone of messages others send to them”. the reason for this is “egocentrism”, a social phenomenon where people have difficulty detaching themselves from their own perspectives and understanding how other people will interpret them.
People do not intend to express their emotion improperly/misinterpret intended emotion. When people with to convey unpleasant/ negetive emotions, they do so weakly. Person receiving text messages has insufficient information to judge the emotions of the sender. This insufficient information is due to sender’s passiveness regarding their true emotion + lack of non verbal cues.
Detecting emotion in email & chat Communication technology has completely changed the way we connect with people to conduct business. Lean technologies, like texts and email, offer limited social cues. When you add voice and image you employ much richer sources of communication. We were born with the innate capability to communicate through our postures, gestures, facial expressions, and vocal prosody. In fact, our brains search for and expect these most primitive and significant channels of information. When we are denied these interpersonal cues, the brain struggles and real communication suffers.
Some key findings
Misinterpretation tends to comes in two forms: neutral or negative. So we dull positive notes (largely because the lack of emotional cues makes us less engaged with the message), and we assume the worst in questionable ones.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 41
AMBIGUOUS indirect and not very clear, difficult to interpret as the recipient can be confused about the message.interpretation is based on context, relationship, familiarity with the sender, current mood etc
NON VERBAL a silent storm of signals that people give off. does not use language or words
IMPLICIT COMMUNICATION
HARD WIRED
INVOLUNTARY
our non verbal behaviour is hard wired in our limbic system due to our biological and evolutionary heritage and it is largely universal in display
may or may not be intentional, not always under our control, biological impulse. non verbal behaviour is controlled by limbic brain and is usually unconsiderd, unannounced, immediate and impossible to resist.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
The brain takes speech and separates it into words and “melody” - the varying intonation in speech that reveals mood, gender and so on. Words are then shunted over to the left temporal lobe for processing, while the melody is channelled to the right side of the brain, a region more stimulated by music.
The limbic brain is most responsible for value judgments, and it is the limbic brain that plays the key role in all nonverbal communication Whether in business, at home, or in relationships, we can always be assured that true sentiments will be reflected in our body language through displays of comfort and discomfort. This binary system of communicating how we feel has stood the test of time and survived to help us through its elegant simplicity..
While punctuation could still be used to create or suggest the rhythms of speech, only the exclamation point and question mark indicated anything like what an orator would call “tone.” Nearly everyone has struggled to figure out whether or not a received message is sarcastic. So people began using exclamation points almost as sincerity markers. And as problems of tone kept arising on text and instant message, people turned to other punctuation marks on their keyboards rather than inventing new ones
Implicit communication refers to the use of facial expressions, body language, gestures, postures or vocal qualities to help get a message across. Often, we ‘give off’ these messages rather than send them. Since such communication is often given off, much depends on the recipient or observer of the message. Each person who gets the message probably has her or his own interpretation, based on the context brought to the message.
Virtual Body Language For millions of years, our early ancestors ambled on this planet, navigating a very dangerous world. They did so by communicating effectively their needs, emotions, fears, and desires with each other. Impressively, they achieved this through the use of nonverbal communications. This has been part of our biological heritage for so long that we still primarily communicate nonverbally. Limbic reaction are immediate, sure, time-tested, and honest and apply to us all. Limbic reactions are hard wired in us. Our needs, feelings, thoughts, and intentions are processed by the limbic brain and expressed in our body language. These limbic expressions are very simple and binary through a constellation of behaviors that fall under limbically driven comfort / discomfort displays. Someone gives us bad news and our lips compress, the bus leaves without us and we are clenching our jaws, rubbing our necks. These are discomfort displays and we transmit how we feel or what we are thinking, through our bodies, because this is what our limbic brain has perfected over millions of years.
Some key findings
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 43
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Current Techniques Predefined kinetic effects can be applied to a variety of textual messages, and these effects reliably convey a particular emotional intent. Kinetic typography can address some of this by enhancing emotional qualities of text communication, using its dynamic and expressive properties.
Because most people only send text messages to friends, family, loved ones and sometimes acquaintances, the communication techniques used in texting may be commonly known by each other. This familiarity may be responsible for being able to understand others’ text messages when there is a lack of non-verbal communication cues.
Users can select text and choose the tone. Users can control font size, font color, font face, font style. By using mappings that the users have specified to be meaningful to them, text tone facilitates the development of a visual vocabulary of tones. Users can rapidly infer the tones of parts of a conversation by the style of text used to archive it, without having to actually read the content.
Text based communication supports dialogue and information exchange, its form alone does not readily support expressing emotions. Online communities have appropriated the use of emoticons and other textual representations to address this issue, but the lack of expressive and versatile prepresentations introduces ambiguity, which limits their usefullness.While emoticons are the most successful so far, only four emoticons account for almost all of the common online usage, with the prototypical smiley face
Some key findings
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 45
EVALUATING RESEARCH TECHNIQUES
After the literature review, it was time to get more focused insights by observing and having conversations with potential users about their typical work days. While a number of research techniques could be used, it was crucial to identify which ones would be suitable for the context I was trying to study. Some techniques are too intrusive and the participants do not feel comfortable with them. This is primarily because they are at their workplace and are not at liberty to give interviews, or invite outsiders for fear of security of sensitive information.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
DESIGN PERSONAS Design personas focus on user goals, current behavior, and pain points . They are based on field research and real people and are good for communicating research insights and user goals, understanding and focusing on certain types of users, defining a product or service, and avoiding the elastic user and self—referential design. The idea behind persona creation is this: by delighting a single persona the rest will follow. Widening your target doesn’t improve your aim. To create a product that must satisfy a broad audience of users, logic will tell you to make it as broad in its functionality as possible to accommodate the most people. Logic is wrong. When you design for your primary persona, you end up delighting your primary persona and satisfying your secondary persona(s). If you design for everyone, you delight no one. That is the recipe for a mediocre product. A scenario tells the story of how the product will be used in the future. It is guided by persona needs and goals, rather than by system features and capabilities. The scenario’s context helps elicit and prioritize requirements.
Creating user personas/ profiles so that there is a basis for evaluating the design solutions.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 47
Observing a day in their life through contextual ethnography to identify behaviour and usage patterns.
A DAY IN THE LIFE OF
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Recording the screens of users along with their reaction, to see in real time how they use the product.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 49
Understanding the activities different departments perform on a day to day basis.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
DEPARTMENTS
ACTIVITIES PERFORMED ON A DAY TO DAY BASIS
SOFTWARES/TOOLS/APPS USED AT WORK
Dev teams
Scheduling meetings / calls / events
Ticketing (eg. Jira, Kayako)
UX / Design
/ outings with work colleagues (only
Design (eg. Photoshop, Illustrator,
Product Management
on scheduling)
Canva)
Devops / System admins / NOC
Assigning tasks to work colleagues
Project Management (eg. Basecamp,
HR / Recruitment
Asking for a status update on a task
Trello)
Finance / Accounts
that some colleague was supposed
Social Network (eg. LinkedIn,
Facilities / Transport / Travel Desk
to perform
Facebook)
IT Support
Participating in status update
Email client (eg. Gmail, Thunderbird,
Customer Support
meetings / Standups / Iteration
Outlook etc)
meetings / sprint meetings
Calendaring (eg. Google Calendar)
Research / Reading
Office Suite (eg. Google docs, MS
Documentation (eg. reports,
Office etc)
presentations)
Shared Drive (eg. Google Drive,
Training / Mentoring
Dropbox)
Sales / Marketing
Note taking / To do lists (eg. Google Keep, Sticky notes, Evernote)
GROUP DISCUSSIONS ACROSS DEPARTMENTS To start off, discussion sessions were organised with 5-6 people of each department within the company to understand the kind of activities they perform daily, the softwares they use, the frequency of their interactions etc. The idea was to figure out which 5 things could we create integrations for within Flock. This gave us some initial understanding of people's typical work day, what can help them be productive, and their communication needs at work. The communication needs and functions were mapped for different user profiles along with other related behaviour. It was decided to focus on integrations for most common activities like creating polls, assigning tasks, taking notes, to dos, scheduling meetings.
Video calling (eg. Skype, Hangouts) Chat (eg. Skype, Slack, Telegram) Screen sharing (eg. Skype, Gotomeeting, Teamviewer) Screenshot (eg. Skitch)
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 51
PARTICIPANTS Saurav Mishra - Ambox Saurabh Gupta - TCS Eva Gandhi - Riva Aparna Prachi - Riva Surbhi Ankit Dewan - Deutek
Have a conversation, don’t interview Uncover the values not the needs Meet extreme users, avoid average ones Pull out stories, not opinions
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
IN DEPTH INTERVIEWS - Age, Education Background
- What information do you rely on
- How do you schedule meetings?
- What is your job role, job title?
in a normal working day? Where
How do you find out about
Length of time in position, length
do you obtain this information
people’s availability?
of time with the organisation?
from?
- How do you express appreciation
- What industry does your
- How do you find out what is
or share feedback over digital
company work in? What is the
happening in the organisation?
communication tools?
size of your company (no. of
How do you learn new information
employees, locations)
for your job? - How do you find out who to contact for a certain task/question?
- What are your job
How do you contact them, using
responsibilities? What are the main
what tool/medium?
activities that make up your job?
- Have you ever suffered any communication breakdowns? What was the reason? - When working with colleagues in different locations, is there ever a problem of miscommunication/
- What skills are required technological, interpersonal?
- Tasks that take the logest, are
misunderstanding?
- What is a typical work day for
the most critical or are performed
- Do you experience difficulty
you? Describe any typical day.
most often (tasks that eat a lot of
expressing the tone of your
time)
message? Have you ever been
- Common questions, tasks your
misunderstood?
The objective of these interviews was to get a first hand understanding of people’s typical work days, communication needs at work, what can help them be productive, and how we can add value to remote collaboration/ communication. The idea of these interviews is to understand the participants needs, motivations, goals; attitudes, behaviour patterns and traits; challenges, pain points, frustrations; expectations and assumptions; environment and context.
colleagues/team asks you to do - What all tools/mediums do you use for internal communication? Why? - Who do you report to? Who reports to you? - What teams or people within the organisation do you interact with the most?
- Major frustrations when trying tp achieve goals related to internal communication. (frustrations with people or products) - How could the tools be made better? - What do they like about communication tools, mediums.
- Do you have policies/guidelines for communication? How do you get access to these? - What makes a good/productive working day? - What will help you do your job better?
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 53
COMMUNICATION TOOLS USED
FINDING THE RIGHT PERSON
SCHEDULING MEETINGS
- Communication tools depend on convenience and purpose, nature of information needed decide the medium - Have to follow hierarchy - affects choice of medium use chat with peers, not managers; a call, email looks more decent - Client preference also decides the tool - they usually prefer more formal tools for securuty reasons - secure and formal communication
- Finding the right person to contact is a nightmare need some information but no idea who may have it, how should one even go about looking for that person, the tools provide a means to communicate but dont’t provide much information about the person.
- scheduling meetings are done on microsoft calendar as can easily check everyone’s availability, book a room.
- Email helps conversation stay on record, task assignments, status updates - Email is meant for formal communication emails can’t be relied upon for urgent work as someone may not check it, usually follow up with a phone call
- Not being bale to find the right person cause information delay - usually contact their senior managers. People also have identified their own contacts, based on informal friendships etc
- If something is urgent and people don’t respond then have to find their phone number and badger them, its the only way to get work done.
- generally look for open time slots, time zone and availability dependencies. they are scheduled over email, and invite is sent to block calendar. they can be rescheduled depending on availability. rescheduling is very tedious but expected - often some manual intervention is needed. have to be adamant and ask people to join meetings
- Chat works to a limit but does not suffice. its good for announcements, reminders, small updates - For people on same floor discussion are usually done in person as don’t want to create a barrier and discourage face to face communication, usually ping them first and then go over
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Key findng snd behaviour patterns
CHALLENGES / FRUSTRATIONS
WORKING REMOTELY
PRODUCTIVE DAY
- Approval process is usually quite long but can’t do anythinhg about it - Communication becomes tricky when employees travel
- Sitting in a remote location it becomes hard to ascretain where a certain person is, you keep pinging them again and again, they could be very busy or facing an emergency
- learning something new, uncovering something that would have had a major impact, learn a new tool, getting appreciation by clients/managers, closing something
- Challenge is that sometimes managers are busy its difficult to get their time and attention, and they respond late
- Collecting people is too hard, coordination becomes quite a hassle, people keep delaying and it wastes timetechnology can only send reminders, but can’t make you move rapport matters a lot, getting people;s attention becomes a challenge if they are on dnd, if they are busy
- When you get work done, finish something, not waste time chasing others for info or updates
- A number of the people with whom they interact are on a daily basis are not co-located, not even in same time zone. Communicate with them using - email, voip, chat, personal phones, skype. A combination of tools has to be used since one tool does not solve all needs
- When there are no bottlenecks, no time is wasted by meetings spilling over, when people convey the right message across eg for new initiatives etc
- Its very diificult to keep track of multiple tools - need a unified tool with a clear, simple UI - Contact info is usually scattered across the products (name, phone, email, username, department, description)
- Achieving targets, closing deals, reaching out to people at the right time, able to catch people, understand their time limitations, get the right info from people at the right time
- When working remotely , you often get excluded or fall out of the loop. people forget to inform you of things like change in meetings, delays etc
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 55
Pinpoint the frustrations with curret tools, the work arounds they are using, since that is where potential for innovation lies
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
MISUNDERSTANDING
DESIRABLE FEATURES
- 80% communication is done on call to avoid any miscommunication. voice has more impact than text people may miss out on reading text but not what you are saying.
- Tools should be unified with a single interface and login, they should be portable - mobile so that they can be accessed from anywhere, they should be secure, encrypted, they should show time, location set certain rules so that work communication remains within office hours, cost eefctive
- Problem of etiquette comes with freshers, especially with clients from other countries due to cultural differences. - Miscommunication can happen across locations, due to infrequent communication and lack of familiarity, esp with people who have never met in person. - You are often left wondering when you don’t get a response - whether the person is busy, travelling, forgotten. Not sure if you need to follow up - Generally don’t use chat right away to commuincate with someone, as a courtesy, since everyone does not use chat. drop a mail usually for introduction/ context and then ping/call them. - when talking to someone new, you don’t know wha they are like, so short replies can seem rude or curt
- Tools shoud be intelligent - serach for people based on expertise, skill to involve in projects. Should clearly tell about a person’s availability, status, and secondary contact perosn if they are unavailable - Enable you to assign tasks, track status on multiple projects - to do - Should serve as a social portal to understand what is happening around the organisation; communication history should be integrated across channels
- sometimes it happens that if someone is angry at another person they will write the email in caps, highlight in red etc, in such cases have to provide inputs on email etiquette
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 57
framing INSIGHTS
After conducting research, the next step was to bring structure to what has been found and learned from the previous modes. Once the context was articulated, the insights were used to create design goals for the explorations and the design solutions.
Based on the research, I articulated certain design goals to guide the exploration of deisgn concepts. It was important to identify the patterns emerging in the user behaviour. These actionable insights helped in the next mode when I started working on the design concepts.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
DESIGN GOALS
In the absence of full context of the other person’s personality, messages are likely to get misinterpreted. This is because of attribution error. The design solutions created should aim to overcome this and foster trust amongst the employess by providing this missing information. If you don’t know who you are looking for, it is very tedious to find that person. However by enabling meta data based search we can let people become searchable by department, projects etc. This can make it easier to discover people. Using type styling, messages can be emphasised to indicate urgency and grab attention in a subtle way. We can try to do this by using ambient notifications when a message is tagged high priority. Using labels and background colors to indicate priority can be useful too. The awkwardness and misunderstandings in written communication leave much to be desired. The assurance that you are well understood and knowing the status of your requests is something everyone has wanted. Having tasks integrated, automated can make the overall experience more satisfying. Dispersed teams often tend to feel left out of the action. With rich profiles, company wide announcements, we can address this issue since it will be easy to know what is happening in the organisation. This can help build a searchable knowledge base that benefits people as they join the team. With the new direction the product was heading into there was a need to redesign the branding for a clearer communication that has an impact. There was also a need to update android app based on material design principles.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 61
COMFORT / DISCOMFORT DISPLAY
UNIFIED COMMUNICATION bring all information in one place reduce digital clutter to keep track of by bringing all contacts, tools, files etc in one place
by bringing body language, tone of voice in chat
USING SOUNDS a previously under utilised stimuli since the right hemisphere of the brain responds to music and interprets the rythm and intonation in speech
PROMOTE AN OPEN CULTURE acknowledge people’s hard work openly in groups by praising it create more awareness and appreciation of each other’s work
AID VIRTUAL / REMOTE COLLABORATION reduce bottlenecks, wait time, information delays make it easier to get people’s attention, indicate urgency try to reduce the time eaten up in coordination, follow ups
AVOID COLLABORATION FATIGUE
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Some of the themes identified based on which the concepts were explored.
PROVIDE MORE CONTEXT, BRING IN MORE FAMILIARITY potentially reduce misinterpretation address the problem of lack of social cues
DESIGN INTERVENTIONS After looking at the insights, it became quite evident that the product would be headed in a new direction. This would include a platform-like approach where different apps can be integrated within Flock to provide a unified communicaton experience. The design team had been considering redesigning the product identity for some time, and this juncture provided a good opportunity to take this up. The new identity would better reflect the philosophy behind the product. Also since the android app needed a design overhaul, it was decided that for the purpose of my project, I would explore the design solutions in the context of an android environment.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 65
exploring CONCEPTS
In this mode cencepts were explored, based on the design goals identified in the earlier phase. I have used the insights and principles framed earlier as the starting places to generate concepts. Once the user needs had been identified, different strategies were explored for creating engaging communication experiences.
PART 1 REDESIGNING THE VISUAL IDENTITY
There is a need to design the visual identity for this product which is not just appealing but creates differentiation from the competition. Before starting off, a basic understanding was needed of what Branding really means in today’s digital age. A brand is not a logo or an identity, or even aproduct for that matter. It is in fact a a person’s gut feeling about a product, service, or organization It’s a gut feeling because people are emotional, intuitive beings. Brand is a stand – a shortcut for expectations, worldview connections, experiences and promised that a product or service makes. A good identity is about creating a mark that stands strong in its context and can serve as an identifier for the corporation or the product in the eyes of its intended audience.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
PROCESS Flock is mostly used by organisations that are young and have informal, flat structures. Information would be collected about the product and its background story by interacting with the relevant people. interviewing the existing users to understand their perceptions and associations with the product.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 69
The communication app for teams
GET WORK
The communication app for teams
Windows PC Windows Phone
www.flock.co
Mac iPhone
Android
/flockchat
Chrome
@flockchat
ANALYSING THE CURRENT IDENTITY The existing identity and color scheme was too similar to Feedly, Whatsapp, Hangouts because of the hue of the primary brand color. All of these use a similar shade of green.
DONE FASTER
Win goodie hampers for your team
All you need to do is
Download Flock & sign up with your official email
Invite any 2 members from your team
Send a message to one of the invitees
Download the App: www.flock.co/go
Windows PC Windows Phone
Mac iPhone
Android
Group Company
Chrome
It falls short of communicating anything beside chat, and its too generic which is perhaps why it is easily missed. It is a little blank, shallow, lacks depth and meaning in terms of what it stands for. It fails to communicate what the product is about. There is no color associated with enterprise chat yet. The logo is easily missed and the color association with the brand is poor. The icon is generic, just chat, not chat for work.
The existing identity was too similar to Feedly
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
What was the motivation/inspiration behind Flock?
Describe Flock in one sentence.
Is there a story unique to Flock and how it came
Describe it in 2 words.
into being?
Describe it in 1 word.
What were the challenges in creating it? What have been some of the major milestones?
What is the personality of Flock like?
What makes Flock unique? What is the USP?
What are some attributes of Flock as a brand?
What are the future plans? When I say Flock, what is the first image that comes Who are the typical users?
to your mind? If it was an object, what would it be?
How does the market see Flock today?
If it was an animal, which one would it be?
INTERVIEWS WITH STAKEHOLDERS To understand the background, story, unique features/ qualities, perceptions and associations. These helped to create a visual moodboard and identify the keywords associated with the brand image.
Who are your competitors? How are they better/ worse than your product?
One thing that you love and one thing that you hate about Flock.
What is the brand image of Flock like? What aspect
If you could change one thing, what would it be?
of it needs improvement? What is the image you want to portray? How do you want your brand image to be seen in two years? What do you like/dislike about the current identity? What was the concept behind the current identity? Also why the name “Flock�? What other names were considered?
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 71
WHAT USERS LIKE
WHAT USERS DISLIKE
Flock makes communication across teams, some of whom work remotely, very simple . Flock is good for business related communication since it provides segregation of contacts. You know what to expect. In-built features like DND and muting off group notifications are good. Adding and finding contacts is very easy as compared to whatsapp/skype.
Screenshare is an essential feature for enterprise communication that is missing in Flock.
Flock is very easy to use as compared to Slack. The learning curve is less and it needs no technical knowledge to setup or use. It helps people get organised on the basis of tasks rather than hierarchy by creating ad-hoc groups.
Currently the contacts roster and chat window are the same and users want them to be separate as contacts roster is not used frequently.
It lets people work without being at the forefront of their experience. Its frill-free.It allows multi-tasking by minimising the time spent on internal communication. People can thus do more with their day and their productivity and efficiency increases.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
While history can be searched, it cannot be extracted and shared. While this is not essential it would facilitate communication. Groups often become a nuisance, especially on mobile. The constant notifications become distracting.
There is no way to sort contacts based on personal preference or mark favorites etc. There is too much external dependence. You need to know the person beforehand, Flock does not give any information about what team they are on, or their location.
THE AUDIENCE
Enterprise chat will always be a top-down decision. Its influenced more by what people around you are using/what the organisation decides to use, rather than your own preferences. Internal Communication is not the biggest priority for companies. They have some system for it but don’t actively look for products. People are not very likely to adopt a product if there is no significant value addition. Currently it is popular with smaller businesses who dont want much from a chat app, just basic communication. Its perfect for organisations with informal, flat work cultures. This is also reflected in the copy and visual language.
RECOMMENDATIONS
The ideal business communication tool would have to be seamless, where you dont need to add contacts and can see their phone numbers, e-mails etc all in the same interface. You should be able to jump onto call/chat/VC easily. The ideal solution would be hybrid with the instant nature of chat as well as the more permanent features of e-mail. Currently the experience is fractured. A number of features are hard for people to discover. Some fun videos, guided tours, tips etc could make them more discoverable thus enhancing the experience. Flock can use the peoples’ content for its features like, to do lists, appointments, meeting, bookmarks etc. Content should become the hero and drive everything. This can make it very personal and add value.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 73
EFFICIENCY & PRODUCTIVITY
YOUR VIRTUAL ASSISTANT
TEAM COLLABORATION
SMARTER CHOICE
Flock is built to leverage the efficiency gains that individuals, teams and even organizations at large, enjoy when communication and information sharing happens in realtime. Flock’s goal is to provide every user a single workspace with minimal need to switch to or use any other tool to complete a task. With Flock, users would now gain more on time and real time information with everything they need in one place, resulting in increased productivity and efficiency.
Think of Flock as your sidekick. An artificially cloned extension of you or your very own executive assistant. For all tasks that require you to invest time and effort, let Flock make them easy and ensure you don’t leave your desk to get them done.
Flock is designed to help teams achieve higher efficiency and maximum productivity. It aims to do so by making sure that every member uses a single workspace to share information, stay updated and in sync with other team members, without effort. Flock also facilitates collaboration across teams and even with parties outside of the company such as vendors, clients etc., making it your one stop shop for collaborating on everything from an important office project, to planning a team dinner.
Flock was created with the singular vision of ditching email and moving to a solution that allows work to be completed in real time. However, Flock has come a long way from just being an alternative to traditional email. Today Flock is a software ecosystem in itself, allowing a user to do more than traditional email or even competitors such as Google Hangouts and Whatsapp ever could.
Work Ninja/ Ninja at Work
Do More. Together. Collaborations made easy
Get work done. Faster Freedom to do more. Flock Some of the themes identified for the identity based on the interviews with the stakeholders
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Leave Email behind. Flock
KEYWORD CLUSTERS collaboration convergence nimble lightweight fast agile spontaneous intuitive cool witty fun zest quirky
clean simple sleek approachable affable friendly meticulous efficient dependable gregarious reliable
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 75
CONVERGENCE
CLEAN/SIMPLE
Flock allows for real time collaboration between teams, irrespective of location or device. The idea is that it builds a community of people by connecting them in real time.
The design of Flock is very simple. The same should be reflected in its visual language as well. The lines should be clean and the illustrations simple with minimal details that convey a lot.
EFFICIENT
ZEST / QUIRKY
Flock allows you to multi-task by freeing up your schedule, thereby increasing your productivity. It is asy to install, use and takes up little space.
Just because its meant for work, it doesn’t have to be boring. Flock has its unique quirks that make it pleasant to use.
SPONTANEOUS The interface of Flock is intuitive and as it evolves it will become more spontaneous, adding value to the user’s communication experience. It plays many roles. It is professional and fun at the same time.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Based on the interaction with the users, these keywords were identified about the perceptions and associations with the brand. The concepts for the identity were created based on these.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 77
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 79
The bouba/kiki effect is a non-arbitrary mapping between speech sounds and the visual shape of objects. the curvy shape as "bouba" and the jagged one as "kiki", suggesting that the human brain somehow attaches abstract meanings to the shapes and sounds in a consistent way.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
TANGRAMS
GROUP OF FISH
ABSTRACTION
BIRDS IN FLIGHT / ORIGAMI
Based on the keywords some concepts were explored. The main message to bring about was that of modularity, community and collaboration.
FEATHER
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 81
FLOCK FLOCK Fish also show grouping behaviour. Instead of the obvious birds or sheep this could be a slightly different direction to explore.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Feathers not only suggest lightness, flight and freedom but also writing.
This concept takes inspiration from tangrams which are triangular shapes that can be rearranged to form hundred of forms.
While keeping the original color scheme in mind, a number of new color plaettes were explored to keep the icon and UI bright and inviting and yet not jarring to the eyes.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 83
When users see the app icon in the App store they start to build assumptions about the user experience, how enjoyable it’s going to be to use, how intuitive it will be and how well will it serve their needs. If an icon looks great and is carefully crafted, it is reasonable to assume that the rest of the app is equally well crafted.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 85
DESIGNING APP ICONS
The app icon is usually the first place most people will encounter your app. It is crucial to stand out from the crowd. Being beautiful and instantly recognizable are the two main qualities you to keep in mind. Users start to build other kinds of assumptions about your app based on the app icon – how good your technology is, how secure you app is, is it stable, is it better than the competition? Creating that one, singular piece of graphic design that users will interact with first each time they see your product can be an intimidating task. A beautiful, identifiable and memorable app icon can have a huge impact on the popularity and success of an app. But how exactly does one make a ‘good’ app icon? What does that even mean?
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
WHAT IS AN APP ICON? An app icon is a visual anchor for your product. It as a tiny piece of branding that not only needs to look attractive and stand out, but ideally also communicate the core essence of the application. App icons are not logos. While they certainly share branding-like qualities, they’re under a lot of different restrictions. It’s an important distinction for the designer to make. The approach, the tools, the job and therefore the criteria for success are different
SCALABILITY One of the most important aspects of an icon is scalability. Because the icon is going to be shown in several places throughout the platform, and at several sizes, it’s important the creation maintains its legibility and uniqueness. Overly complicated icons that try to cram too much onto the canvas often fall victim to bad scalability.
RECOGNISABILITY An app icon is like a little song, and being able to identify it easily in amongst all the noise of the store
or the homescreen is a key component in great icon design. Like the verse of a song needs to resonate with the listener, so do the shapes, colours and ideas of an app icon. The design needs to craft a sense of memory and connection on both a functional and an emotional level. The icon will be vying for attention amongst thousands of other icons, all of which have the same 1024px canvas to make their impact and secure their connection with the viewer. While scalability is a huge part of recognisability, so is novelty. The search for a balance between these qualities is the very crux of the discipline.
CONSISTENCY The icon to interface consistency is important in strengthening your visual narrative. There’s something to be said for creating consistency between the experience of interacting with your app icon and interacting with the app it represents. A good icon design is an extension of what the app is all about. Making sure the two support each other will create a more memorable encounter. Shaping a sleek, unified image of your app in your users’ minds increases product satisfaction, retention and virality. One way to
ensure consistency between app and icon is to keep the colour palette of your interface and icon in line, and use a similar and consistent design language – a green interface reinforced by a green app icon, for example. Although it’s not always possible, one way to tighten the connection between your app and your icon is for the symbolism of the icon to directly relate to the functionality of the app
UNIQUENESS The icon should ideally be unique since it will be constantly competing with other icons for the users’ attention, and standing out can be a perfectly valid argument for a design. Icons are seen at all different sizes. They are large in the App store, get small on the home screen and even smaller in the notification center and in groups. Make sure that the image that you choose for your icons can reduce really well and is clear at any size. Choose a limited palette. One or maybe two colors are enough.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 87
The shortlisted concepts were then refined based on the principles of 7 step logo test.
THE 7-STEP PAUL RAND LOGO TEST The principal role of a logo is to identify, and simplicity is its means. Its effectiveness depends on distinctiveness, visibility, adaptability, memorability, universality, and timelessness.
IS IT DISTINCTIVE? Distinctive means unique and different from everything else. It stands out among the crowd and isn’t easily confused with others.
IS IT VISIBLE? Visible means noticeable or easily seen. Always make sure your logo looks good in both black and white.
IS IT ADAPTABLE? Adaptability means that it works across numerous applications — on a t-shirt, on a cup, online, on a truck, on a road sign.
IS IT TIMELESS? The biggest principles to remember when crafting a timeless logo is do not use the “hottest” colors, “flashiest” fonts, or “coolest” styles. Fads change like the weather, but the sun always comes up, and the sky is always blue. Find the strong core of your design and trim off the extra embellishments. Minimalism is the art of saying more by saying less.
IS IT SIMPLE? This last step is about stripping out and reducing extraneous detail to unveil a pure and playful end-product. The appearance and design of a strong logo will be legible and pleasing regardless of its size. Draw it by hand in ten seconds with a pencil. If you can do this easily, then you have a simple logo
IS IT MEMORABLE? The goal of a logo is to be unforgettable — so that when a person feels the need your business solves, your logo comes to immediately mind.
IS IT UNIVERSAL? When universal logo carries a consistent meaning to a diverse range of people. This is possibly the most difficult part in creating a logo because everyone is different.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 89
The next agenda was to create and refine the chat icon shape that would complement the symbol for the identity. The chat icons was needed to clearly denote the basic functionality of the app.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 91
Refining the final form by softening the corners and adding shadows.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
CUSTOMISING THE LOGOTYPE Evaluating the existing lettermark - connections, stroke/ angles, weight by Jessica Hische
Making adjustments to the logotype is invisible design; no one except designers notice it, yet it works in a very subtle manner. The idea here is to improve legibility at small sizes. Logo needs to work at both small scale and large scale. In small sizes more letterspacing is needed between letters to help legibility so that it does not look too cramped or tight, letters should have bigger bands and wider apertures Letterforms should not merge together, connections between them should be very clear. Balance should be created by optical weight rather than metrics.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 93
A number of typefaces were considered and 3 options were shortlitsed based on the anatomy that complemented the symbol.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
flock Fira Sans
Fira Sans is a humanist sans-serif typeface designed by Erik Spiekermann, Ralph du Carrois, Anja Meiners and Botio Nikoltchev of Carrois Type Design. It is closely related to the Meta typeface designed and developed by Spiekermann in the late 1980s which is used as the brand typeface of the Mozilla Foundation.
Aller
Aller is a font family with a unique design and warm tone of voice. It has a number of features that give it the warm character that has made it perfect for all sorts of branding and design applications, from wedding invitations to corporate communications. The design has convex stroke terminals which create a little bit of softness in every letter.
Quicksand
Quicksand is a free, open-source sans-serif typeface designed by Andrew Paglinawan. It has rounded letterforms giving it a warm and friendly appearance. Quicksand is available in light, normal and bold,
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 95
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Exploring lockups with logotype, symbol and color variations.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 97
Some more explorations with the final symbol and final logotype.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
An alternate color scheme with logo alternates.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 99
PART 2 REDESIGNING THE ANDROID APP
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
The android app was not as per material design guidelines. Redesigning the app had been in the pipeline for a while and this seemed like a good opportunity to give that a go. Building on some of the existig work that had been done on the app, we tried some variations without changing the basic Information Architecture too drastically.
Material Design is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer MatĂas Duarte explained that, "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 101
Material Design specifies guidelines for layout, use of color, typography and grids.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
MATERIAL IS THE METAPHOR
BOLD, GRAPHIC, INTENTIONAL
MOTION PROVIDES MEANING
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 103
SIGN UP
SET UP PROFILE
LANDING
CHATS
GROUPS
UPDATE STATUS CONTACTS
START CONVERSATION / GROUP
INVITE CONTACTS
THE FLOW DIAGRAM
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Th hallmarks of design at Flock and the basic workflow of the app.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 105
EXPLORATIONS OF UI
The roster has chats, groups and contacts. The profile can be acessed from inside the menu or as a quick link on the status bar.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
The contacts and group info can be accessed as quick card directly from the roster.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 111
Variations of the FAB It can reveal more options like - new chat / group or invite contacts.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Explorations of chat pane
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 113
Explorations of interstitial screens or overlays for add menu.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
DESIGN CONCEPTS
Based on the key reserach findings and design goals identified earlier, I explored new features and functionality that could be integrated within the existing Information Architecture of the product. These would not only help address the limitations of the medium but would aid remote collaboration and help in increasing productivity at work.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 115
1
DISPLAY COMFORT / DISCOMFORT
Users can mark blocks of messages with the emotional state they wish to convey. This can then be displayed using kinetic typography, notification sounds mapped to the effect.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Drawing from learnings about what body language essentially boils down to, the concept was to come up with a signalling system to signal comfort / discomfort, agreement, emotion, tone of voice etc. These could use other mediums besides text or emoticons like sounds, kinetic effects, expressive typography which utilise previously unexplored stimuli. The idea is to make the experience more immersive and ambient. However, this solution may not bring too much value to enterprise commuinication as getting the information across is far more important than expressing the tone of the message.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 117
2
INDICATE PRIORITY / URGENCY
Messages that are high priority can be tagged so that they are not missed out. Furthermore they can be flagged / starred for follow ups, so that it’s easier to revisit them.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Often times in Group Chat there can be a lot of noise since multiple participants post messages and status updates. While @mentions certainly help attract the right person’s attention it can become difficult to differentiate messages that are high priority. Tagging high priority messages using labels or background colors can make it easier to locate and differentiate them. Additionally, the functionality to flag / star such messages for follow up will make it easy to revisit them when needed.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 119
3
ENABLE PEOPLE DISCOVERY
SEARCH
Name Department Contact Info Name Department Contact Info Name Department Contact Info Name Department Contact Info
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
A powerful metadata based search would allow users to look for their colleagues based on their Department or Manager
Its very difficult to find someone on chat or email, unless you already know who you are looking for. This is an area that is addressed poorly by the existing system. I propose to tackle this challenge by creating rich user profiles that would not only have their contact information, but also important details like their Department, Manager, people they work with, projects they are assigned to, for what kind of quiries they can be contacted. We can also build functionality perhaps in the form of a linked in intergration, which allows their skills to be visible in Flock as well. A powerful meta data based search would make colleagues discoverable and create opportunities for collaborations that did not exist before.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 121
4 GUIDED ONBOARDING WELCOME TO FLOCK Set up your profile and make it easy for your colleagues to find you. Visit the tips page to see which groups you should join.
A guided onbaording would give the user suggestions about the groups they should join.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Communication tools can be overwhelming, especially for a new employee. Not only are they unfamiliar with their colleagues, but also not having enough context on the structute, groups etc that are used in the chat can make them feel lost and unwelcome. I propose to address this problem by creating a guided onboarding experience which is currently missing in the product. Unlike typical walkthroughs that only take you through the basic functionality of the product, here the focus would be on familiarising the person with need to know information such as what groups to join, relevant contact people, things to keep in mind while using the product, along with some context on the features and functionality.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 123
5
REQUEST CARDS
Ninad has requested a meeting 14:00 @ VC ROOM 1 RESCHEDULE
ACCEPT
Ninad has requested a meeting 14:00 @ VC ROOM 1 RESCHEDULE
ACCEPT The request cards can appear as cards that can either be accepted or rescheduled. The uers can be notified accordingly.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
A common complaint found amongst employees who work with remote teams, is that they face a lot of ambiguity. Since they are not familiar with thes people they work with informally, they don’t have a full context of their personality which can make communication not only challenging, but awkward and frustrating at times. Request cards can be used to address these information delays. Once a request is created, the Flock Bot can be used to follow up and check on the status. This can potentially make tasks that end up eating too much time, easier and more automated. Request cards can be used for scheduling meetings, requesting approvals, getting feedback etc. This can offer many advantages. The same cards can serve a number of purposes. They can be used for follow ups and reminders.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 125
6
WORK CAN WAIT WORK HOURS 9 am to 6 pm WORK CAN WAIT
A simple overlay can explain the feature prompting the user to try it out. The copy should be pleasant, friendly and empathetic.
Too many notifications bothering you at night and on weekends. Not to worry, simply tell us what your regular work hours are, and leave the rest to us. We’ll make sure that there are no interruptions in your personal time.
MAYBE LATER
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
TRY NOW
The settings can enable the user to set their work hours and days.
With communication tools, that are always on, segregating personal and professional life can be challenging. A custom DND can be useful here. This can allow the user to set their work hours and days, so that they are not disturbed with notification in their off hours, or bombarded with notifications when they come back. A compiled email can be sent at the end of the day for all the messages they may have missed.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 127
7
FLOCK TIPS FOR BETTER COMMUNICATION
THINK BEFORE YOU SEND Remember that public posts within the network are written records. If you’re upset about an issue, wait five minutes before posting.
The cards can have visuals that convey the message in a playful manner.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
The experience can be designed as a list of cards that a person can easily swipe through.
With any form of written communication, misunderstandings are inevitable, especially in a new medium. As with email and phone conversations before that, it takes a while for a customary code of behavior to emerge. The challenge for users is to remember that it’s a professional setting. A big part of addressing a challenge is acknowledging that a problem exists. This solution would be aimed at creating more of that mindfulness, where employees are aware of the limitations of a textdriven medium like chat and how they can overcome the shortcomings by using the product more mindfully. This information can be share in the form of tip cards that popup on the screen when one opens the app. In this way, this can be used to remind them time and again and address the limitations of chat.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 129
PROOFREAD YOUR POSTS.
PRAISE PUBLICLY, CRITICIZE PRIVATELY
Grammatical errors don’t impress anyone, particularly in a work setting. Get a feel for your network and the kind of language that’s appropriate. Some networks may be relatively casual, but others might not be.
Never criticize someone in a public group. You shouldn't do that face-to-face in a group meeting, you shouldn't do it in a group email, and you shouldn't do it in a group. Publicly criticizing someone can cause embarrassment at best, and at worst can lead to resentment, which could hurt team morale and make that person less likely to speak up and communicate regularly in the future. If you have a serious matter to discuss with someone or you have an issue with someone, it’s best to be done in a private message.
THINK BEFORE YOU SEND Remember that public posts within the network are written records. If you’re upset about an issue, wait five minutes before posting.
You wouldn’t walk into a room full of colleagues without saying hi or leave the room without telling everyone you were taking off for the day—and don’t do it in a group either. it’s good etiquette to announce when you are going out for lunch for a bit or need to step away to attend a meeting. This stops people from wondering why you aren’t replying to a discussion.
PROPER USE OF EMOJIS BE DIRECT It’s good etiquette to call people by name in every message when speaking to them in a public channel. Saying “@Michael, can you do this?” directs each statement you type to the appropriate person so it is always clear who is being spoken to.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
ANNOUNCE WHEN YOU ARRIVE & LEAVE
Excessive emoji use can make you look a bit unprofessional. If you are trying to make a point and your message sounds curt, there may be a place, depending on that relationship with that person you’re communicating with, that you might send an emoji that is upbeat or softens the tone.
KEEP NIGHT & WEEKEND CHAT MINIMUM
FIGURE OUT THE BEST STYLE
It’s best to keep night and weekend chat to a minimum so your team members won’t be bothered with notifications on their time off. With all our gadgets and their pings and push notifications, it’s already hard enough to switch off from work for the night or week.
Etiquette is all about being mindful of others’ feelings and communication styles. That mindfulness can be easily lost when everyone in your organization, from the intern to the CEO, is reduced to sentences on a screen. Go back and read through previous messages in channels to get a sense of people’s communication style. A casual style of writing with lots of emojis may not be appropriate everywhere.
WHEN TO COMMUNICATE IN PERSON One-on-ones and feedback sessions between managers and their reports, training sessions, and demonstrations—are still important to have face-to-face. When you’re having a discussion with many people at once, sometimes things can get a little confusing, or ideas and opinions can get lost in the shuffle. Quite often the best thing to do is take the conversation offline and regroup with the necessary people. then post summary notes from those meetings for follow-up discussions.”
KEEP CONVERSATIONS FOCUSED Be aware of who and how many people are in a group. When you speak, you’re asking for these people’s attention, so use that time productively. Respect everyone’s time by keeping messages in those channels relevant, purposeful, and concise.
After discussions and brainstorming, we compiled a list of basic etiquette tips that we could potentially start with. This can become am ongoing activity, and new tips can be released periodically.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 131
Making something obvious has a cost. Sreen real estate, attention span, comprehension, etc. Making something obvious is expensive because it often means you have to make a whole bunch of other things less obvious. Obvious dominates and only one thing can truly dominate at a time. Obvious is all about always. The thing(s) people do all the time, the always stuff, should be obvious. The core, the epicenter, the essence of the product should be obvious.
OBVIOUS ALWAYS
EASY FREQUENT
POSSIBLE RARE
The things that should be easy are the things that people do frequently, but not always. It all depends on your product, and your customer, but when you build a product you should know the difference between the things people do all the time and the things they do often. This can be hard, and will often lead to the most internal debates, but it’s important to think deeply about the difference between always and often so you get this right.
And finally are the things that are possible. These are things people do sometimes. Rarely, even. So they don’t need to be front and center, but they need to be possible. Possible is usually the trickiest category because the realistic list of things that should be possible will often be significantly longer than the list of things that should be obvious or easy. That means that some things on the possible list might be better off off the list completely. Instead of making them possible, maybe not making them at all is the right call.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
designing SOLUTIONS
The emphasis was on building on the concepts that were developed earlier by ensuring that the solutions can provide real value. The focus was on refining the identity, the colour palette and bringing it all together in a cohesive visual system. The wireframes were translated into User Interface elements for a unified experience of the product.
Refining the final symbol by trying out more variations for the chat symbol
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
THE SYMBOL The icon symbolises collaboration with the overlapping triangles. It is based on the counterform of the letter F and has a good connect with the name as well as the functionality of the app
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 137
hi
hi
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
FONTS AND TYPOGRAPHY The primary typeface of the branding is Quicksand, and the interface uses Roboto for its legibility.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 139
LOGO USAGE Once you have the perfect logo, it is important to maintain the integrity of it across platforms. This includes how the logo is to be used, from placement to acceptable alternatives. The logo is the simplest thing that people have to identify the brand. A consistent use of this image must be maintained. The exact usage of the logo must be defined including outlining placement, size and surrounding white space.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
COLORS #02D1BF
#38474F
A defined color palette is one of the most important aspects. The guidelines outline each color and how it should be used. The number of colors in a palette should be kept to a minimum and can include fuly staurated versions and tints. Color values for print (CMYK) and digital projects (RGB, HEX).
#F4D03F
#CED8DB
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 141
EXPRESSING BRAND IN MATERIAL
Material design offers a system for designing functional and elegant software. How does your brand fit into the framework? BRAND PERSONAS - MAKE YOUR MARK Logos should be established in high-level UI elements. Logos shouldn’t interfere with the user’s interaction patterns, e.g. a logo should never be on the FAB. Logos or graphics as extensions of the mark are great for brief elements in the UI. Logos can change states to be more adaptable to the experience, e.g. shrinking from the full logo mark to a bug. PLAY TO TYPE We believe that the best typeface is one that says something about your brand. Typography reinforces character. However, a great typeface applied carelessly across the UI will not be able to do its job well, which is why the material guidance around typography builds on the tradition of print design and focuses heavily on application — best practices for hierarchy, baseline grid, opacity, and scale.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
COLOR CORRECT Color is one of the most important elements of your brand identity. If you’ve developed a strong color story for your brand, stick with it. There is nothing more disorienting to a user then suddenly feeling like he or she has entered a different product space in the UI. The key is the way in which color is applied to the UI. The 500s are perfect for describing the dominant theme for your brand and are great for large areas of color, like backgrounds and status bars. From there, you can choose a supporting value, scaling up to a 700 for system bars, for example, or down to a 300 for secondary information. Accent colors are brighter and more saturated. They encourage user interaction by popping off the screen and contrasting with the rest of the palette. They are perfect for fabs, buttons, switches, and sliders. You can easily use this system with your own brand color, scaling different elements in the UI to be darker and lighter based on their importance and use. Choosing a nice contrasting accent color for primary call-to-action elements in the UI, like FABs.
PICTURE YOUR PAGES Whether it’s photography, illustration, or graphic treatments, how you apply (or don’t apply) imagery in your brand makes a difference. If you have the opportunity, create an identifiable language within your product. Imagery, graphic elements, and iconography should ideally family together — whether they’re stylistically similar, or intentionally diverse. When it comes to imagery the most important thing is to create a cohesive style and place it judiciously throughout your UI.
interaction patterns instead of too much written explanation. Remember that you are developing a persona with your brand. It should shine through in the language you use, but it shouldn’t get in the way of functionality. Applying your product’s individual brand identity to the guidelines — whether it be through color, iconography, imagery, typography, voice or motion — not only brings a uniqueness to your product but extends the overall language of material design.
RAISE YOUR VOICE Your brand voice should be carried throughout all elements of the product experience, from general copy, to notifications, error messages, and CTAs. If your product is all about personalization and caters to a young demographic, do not create notifications that sound like they’re coming from a robot. By the same token, you don’t want your product to be filled with jargon or slang that could get in the way of simple user interaction. Take advantage of opportunities to guide the user through a product with gesture and
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 145
Vibrant colors, a curvy sans-serif typeface, friendly icons, A bubbly, bright UI, delightful interactions come together to create a personality. It feels like a favorite co-worker, not a tool or utility. It’s playful, fun to use, and all that comes together to make it feel like a character in your life.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
The user can enter their work email on the Sign Up Screen which would be verified by entering a pin they receive on their email.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 147
Once their email is verified they will be prompted to setup their profile
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
The user can upload a profile image, contact details, their department and manager which makes it easier to find them.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 149
The DND feature allows them to turn off notifications for a period of time. This is useful if you are going into a meeting and don’t want your phone to keep beeping with notifications.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
They can update their status about their availability. This helps other colleagues know in case you are not in Office or are on Vacation and cannot be available to respoond to your messages.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 151
In case there are no contacts / chats / groups, the empty states prompt the user to either invite contacts or create groups.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Roster of chats, groups and contacts.. Quick actions on the Roster allow the user to create groups or invite contacts upfront. FAB lets the user start a new conversation with ease.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 153
Workflow for creating a group
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Group informstion not only tells you about the participants but also gives context on the purpose of the group.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 155
URL unfurling allows you to easily preview the content of a shraed url
View shared images inline and forward them instantly.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
@Mentions help you address the message directly to one or more contacts by highlighting their names in the message.
Messages tagged as high priority appear highighted which makes it easy to scan them
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 157
Workflow for one on one chat
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Use custom stickers to add more personality to your messages.
Unified Contact Information all in one place within the interface, making it easier to get in touch with them.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 159
Inviting contacts and vendors/clients from within the interface using their emails.
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
USING FLOCK INSTEAD OF EMAIL
Make your transition from Email to Flock smoother by using some of these features : CREATE GROUPS INSTEAD OF DISTRIBUTION LISTS You can create groups easily and leave the cumbersome Distribution Lists of Email behind. Adding or removing people is a mtter of seconds and requires no IT support. Create separate groups for different projects, notices, canteen etc. and keep your communication organised and noise-free. FIND COLLEAGUES EASILY WITH SEARCH Even if you don’t know who you are looking for specifically, find contacts easily from the company directory by seraching by Departemnt or Manager. Consolidated information about colleagues in one place makes contacting them more efficient.
TAG MESSAGES THAT ARE HIGH PRIORITY Reduce cahnces of missing important messages by tagging them as high priority so that they display more prominently and can be easily scanned quickly. USE @MENTIONS TO DIRECT MESSAGES @Mentions can help attract the attention of the right person in a group at teh right time by notifying them instantly even if they are on DND. INVITE CONTACTS Invite other colleagues or clients into your network easily by sending them invites on their mail from inside Flock. Communication is better and faster if everyone uses the same product.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 161
MISCELLANEOUS
As a side project I created a set of stickers with a female character who was a bit quirky and geeky. These could potentially be animated also.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 163
LEARNINGS
This project helped me learn many things about how design functions in a corporate setup. There are many considerations to the design solution. Often the best solution may not be the most functional or aesthetiaclly pleasing. In fact, the user is only one of the many stakeholders. The success of the product depends on balanving the needs, expectations of all the stakeholders. Not all problems can be solved by design, not all problems are worth solving through design. Designers can create much more impact by building business insight. At NID, we have always been encouraged, to consider the larger context of the problem we are trying to solve. This has slowly become my outlook towards everything that I encounter in my life. I am excited to take on a world of challenges that lie ahead, with the teachings and support of faculty who were like friemds and friends who were like teachers.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 165
REFERENCES Lausic , Domagoj, “Explicit and Implicit Types of Communication: A Conceptualization of Intra-Team Communication in the Sport of Tennis.” 2004. Electronic Theses Balvin, Nikola and Conley Tyler, Melissa, Emotions in Cyberspace: The Advantages and Disadvantages of Online Communication. Organisational Psychologist, pp. 5-8, September 2006; U of Melbourne Legal Studies Research Paper No. 277. Available at SSRN: <http://ssrn.com/ abstract=1027510 > John Suler. CyberPsychology & Behavior. July 2004, 7(3): 321-326 Winquist, Eric, How Companies Can Learn to Make Faster Decisions, Harvard Business Review, September 29, 2014, <https://hbr.org/2014/09/how-space-x-learned-to-make-fasterdecisions> Ashkenas, Ron, There’s a Difference Between Cooperation and Collaboration, Harvard Business Review, April 20, 2015, <https://hbr.org/2015/04/theres-a-difference-betweencooperation-and-collaboration> Tasler, Nick, How To Avoid Collaboration Fatigue, Harvard Business Review, July 10, 2014, <https://hbr.org/2014/07/ how-to-avoid-collaboration-fatigue>
Ferrazzi, Keith, Getting Virtual Teams Right, Harvard Business Review, December 2014, <https://hbr.org/2014/12/ getting-virtual-teams-right> Frohlich, David; Whittaker, Steve; Daly-Jones, Owen, Informal Workplace Communication: What Is It Like And How Might We Support It?, HP Labs Technical Reports, 1994 Arseny A. Sokolov, Samuel Krüger, Paul Enck, Ingeborg Krägeloh-Mann, and Marina A. Pavlova, Gender Affects Body Language Reading, Frontiers in Psychology, 2011
Ling, Rich and Baron, Naomi S., “Text Messaging and IM: Linguistic Comparison of American College Data.” Journal of Language and Social Psychology, September 2007, (vol. 26) Lee, Joonhwan; Jun, Soojin; Forlizzi, Jodi; Hudson, Scott E., Using Kinetic Typography to Convey Emotion in Text-Based Interpersonal Communication. Proceedings of tbe 6'” Conference on Designing Interactive Systems, 2006. Brown, Tim. Change By Design. New York: Harper Collins, 2009. Print.
Chapman, Alan, “how to read body language signs and gestures - non-verbal communications - male and female, for work, social, dating, and mating relationships.” Business Balls. http://www.businessballs.com/, n.d. Web. 23 May 2016
Navarro, Joe. Louder Than Words. New York: Harper Collins, 2011. Print.
Reynolds, Carson and W. Picard, Rosalind, “Designing for Affective Interactions.” mit.edu, 2001. PDF file.
Cooper, Alan; Reimann, Robert; Cronin David. The Essentials of Interaction Design. Indianapolis: Wiley Pubishing, Inc., 2014. Print.
Hancock, Jeffrey T; Landrigan, Christopher; Silver, Courtney, “Expressing Emotion In Text-Based Communication.” Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (ISBN: 978-1-59593-593-9) Klingensmtih, Ashton C., "The Capacity to Delineate and Interpret Emotion in Text Messages" (2012).Senior Honors Theses.. <http://digitalcommons.liberty.edu/honors/317>
NATIONAL INSTITUTE OF DESIGN / M.DES - GRAPHIC DESIGN / 2013 TO 2016
Kumar, Vijay. 101 Design Methods. New Jersey: John Wiley & Sons, Inc., 2013. Print.
Sample, Ian, “Brain scan sheds light on secrets of speech.” The Guardian. The Guardian, 3 February 2004. Web. 3 June 2016 Schools, Dave. “The 7 Step Paul Rand Logo Test.” Medium. Medium, 20 April, 2015. Web. 21 June 2016 Persson, Victor; Been, Rachel. Expressing Brand In Material. Google. Design, 18 May 2015. Web. 18 June 2016
Tan, Su-Lin. “Communication breakdown? Emails are the culprit.” The Sunday Morning Herald. The Sunday Morning Herald, 27 March 2015. Web. 15 May 2015. Crair, Ben. “The Period Is Pissed.” New Republic. New Republic, 25 November 2013. Web. 15 May 2016 Jaffe, Eric. “Why It’s So Hard To Detect Emotions in Emails and Texts.” Fast Company. Co.Design, 10 September 2014. Web. 15 May 2016 n.p. “Adapt & Build Better With Collaboration, Brought to you by Jama Software.” Harvard Business Review. Harvard University, n.d. Web. 18 May 2016 Suresh, Greeshma. “Enterprise Chat Vs Consumer Chat Apps – 8 Reasons Why They Are Different.” Mind Link. Mind Link, 28 August 2014. Web. 14 May 2016 McWhorter, John. “Internet-Speak is Improving English Because Empathy.” New Republic. New Republic, 10 January 2014. Web. 18 May 2016. Ha, Thu-Huong. “LOL is its own language: Q&A with John McWhorter.” TED Blog. TED, 11 July 2012. Web. 1 June 2016. Fried, Jason. “The Obvious, the Easy, and the Possible.” Signal v. Noise Signal v. Noise, 30 September 2015. Web. 1 June 2016.
Swami, Sachchidanand. “Reading Body Language Common Facial Expressions.” Nonverbal World. Nonverbal World, n.d. Web. 1 June 2016.
Turak, August. “The Business of Nonverbal Communication: How Signals Reflect Your Brand.” Forbes. Forbes, 17 December 2016. Web. 9 June 2016.
Navarro, Joe. “The Key To Understanding Body Language.” Psychology Today. Psychology Today, 28 October 2009. Web. 3 June 2016.
Kotler, Steven. “Corporate Communication: A Prominent Neuroscientist's Take On The Subtle Ninjitsu of Workplace Conversation.” Forbes. Forbes, 24 July 2012. Web. 19 June 2016.
Goman, Carol Kinsay. “This is Your Brain on Body Language.” Forbes. Forbes, 26 February 2013. Web. 3 June 2016. Navarro, Joe. “Body Language Basics.” Psychology Today. Psychology Today, 21 August 2011. Web. 3 June 2016. n.p. “iOS Human Interface Guidelines.” Apple. Developer, n.d. Web. 6 June 2016.
Stickdorn, Mark. This is Service Thinking Design. Amsterdam: BIS Publishers, 2011. Print. Norman, Donald A. The Design of Everyday Things. New York: Basic Books, 2002. Print. IDEO. Design Kit: The Field Guide to Human-Centered Design. 2015. PDF File.
Leblanc, Martin. “App Icon Design: six tips from Apple on how to create better icons.” The Next Web. The Next Web, n.d. Web. 6 June 2016. Haak, Tom. “12 emerging internal communications trends.” HR Trend Institute. Hr Trend Institute, 13 December 2014. Web. 7 June 2016. Burg, Natalie. “How Technology Has Changed Workplace Communication.” Forbes. Forbes, 10 December 2013. Web. 7 June 2016.
FLOCK 2.0 - REDESIGNING ENTERPRISE CHAT / ANANYA / 167
COLOPHON This document is set in Univers designed by Adrain Frutiger Image Credits - Directi Archive, IDEO Archive and self