Cisco Spark (Webex Teams) New App Architecture
App architecture, experience design, product design, product strategy
On Apr 18 2018, during Cisco Collaboration Summit 2018, Rowan Trollope, Sr. VP of Cisco Applications announced the new Cisco Spark Design, which has been rebranded to Cisco Webex Teams and showcase the demo at the event to the whole public. This marks the coming of new era for enterprise collaboration tools.
BACKGROUND
I joined Webex Team as a mobile UX designer back to 2015. Webex Teams is an app for continuous teamwork with video meetings, group messaging, file sharing, calling and whiteboarding.
Cisco Spark, is an app for continuous teamwork with messaging, video meetings, file sharing and whiteboarding. It was an outcome of transiting and migrating Webex meetings into a more collaborative tool to better serve practitioners in their work environment with simplicity reliability and security.
PROCESS
A complete design process including three phases in our team: 1. Discover understand users and needs to find opportunities. 2. Define Identify and prioritize the problems. 3. Explore Come up with a variety of potential solutions.
At the same time, we keep propose solutions (wireframes to prototype) to illustrate ideas and constantly give our real users real stuff to react and validate.
We start with a strong idea of “What’s Next” to a series of design trials, then we narrow down on specific directions and make decisions before implement and release to market.
OLD DESIGN & PROBLEMS
From the picture showing below, we can see the old app had a very message-centric structure. User starts with a chat conversation based on space creation and navigate between message/teams/call/meetings/settings through bottom tabs. The layout came out of our vision and mission to incorporate WebEx (Meeting) & Jabber (Call) into a new collaboration tool, merging everything into one platform. Not abandoning the advantages of the meeting & call, we optimize the experience in the new product. Simply making other apps as tabs into the new one doesn’t help attract users.
Why we want to make changes?
The reason of redesigning Cisco Spark is simple and direct. It has been 3 years since Cisco Spark first released. But the users has grown slow and most market portion was taken by other competitors, even comparing with our own product WebEx and Jabber. So here comes the questions we threw onto ourselves:
Who are our core users?
What are their primary needs?
Why users want to choose us instead of giving up what they already got used to?
We provide a solution for team collaboration, more than just messaging app
Problem in competitiveness and specialty: The old design we had leads to a gap of connecting space with space activity because what you got is not where you went and everything seems independent and separate which against the core idea of collaboration.
Unlike those message-centric apps, on space level, we are giving it a more equal prominent focus on all activities. We believe this will make the users a lot more easier to understand the model and quick access all the different activities all in one place.
Touch what is important to you in first time
Problem in space management: Make users to (1) keep updated with important space notifications and (2) access their meetings quick and easy, (3) be aware of connected device all the time to make virtual and physical collaboration seamlessly.
By allowing this, we avoid increasing the complexity of the space list. Instead, we let users focus on what they do care about by improving the usability, simplicity and readability of important info from both interaction and visual side.
Usability improvements for navigating to what in your mind
Problem in framework and navigation: We also involved a lot of usability study during the process of finding the best way to navigate between different spaces and also in-meeting/none in-meeting experience
RAW IDEAS OF REFRAMING
In order to get some initial and rough solutions of the changes we want to approach, we had several rounds of focused group to do ideation (3–5 key people who working on key features were involved in the discussion).
More collaborative centric
Kill bottom navigation to equalize each activity.
Simplify space list
Make spaces more manageable by marking or customize important spaces. Move filter inside search, and teams inside my avatar profile
Redesign the product identity, space activity
From interaction and visual side, how to reduce confusion between global/in-space activity (from research results) etc.
Improve in-meeting experience
Because the change of overall framework, the in-meeting experience needs to fit into the new framework.
VALIDATE USABILITY TESTING
Process
In order to verify our ideas and proposals, we conduct usability testing every other weeks after each iteration. So the process is: Design proposal->low-fidelity concept->discussion->prototyping->testing->design debriefing->solving problems->update prototypes->retesting.
Each time, we recruit 6 users and have a task script (focusing on different problems) to walk through a story with each user. Then for each task we have a evaluation of the achievement of each task.
Usability issues example we solved
- Ease of using activity navigation
- Discoverability of filter and search-fix by coachmark
- Understand of space management and notification logic
- Confusion between global activity and in-space activity
- Discoverability of teams under profile avatar
WIREFRAMING
COLLABORATION CENTRIC DESIGN
Navigation change
The old design’s home page is message list, and uses bottom tabs to navigate to Teams, Calls, Meetings and My Profile. This generates conflicts with the concept of accomplishing everything inside one space. Thus, we incorporate all the space activities into space artifacts and make other new creation into global “+”. Teams and Profile related stuff are all put into My avatar entry.
Space Management
In order to make the space list simplifier and easy to catch the most important info, we removed the second line preview and time (visually) and put space filter into search. Also, visually let users more convenient and fast access what they feel important-introducing pin (spaces) to top feature. If they feel one space is no longer important, users can swipe to quick access mute to make this space muted not to send push notifications any more.
Teams reposition
Because through our data and user research, we found out teams is used more by two purposes: one is to manage people/spaces so that people can easily access spaces under one team based on their needs. Secondly, it is used to identify different space. Thus, we don’t need to give a centralized location. The entry has been separated into two: one is from my profile, team moderator can add team members or create new team spaces while the other one is used more from a view purpose: users can use teams to filter spaces.
Paired device
Before, we used auto paired device, there is no manual entry on mobile device for user to select or confirm paired device, the new design offers a quick access to connected device options for users and the entry is always staying on the space list page bottom for users to access.
In space activity panel
In order to make the space feel not emphasize on messagingto, we changed the activity panel to make it equal and opening the space will land on the last interacted/updated activity. Also separating the activity balls from space attributes feature, roster list and space info. Drop down panel make the panel temporary feeling.
Unify global activity flow
Since we make all the separated tabs into global activities for users to easy manipulate and quick access, we also want to unify the flow, offering a familiar pattern to the users to interact with. Here I take Send Message and Call as examples: the base of each flow is adding people (Create a space is optional) with suggested people computed by most interacted, most active and most mutual spaces, then if adding multiple people, the system will have existing space suggestions for the users to choose from.
In meeting activity panel
The old design separate space activity with in meeting call controls, in the new design, because we consider space as the base of every activity including call/meeting, thus combine activity balls with call control since they are all manipulation of the space on meeting status.
LOGIC DESIGN
Landing activity logic
- If being added or invited to a new space, then by default open the activity panel.
- If last opening schedule, whiteboard, files or tasks activity, and there is no other updates (notifications in message or call/meeting), then will be landing in that activity page.
- If there is upcoming meeting (5min before) or ongoing meeting, then meeting button leads to interstitial page (call/meeting).
- If already joined the meeting, then button color will be changed to a darker color and if there is new updated from other activity like chats, then tapping on whole brick-let will go the chat while the button and PIP will be going back to in meeting.
- Whenever there is message updates (update whiteboard, share files, add tasks), the space will be opened with message activity but call/meeting has a higher priority.
App structure logic
The mission of changing the new structure is to make it simple and easy to manipulate. Thus, comparing with what we had before, we tried to simplify it into 3 major layers: Global functions (My Avatar Profile, Search, Global New Activities, Device Connection), Home page (main), Space.
From the home page, except space list items, we have entries of My Avatar Profile, Search, Global New Activities and Device Connection. Those are the first layers cover on the home page.
From the home page, opens any one of the spaces or meeting entry will go deeper into one layer under home page. When landing on each one of the activities, it opens the activity panel which is part of the space page.
All the switched activities are equal and share the same layer structure when in the non-meeting status. For message, and schedule, they are only one layer activities. For whiteboard and files, when opening an item from the list, it will become another layer cover on the space activity, only close it can go back to activity page. This structure keeps the same in in-meeting status.
If the users are starting a meeting in a space, then the users will be going into in-meeting status. At this moment, the ongoing meeting space (each time there will only be one meeting that users can be joined) will be “floating” in the app as a PIP (Shows on the right side). The other spaces will be running the same structure when there is no meeting until user ends the meeting (Red control button).
DEFINE ACCESSIBILITY
As a big company like Cisco, we make sure all the products passed accessibility, thus we have a very strict review process during and after finalized the design. Starting from Mac client & Win client to Web app on desktop side, also on mobile iOS & Android, phone & Tablet, we define and go through each single page to check accessibility.
FUTURE ITERATION PLAN
On Apr 18 2018, this new design has been demoed in Cisco Collaboration Summit 2018 in Phoenix, Arizona. From this accouncement, everything has been unified under one platform, Cisco Webex Teams and this, got a big reaction in the industry among the cloud collaboration service. For the next step, we will iterate in a more data driven way. We will be involved in a more quantitate research process to test and verify our design and iterate on this.
REFLECTION
Terminology
Space A space is a place to gather certain people and where all space activities happen.
Space Activity Activities that happened in each space, including send messages to the space, call people in the space, schedule meetings for people in the space, share whiteboard and files to the space.
Global Activity Activities like create a space, start a conversation, start a call, schedule a meeting with selected people or invite people to use the app. Global activities always happen with new space creation.
Paired/Connected device If connecting to a device (e.g. Spark Board, Cisco IP phone, DX80, Telepresence etc.), users can share screen, app or files on it and can utilize this device to make calls or have meetings.
Design negotiation
We had almost half a year negotiation and research on the initial design. First we use solid research result to confirm our design ideas, then based on the current limitation (time and cost) we separate the design into different iteration phases to lead to our final goal.
Design systematical alignment
I was leading the mobile design for this project, my responsibility is to design mobile overall structure and define the framework for each feature on different platforms (phone & tablet, iOS and Android). Since the project is very big, thus there are over 10 people working on it. The biggest challenge during the whole project is to keep everything aligned, including all the mobile patterns and the conversion to tablets and Android.
One thing I practiced and learnt during this is first as the architecture designer, you must be very familiar with each feature. Although you don’t need to touch the actual design details, but when defining the overall structure, e.g. the navigation, you should foresee the possible problems will be encountered in the future detailed design and readjust the framework if necessary.
