echo_echo_banner-01.png

Project Information:

What's This?: Springboard Case Study 

Role: Designer

Initial Release Date: Jun 2018

Project Timeline: 10 weeks

Tools Used: Adobe XD, Adobe Illustrator, Adobe Photoshop, InVision

Designing the next work teams communication app.

Designing the next work teams communication app.

Designing the next work teams communication app.

Combining messaging, calendar events, project management boards, and coworker skill databases into a mobile app.
Combining messaging, calendar events, project management boards, and coworker skill databases into a mobile app.

The Problem Space

Workplace communications is a broad subject. The possible solutions are many, and there is rarely a single solution that can work for all teams. 

One problem with internal workplace communications is that it's often spread out across multiple sources. It can be disorganized, or ends up unnecessarily cluttering inboxes.

An initial research plan was conducted to identify the workflow and behaviour typical to a professional working in a team/group, and gauge the strengths and weaknesses in their current internal communication environment.

Key results

The majority of respondents were within the 25-34 age bracket (80%) and 18-24 age bracket (20%), and roughly two-thirds male, and one-thirds female. Primary roles at their job varied from designers, engineers, student interns, developers, supervisors, administrators, etc. It can be assumed that the vast majority of respondents were currently working in a professional environment of some sorts.

Close to three quarters of the survey participants work directly with between 0 to 10 people on average, and over 90% of of the survey participants use email and telephone as some sort of communication tool with coworkers. The remaining popular options participants have cited include tools such as Skype, Facebook Messenger, WhatsApp (⅓ of participants), and GoToMeeting (⅕ of participants). The remaining choices such as Microsoft Teams, Google Hangouts, Trello, and Slack all received less than 10% usage.

In terms of hours spent interacting with these communication tools, two thirds spend between 1-2 hours a day using these tools. The remaining one thirds was split between slightly higher usage at 3 hours a day, and the upper end of the surveyed results at 6+ hours a day. In terms of coworker emails/messages received per day, 0-25 was the majority with three quarters of the responses, and the remaining one quarter split between the next two survey brackets of 26-50 messages, and 51-100 messages per day.

Uses for the participant’s communication tools were almost all used for work-related questions and workplace events. Three quarters of the respondents responded that the tools were used for Project Management, and half responded that they were used for external social events and off-topic banter.

In terms of the positive and favourite aspects of using these tools, the majority of respondents cited ease of use, availability, reliability and convenience as the deciding factors. In terms of negative frustrations with current tools, some common pain points include the slow speed of communicating, people ignoring emails or calls, important messages getting lost in the shuffle, and being reached outside of work.

When asked what ideas would make a workplace communication app awesome, a couple of topics arose from the various answers respondents wrote down, in order:

Organized structure & having various information in one place

Visually being able to see important information at a glance, color coding

Group by project, strengths & weaknesses

Finally, other features people find most beneficial include almost complete support for group-based chat interface and seeing coworker availability. Other topics like app integration, message history, and seeing co-worker strengths/preferences all received support from half of the respondents.

Interview Follow-up & Feedback

Three interviews were conducted in person, most often in a conversational setting at a coffee shop. A quick briefing was given related to what the information was for, followed by a case by case discussion of communication apps, and then a quick debriefing explaining what the gathered data is used for. The interview script was roughly laid out very similar to the survey questions, with more in-depth analysis of the pro’s and con’s of all relevant chat apps, and ways to improve usability.

One preface to such a new tool is its scope and usage alongside other softwares, rather than replacing them. In the interests of email and telephone calling, such a software would better serve as a plug-in, or experience to be used alongside existing software solutions, rather than explicitly seeking to replace them.

To add to this conversation, one interview participant expressed his desire for a tool to help him reach “inbox 0”, after his experience of being constantly inundated with emails and conversations at work. In these cases, separating out the messaging and conversations between coworkers could help in assisting his goal by leaving email to handle the majority of external communication outside of the possible app platform, and having the proposed app “plug-in” and integrate itself alongside the email program.

Another participant had some interesting topics regarding the style of messaging that she wanted to see being used. Having a platform that can serve as an informal way to talk about something without the stress of being overly formal allows topics between coworkers to be more enjoyable to use as a whole. Having this ability to type responses in an app without it being considered “in-writing” or official, yet still trackable and recalled for later can be seen as a very adaptable solution that has a lot of potential.

In terms of graphics and visibility, all participants expressed the desire to have a program that has a very well designed user interface with prominent graphics. In addition to whatever information is presented, having an aesthetically pleasing app would help in the continued usage of the app and its associated functions.

Competitive Analysis

Three other prevalent softwares in the workplace communication app space were picked for in-depth analysis: Trello, Skype for Business, and Slack.
Competing softwares were subjectively evaluated using SWOT (Strengths, Weaknesses, Opportunities, Threats) analysis, and Jakob Nielson's 10 Usability Heuristics for User Interface Design.

1. Trello

Competitive-Analysis1
Competitive-Analysis2
Competitive-Analysis3

2. Skype for Business

Competitive-Analysis4
Competitive-Analysis5
Competitive-Analysis6

3. Slack

Competitive-Analysis7
Competitive-Analysis8
Competitive-Analysis9

Key results

One preface to such a new tool is its scope and usage alongside other softwares, rather than replacing them. In the interests of email and telephone calling, such a software would better serve as a plug-in, or experience to be used alongside existing software solutions, rather than explicitly seeking to replace them.

To add to this conversation, one interview participant expressed his desire for a tool to help him reach “inbox 0”, after his experience of being constantly inundated with emails and conversations at work. In these cases, separating out the messaging and conversations between coworkers could help in assisting his goal by leaving email to handle the majority of external communication outside of the possible app platform, and having the proposed app “plug-in” and integrate itself alongside the email program.

Another participant had some interesting topics regarding the style of messaging that she wanted to see being used. Having a platform that can serve as an informal way to talk about something without the stress of being overly formal allows topics between coworkers to be more enjoyable to use as a whole. Having this ability to type responses in an app without it being considered “in-writing” or official, yet still trackable and recalled for later can be seen as a very adaptable solution that has a lot of potential.

In terms of graphics and visibility, all participants expressed the desire to have a program that has a very well designed user interface with prominent graphics. In addition to whatever information is presented, having an aesthetically pleasing app would help in the continued usage of the app and its associated functions.

Personas & Empathy Maps

To better understand the users that might use this app, three different personas were developed based on findings from the surveys and interviews. The persona and empathy maps were developed as tools to better understand the mindset of someone that would use this app.

Empathy-Maps_Empathy-Map-1
Empathy-Maps_Empathy-Map-2
Empathy-Maps_Empathy-Map-3

User Stories

The user stories are created with the following 4 Minimum Viable Product ideas in place.
Using the “As a user….I want to….”. template, the following user stories were created to document the essential features needed on the app.

MVP-User-Stories

Content Strategy

Card sorting was the preferred content strategy used to determine the effectiveness of the user stories established. The topics provided were sorted through 30 cards presented online through Optimal Workshop's Optimal Sort program for card sorting. Participants were allowed to sort topics and label their usage.

Overall, participants were familiar with the topics presented, and certain themes started presenting themselves. Below are two card sorting examples that are clear in how the participant chose to arrange the cards. Trends such as Project Management & Organizational Board emerged separate from a Chat/Messaging page, which strongly influenced the development of the app.

Card Sort Samples 2

User Flows

User flows were created for all of the personas to showcase the various ways that they would interact with the site. The personalities of Michel, Zoe, and Charlie were given tasks to do within the site, and the resulting maps showcase the steps they would navigate around the site to complete their actions. Also documented are initial sketches of user flows that have went extensive redesigning as the project developed.

User-Flows_User-Flow-1
User-Flows_User-Flow-2
User-Flows_User-Flow-3
User-Flows_User-Flow-1-Scan
User-Flows_User-Flow-2-Scan
User-Flows_User-Flow-3-Scan
User-Flows_User-Flow-1-Scan
User-Flows_User-Flow-2-Scan
User-Flows_User-Flow-3-Scan

Sitemap & Style Guide

Sitemaps were first drawn out by hand, then iterated in Draw.io, and finally drawn in Adobe Illustrator alongside the User Flows. The style guide was put together and in Adobe XD.

Site-Map-02
Style-Guide-01

Wireframing

Login-Screen
Home-Front-Cover
Messaging-Overview
Messaging-Pop-up
Messaging-Send-Calendar-Filled
Messaging-Interface
Messaging-Send-Boards-Filled
Messaging-Send-Confirm
Calendar-Agenda
Calendar-Overview
Calendar-Topic
Boards-Overview
Profile-Overview
Boards-Topic
Profile-My-Profile
Search-Overview
Search-Filled
Profile-Skills
Wireframe-Scans-01
Wireframe-Scans-02
Wireframe-Scans-03
Wireframe-Scans-04
Wireframe-Scans-05
Wireframe-Scans-06
Wireframe-Scans-07
Wireframe-Scans-08

The initial wireframe hand sketches were done on pen and paper, then later scanned and brought into the Adobe XD platform as reference images to assist in layout and production of the digital wireframe & prototype. The rest of the prototype was built with the built-in tools within the project. Various android development & material icon kits were referenced and utilized for button designs, and external image assets were pulled from various Creative Commons Zero (CC0) licenced resources, like Flickr and Pexels.

Iterations and revisions were done and published with the built-in Adobe XD prototype publishing tool, and was a valuable resource in getting out the model to various people quickly. One such revision came after consulting with my mentor, Andre, that the initial project board layout was not very clear, and needed to be revised to have a more consistent design language and style.

Page transitions and animations were done with Adobe XD’s built in page linking feature, which is very intuitive to use and I appreciated the ability for the software to map out all interactions at once among the pages. Certain negatives from using the software came from its current status as being in development, and certain interactions feel not as resolved as features on Sketch or Invision. One such major software oversight was the inability for Adobe XD to set certain elements as “pinned” while scrolling, and this missing feature drove the design direction from having large scrollable pages with multiple cards to individual screens with one or two cards displayed at once, symbolically overflowing to indicate the presence of content outside of the app window.

Usability Testing

Three tasks were developed in the working prototype  to test usability of echo echo:

  1. Turn a message into a calendar event & board post
  2. Check calendar to find your newest meeting
  3. Check your profile & search for users by skill


Turn a message into a calendar event and board post

The process checking messages and then going through the actions of selecting a message/note to send to the calendar and board is done by visiting the messages, selecting the associated message, and going through the pop-up prompts to allow the app to note the message as an event and board post in subsequent tasks. The flow was fairly straightforward and linear,, but did prove a little confusing explaining to some users initially because the idea was seen as fairly novel to some. One point of confusion was the nav bar disappeared during the “Add to calendar/board” pop-up portion of the prototype, and certain users felt a bit lost due to the different layout. Otherwise, the process was fairly straightforward, and didn’t pose any additional difficulties.

Check the calendar to find out about your newest meeting

The process to check the calendar for the newest meeting involves visiting the calendar tab and tapping on the name of the new event that has popped up. This task is very simple and fairly straightforward, and proved very easy to navigate. Initially, this task was named something else more vague, and wrongfully implied the user should visit the boards first to obtain info about a new event. 

Check your profile & search for users by skills

This task proved to be the more difficult one to explain and execute in the prototype, and sets the stage for further revisions and improvements. One user commented that searching for skills should be a feature in itself, less hidden away in the app, and developed in a way that features a search bar saying “what skills are you looking for?” or something similar. Taking this advice, a revised prototype was made with the Skills under the Profiles portion of the website having its own section and developed database. Future reiterations could feature a more developed search bar with clear indicators for filters and scope of the search, coupled with a more prominently displayed skill database portion of the site. Following advice from my mentor, Andre, it would not be advisable to have two separate search fields on the page. Instead, the presence of the global search and its interaction with the contents it pulls should be prioritized, further explored and refined.

Research Summary:

Overall, the testing went really well and users were able to accomplish given tasks in a timely manner without issues. All prototypes were sent out digitally through the prototype link provided by Adobe XD, and provided with a short description of the app, and the three tasks listed above.

The brief script is as follows:

  • Provide users with link to prototype, short app description and task list.
  • Explain that the provided link is just a prototype, and is not reflective of a completed app
  • Ask users to send a message when they start & stop using the app for timekeeping, or if they have questions or comments at all.
  • After the tasks are complete, follow up and ask questions regarding how they found the flow & usage of the app, what areas worked well, what areas needed improvement, and other additional comments they had regarding the prototype.

In summary, the research evaluation aspect of prototyping was very important and overall went very well. I was able to glean a lot of information about both features/interactions that I both I knew needed revising, as well as new issues with interaction, layout, or user flows that I did not anticipate, either through unclear explanation on my part, unclear prototype layout, or user error or misunderstanding. One consistent feedback comment involved developing the skills database and integrating into more of the app if possible. Another feedback comment that occurred a few times involved explaining that page did not scroll on the prototype. In order to do so, I would like to invest in learning additional programs in addition to Adobe XD to circumvent any software limitations. While the majority of the prototype testing worked very well, I am excited to conduct further research evaluation and feedback for how to improve the project even further. Following the information from testing so far, a list of changes for future iterations will focus on:

  • Develop global search bar function and filtering across all subpages
  • Develop skills database and its integration into search results
  • Add a navigation bar  the “add-to calendar/boards” interactions for continuity
  • Provide more examples of how cards would look on a scrolling interface

Conclusions & Lessons Learned

My time spent researching workplace communication apps has been an interesting journey through many existing softwares, learning the various ways people interact with others in a business setting, and observing which topics and subject matters receive priorities according to the users. 

A few takeaway insights I've learned throughout the research and developing this application: 

There are many workplace communication apps solutions that can work for you.

A singular workplace communication app is kind of a "MacGuffin" of the app world today. There are many apps that work very well, many that don't, but the choice of which app is often not left up to the individual, but some business structure that usually proceeds such a decision to invest in productivity and communication software. As such, the softwares have many stakeholders across multiple businesses. What works for one might not work for another, and that's okay.

Email (whether corporate or personal), and telephony are the undisputed kings of communication.

Whether it is because of familiarity or ease of use, these two services are near universal. Any new communications app has to work alongside existing services, rather than outright replace them as a platform for workplace standards.

There is always room for improvement!

No matter what app is on the market or being developed for workplace communications, there will be features and user flows that are optimized for a certain scenarios or needs. A well designed app would need a sincere approach in understanding the different approaches to how data and information is transferred within businesses to craft a better way to do things.

Finally, I would first like to thank all the many participants of the research questionnaires, prototype testing, Springboard UX mentor Andre Martins, and the numerous other people that provided feedback regarding workplace communications, the mobile app development process, and the user experience design process. Your feedback is invaluable!

Back to top Arrow