Envisioning messaging & storage solution for Evolve X

UX Designer

Product Designer

UI Designer

Figma

Miro

Slack

Summary Overview

Evolve X connects interns with small businesses and philanthropic causes. As a UX/UI designer from January to June 2020, I collaborated with the team to create a mobile app for Evolve X members, focusing on the main user flow including Signup/Login, Channels, and Direct & Group Messages. We faced challenges like slow onboarding, scattered files, and users needing to switch between multiple apps. Our goal was to unify these features in a way tailored to Evolve X’s workflow. We addressed the issues by integrating team chat with calendar functions, enabling voice and video calls for up to 100 participants, centralizing file storage, and simplifying navigation. The resulting app was well-received, though further improvements, such as adding chatbots and refining navigation, are proposed for the future.

Problem

People used multiple apps that overlapped in functionalities. Since Evolve X Org did not have its own platform on which clients and volunteers could interact, Evolve X volunteers were often confused as they couldn't get an overview of what projects were available and how they could find a team. When Evolve X volunteers finally got together to work on projects, they used a range of different tools and kept files in many places. To summarize, there were 3 major areas that were problematic.

The onboarding was slow and unclear.

Users had to switch between applications back and forth.

Files were found in different places.

Who our users are

Our primary users were the interns at Evolve X as they were the ones that directly interacted with the system and explored all of its functionalities. Evolve X interns communicated with each other and sent files back and forth on a regular basis. Our secondary users were the clients because they communicated with the interns through the project leads and administrators.

Objective

Our goal for the project was to create a mobile platform for Evolve X where designers, developers, and clients can connect and chat with each other. The premise we had for the core functionality was simple: Put the features that Evolve X members use in one app. However, what worked for apps such as Slack may not work for Evolve X, and we also didn't want to bloat our app with features. And so, our greater design vision was to come up with a unifying solution that not only addressed user needs but was also tailored to the workflow unique to Evolve X.

The kickoff

At the start of the project, my team and I decided to gather user insights by looking at the applications that our users were using. We wanted to understand the interns' existing behaviour: Why they were using these apps, what they were using the apps for, and how they were getting things done using those tools.

Although we were not surprised by what we learned, some things did stand out to us.

We knew that most interns used Slack to chat, Zoom for making calls, and shared files using a combination of Slack, Google Drive, and emails. But we did not expect people to compliment Slack with WhatsApp. We also learned that most files were sent over Slack because users felt that was the most convenient option. By comparison, emails, Dropbox, and Google Drive were not used nearly as much for sharing files.

We sent out surveys and conducted interviews with our users to learn more about them

Before jumping into designing, we wanted to talk to our interns to get a better understanding of who they were and what they thought. Although we now had an idea what apps they were using and how the apps were being used, we still didn't know much about the needs and goals of these individuals. The surveys gave us quantitative data that we could measure and prioritize, while the interviews gave us a qualitative insight into their experiences. The first thing we did with this data was to create several personas so that we could consolidate on a specific, consistent understanding of our audience group. The personas also served as our guideline because we could look back and see how well our solutions met their needs.

Synthesizing our research

We discovered that Evolve X interns had multiple issues with the apps they were using. Most of these issues revolved around Slack as that was the application that the interns primarily used.

Issue 1

Navigating in Slack was difficult because of the sidebar.

Issue 2

Navigating in Slack was difficult because of the sidebar.

Issue 3

Lack of scheduling and calendar functionality within the app. Relies on 3rd party.

3rd-party integration in Slack

On mobile, navigation is a little clumsy. To change workspaces I need to go three levels left. I would like a quicker way to navigate workspaces. On desktop, it’s pretty easy.

Were we solving the right problem all along?

Based on our research, it looks like we only identified half the problem. While users had to constantly switch between different apps, they also had usability concerns with the individual apps they used, e.g. Slack. The issues around navigation and finding things presented a pain point for the users. In other words, no. It is clear that we wouldn’t solve the problem by just combining different apps into one super app. We also needed to change the way the features worked to make them better for our users.

So how might we incorporate the features that our interns need in one app, while making it better?

We modified our project goals and prioritized them as follows:

Give users the tools they need to get their work done in one app.

Improve the features that the interns use for the Evolve X workflow.

Create a platform where people can get together and find real projects to work on.

The Solution

1. Add events to your calendar in app

Evolve X App combines team chat with a simple calendar, allowing you to schedule and keep track of meetings from within the app. This feature makes it easier for you to send out invites and reminders to the rest of your team. Having an overview of upcoming events also makes it more scannable and informative to the user.

Calendar

2. Make voice and video calls with more participants

Evolve X App allows you to make calls with a maximum of 100 participants, eliminating the need to switch to another application like Zoom. When there are many participants in a call, you can change the layout to make better use of screen space. Drag the carousel of profile pictures to see the list of participants.

Video/voice chat

3. A single place of storage for files

No longer do you have to switch to Dropbox or Google Drive to share files. File manager in Evolve X App keeps all the files that you send over chat in one place, allowing for quick access and making the files easy to search. By default, the files that you send over DM are private, but you have the option to share them. You can use the file manager to stop, change, or limit sharing at any time.

File manager

4. Find links and files in chat with ease

When you're in a conversation, tap the kebab menu or swipe right from the edge of the screen to see detailed information of the chat. You can find all the links, images, and files that you sent or received in this conversation. You can also find your files using Search or File Manager!

Searching for files in chat

5. Manage projects under a single workplace

Unlike Slack, Evolve X App does not have separate workspaces as projects are assigned to teams under one organization. By getting rid of workspaces, it simplifies the system that you work with and cut down on the number of things you need to sign up for. You have access to all the common channels as you would before, and to join a new project you only need to get an invite for that private channel.

Unified workplace

6. Bottom navigation as the way of getting around

Evolve X App uses bottom navigation instead of a sidebar menu like Slack. By making the destinations visible to you, you have quicker access to them. Because the bottom navbar is closer to your thumb, it also makes navigation effortless. Gone are the days when you have to swipe left to bring up the sidebar and then tap to go somewhere.

Bottom navigation

How we got here...

We laid out the information architecture so that we could get a clear view of the screens

We understood what functionalities our users were looking for and what improvements needed to be made. Using this information, my team and I mapped out the architecture of our app by grouping related features and sub-features into common screens, out of which we came to a total of 13 screens. This number was then narrowed down to 10 when we realized some of these screens were either superfluous or better off combined with the others. An example was the Settings and User Profile screens, which were originally separate areas. In the end, we decided to collapse User Profile as a sub-screen under Settings.

Site map

As we worked on the user flow, it became clear to Lien and I that the equivalent to Slack workspaces would be unnecessary.

The separation between organizations that was the intent of the workspaces became less, well, meaningful when the projects all operated under the same organization. I realized it was only the separation between projects that was necessary and relevant to our users.

While working on the file manager, I also came to the understanding that there were two different flows: one for the admin, and another for your regular user. This was necessary as there were many scenarios where the admin would have to remove, rename, or restore certain files.

User flow

Visual design

App icon (Jazking)Typography (me)Colour scheme 1 (Lien)Colour scheme 2 (Lien & me)

Outcome

Through a series of iterations, we came up with a design that was purpose-made for the needs of Evolve X interns, who not only needed to chat and collaborate with their team but also attend live workshops and share files multiple people. By following our users each step along the way and watching how they worked, we introduced changes that improved their way of doing things. We solved the critical issues that our users faced, made navigation easy by opting for bottom navigation instead of a sidebar menu, and reimagined Workspaces as Projects.

Retrospective

While bottom navigation made it easier to find your way around the app, switching between conversations now takes more effort. Users have to swipe left to get out of one conversation to get to another destination on the tab bar. This can be improved by keeping the tab bar in conversation, which takes away the screen's modality and allows you to switch between tabs without closing a conversation each time.

New design proposed

Calendar should be one of the main destinations on the tab bar. There’s also a need for some sort of activity centre where new messages can be read in one place. To make space for the 2 new destinations on the tab bar, I would actually bring back the sidebar but repurpose it for User Profile. Certainly there are many ways to make this happen, but more testing is needed to find out what works best.Last and not least, we need to talk about chatbots. The lack of these bots makes the user's interaction with the system bland and not engaging. As a start, this can be improved by making the general assistant bot more helpful with the onboarding, reminders, and special announcements.