My role
I was the sole UX designer, user researcher, and product manager.
Project Goal
Redesign Sococo’s mobile application so that it better fulfills user needs and as a result increases conversation and retention.
The team
My team was completely distributed and was made up of me, two mobile engineers, one QA engineer, and one project manager.
Timeline
3 months
Background: Sococo
Sococo is virtual office software that connects distributed teams with a sense of physical presence.
Users log in to their workspace when they are ready to ‘go to work’ every day. They can see who is talking to whom, what meetings are happening, and who is available to have a quick side conversation.
the problem
The Sococo mobile application received poor reviews from customers and free trial users. The poor experience of the mobile application was causing some potential customers to move to competing products.
Understand
Interview stakeholders
Interview users
Card sorts
Survey users
Analyze data
Look at relevant customer support history
Look at records of customer feedback from sales channel
Read mobile app store reviews
2. synthesize
I analyzed the initial research and synthesized it to find major trends, pain points, and opportunities to improve the mobile application. Here are some of the highlights:
LOGIN IS A MAJOR PAIN POINT
Sococo did not distinguish between exiting the virtual office and logging out. This meant that every time a user wanted to leave their office, they needed to log out and log back in when relaunching the app.
The login process was very buggy and filled with friction.
The app frequently forgot login credentials.
There was an option to log in with Slack, but this sign-in flow contained many steps that typically involved staring at a lot of loading spinners.
The app would sometimes crash during login.
USERS HAVE TROUBLE ORIENTING THEMSELVES IN THE MOBILE APP
Users are used to the desktop experience, where they see their avatar in the physical layout of the map. In the mobile application, users land on a screen that shows who is in the room with them, but doesn’t orient them with the rest of the office.
Finding a particular meeting room is also difficult for the user without seeing the map layout. On the mobile app, the user would see a list of rooms ordered alphabetically by the room name, but this was not how users were used to navigating.
The desktop experience that users are used to
USERS EXPECT TO SEE CONSISTENT CHAT HISTORY BETWEEN DEVICES
Sococo was storing all chats locally, which meant none of the chat history was preserved when switching devices.
Additionally, the desktop application had a Slack integration for chat that was not implemented on the mobile application. This meant that all Slack conversations were missing on the mobile application.
Users were confused and frustrated that their chat history was inconsistent between devices.
USERS ARE NOT USING THE MOBILE APP FOR PRESENCE
A core piece of the value of Sococo is the idea of presence. Our users log in to Sococo when they are ready to ‘go to work’ every day, even if they aren’t starting their day with a meeting. This way, they can see what is going on in the office — who’s working, who’s talking with who, and what meetings are happening.
This behavior of being present in the office without being in a meeting was conspicuously missing from my conversations with users.
After digging into this, I found these to be the most common reasons users were not using the mobile app to be present without being in a meeting:
The mobile app drained the users’ phone battery too quickly so they wanted to kill it as soon as they finished their meeting.
Users had little trust in the mobile app to continue to run as they would want it to while it was in the background. They had so much trouble with the app while they were actively using it that they believed it wouldn’t do what they wanted it to do while it was in the background.
3. Define requirements
This is one section of the requirements document. It was much longer than this :)
I created a requirements document that encompassed the major problems I discovered during research.
I went through a review process with stakeholders throughout the company: engineering, QA, sales, marketing, customer support, customer success, and project management.
4. design Research
As I began the process of transforming the requirements into a design, I researched how other applications were solving similar problems.
“How might users be able to navigate their workspace’s map on a mobile device?”
“How might media controls work, especially when the user is using other parts of the application?”
“What standard chat patterns are our users used to in other applications? How do the patterns diverge and converge in other applications and what are the pros and cons of these options?”
5. ideate
Sketching
I ran a few cross-collaborative sketching sessions to gather ideas from across our organization. These sessions included participants from sales, customer support, customer success, engineering, marketing, program/project management, and QA. I was on a team of one, so this exercise was helpful for getting a wider range of ideas to flow.
Information architecture diagram
I iterated upon information architecture diagrams to find a way to organize information that was logical, consistent, and intuitive. This became the navigation of the app.
Presence diagram
This is an example of another diagram I created to facilitate a conversation with engineering about the states of presence a user could be in and how they would transition between these states.
In summary, we discussed that users should be able to be:
Logged out completely
Logged in but not present in their workspace
Present in their workspace with the app in the foreground
Present in their workspace with the app in the background
If the user is in an active meeting, audio should continue to flow
If the user is not in an active meeting, the user should be in a ‘background presence’ state
systematically design for all cases
I created many spreadsheets and lists to be as thorough as possible in addressing all cases.
This included spreadsheets to document how notifications should behave in a variety of conditions and lists that mapped out the entire application to make sure that I didn’t forget any details while designing.
6. refine
Higher fidelity mockups
I started increasing the fidelity of my sketches and working on the details for the layout of each screen.
Usability Testing
I tested many versions of prototypes with users to find the most intuitive interactions for common use cases.
In the example on the right, I was thinking about how users would start a conversation with someone when a meeting is not in progress in the current room. This is what I found:
Users were confused if there wasn’t a call to action to turn on a microphone available on the map screen
Users were distracted if the call to action was too prominent because the map screen is primarily used for viewing the map and finding rooms and people
The option on the right (putting a microphone toggle in a floating action button) was a good balance between being easy to find and being unobtrusive when viewing the map
Iteration
Below is one example of the many iterations I went through while refining the details. In this example, I was trying out different ways to incorporate 2 buttons on the map screen: “Go home” and search.
Users most easily found the “Go home” button when it was placed in the upper left. I think this is likely because this button is located in the upper left on the desktop application.
We ended up removing search from the MVP because most users find what they are looking for by looking around the map rather than by using search.
7. deliver
Below are a few of the highlights of the problems solved by the redesign:
Reduced friction when moving from desktop to mobile
The user can now tap “Exit workspace” to leave their workspace without completely logging out of the mobile application. This means that entering the workspace is only one tap.
intuitive Orientation and navigation
The solution introduces a map into the mobile application that is consistent with the desktop application. When users land in the mobile app, they understand where they are and where to go. The layout is consistent with the desktop application and the interactions are similar to other mobile map applications.
consistent chat history
By adding the Slack integration into the mobile application, users who are utilizing this integration will see consistent chat history across applications.
improved background behavior, battery performance, and reliability
As discussed earlier, many factors pushed users away from using the mobile application for being present in their workspace without being in a meeting.
The following components of the redesign addressed this:
A user who puts the mobile application in the background while they are not in a meeting will go into a background state:
If someone turns on their microphone in the room with this person, the mobile user will not hear the audio automatically, but will receive a notification to let them know someone has turned on their microphone.
Everyone who is looking at the map will see that the mobile user’s avatar has a mobile app icon and that the avatar’s headset is off. This indicates the user is on mobile and will not hear anyone who is speaking in the room with them.
Improved battery performance while the app is in the background
Improved behavior in the app overall increases the trust users will have that the app will behave in an expected manner while it is in the background
8. measure
While the implementation of this redesign is still in progress, its success will be measured in:
Conversion rates from free trials
Retention of current customers
Mobile application usage
Customer satisfaction
What I learned
Informed prioritization is crucial for success. Throughout this project, there were so many aspects of the redesign to focus on, but it became clear what would most positively improve the experience for our users after talking to them and seeing consistent trends come up again and again.
Your first sketches are never the best solution. I went through so many iterations and am amazed at how much better my final designs were from my initial mockups.
Users understand their own pain points when their expectations are clearly not being met, but when users are acclimated to the status quo they don’t typically recognize where there is room for improvement. There were clearly areas that were full of friction that needed improvement (such as login), and users clearly communicated this. However, I never had a user tell me that they wanted improved background behavior. What I did hear from users is that they only used the mobile app to join meetings. I also knew that the value users find in the desktop application comes from the idea of being present even there isn’t a meeting to go to. This disconnect highlighted a problem space that was in need of a solution. When I presented feature ideas for background presence to users later in the design process, they quickly would say that was exactly what they needed, even though it didn’t directly address their list of complaints.