Rebuilt A Remote Collaboration Tool - UX Design Process for A Startup Project
Project Background
Nowadays, most business has been affected by the pandemic 🦠. On the bright side, for the ones that would heavily rely on collaborating in the digital world, they can embrace the opportunities of increasing the work efficiency and reducing cost by letting workers work remotely in the environment they feel comfortable with.
With this change and opportunities, A company in Japan has come up with an idea of building a remote virtual office environment tool which helps remote/hyper-remote companies to increase productivity.
The stakeholder initiated a question: “ How might we improve remote collaboration and let teams feel connected in a virtual environment while ensuring productivity? ”
As the main UX Designer for this project, I collaborate with another designer and a team of 5–6 developers, to bring this product from conceptual stage to realism.
1. Research & Empathy
Step 1: Narrow down the scope
Before defining the MVP requirements, we need to refine the goal from the original requirement in order to narrow down the scope. After clarifying with stakeholders, I found that there is one crucial point that we need to keep in mind before looking at relative competitors:
✅ It needs to be a SASS platform where companies can conduct crucial activities as they do in normal office setup. → It should include virtual workspace capabilities.
So we can therefore exclude the design direction of building
❌ A tool that assists remote working collaboration in a single dimension, like meetings or sending messages.
Based on the virtual workspace setup, what we need to explore next is :
What is the core value of office work (teamwork) in general?
It’s not hard to find that collaboration and communication contribute the most for a project that needs multiple parties’ involvement.
Step 2: Desktop Research
Next, I started to do some External secondary research to explore how other tools with similar goals work?
I analyzed both direct and indirect competitors and found those key findings :
For the direct competitors, such as Team Flow and Spatial Chat, the highlighted points are:
🤩 They focus on real-time interaction among team members
🤩 They tried to set a clear boundary between personal and public space
However, there are still some drawbacks where we can find the opportunities to improve:
🙁 Lack of transparency of what which members’ working status
🙁 Lack of management capabilities for workspace owner or manager to monitor team productivity.
By the way, Product hunt is a good resource to keep updates with some latest relevant products when doing market research.
Step 3: Internal Interview with teammates
After the desktop research, it’s also time to do some internal interviews with our own colleges, since our team also constitutes workers from across the world. It’s the best source to get some first-hand insights for the project without spending extra money.
Actually, after actively requesting team members for collaboration, it only took us 2 days to collect all the responses. We use Miro for collecting those responses instead of sending out questionnaires to individuals. In this way, it will provide us an overall picture of the team’s pain points, and it helps to do the data clustering and affinity mapping later.
Here are some key insights we got from the interview:
2. Divergent & Define
Based on the desktop research and online user interview findings, I found that those 3 directions are the major ones which we will need to focus on to define our first MVP.
Regardless of the narrowed insights we found for the product direction, we are NOT free to explore any design solutions. The new product we were working on should be an upgraded version from its previous version.
There are some major challenges we are facing:
- ⏳ Time limits— Ideally to release the product in 1 month.
- 🧩 Reused components of the previous App — Because of time limits (trying to release the product as soon as possible before potential competitors do), we cannot build certain functions that are beyond the current APP structure. So fewer changes are better.
3. Wireframe & Prototyping
We are going to build the workspace structure based on the previous APP structure. In addition, to stimulate the real-life working environment, we are going to develop the concept of virtual workspace with Floors and Meeting Rooms.
It occurs to me that the major difference between real and virtual world is that in virtual space, we can have unlimited rooms with extensive space to arrange collaboration activities.
The final goal is :
To maintain a sense of office feeling while exploiting the potential of unlimited workspace.
With this goal in mind, it’s time to start building the Information Architecture:
With 1. Previous App structure and 2. Information architect in mind, a clearer picture starts to appear regarding the basic features for this new remote workspace SASS platform:
For the first MVP, we have to always keep those points in mind when designing the UX :
1️⃣ Focus on the main function → in our case, it’s to let organization leverage the virtual space to organize teams in company structure (Floor + Meeting Room).
2️⃣ Add as less feature as possible → in order to transfer physical organization into virtual office space, we only need to have :
1, Managing teammates’ status and keep it transparent to each others (User status card, Time tracking tool)
2, Necessary virtual collaboration tools (Virtual office objects, Meeting rooms)
3, Quick Connection with workers (Connection Request, Chat)
Always keep the feature at minimal level, so that we can adapt and add on top with real customers’ feedback later. If at the beginning, we have spent too much time on creating the features that only come from our hypothesis (without too much marketing validation), it will need more efforts to reverse once the product comes to live.
4. Agile Development Process
After finishing the first version of the design with minimal features, it took the team around 4 weeks to fully make the first MVP release. 🎉
Finally, the product came to life thanks to developers’ hard work! However, even though we have minimal feature with only core functionalities, the real journey never ends, but starts with sprint over sprint debugging and feature enhancements based on customer’s feedback.
We always learn and evolve from the process. Here are some key takeaways for project management and the collaboration model:
1 - Structural Kanban based Developement Sprint
- Organize the development process into 6 Phases: Backup/On-hold → To-Do → In Progress → In Review → Quality Control → Done
- Inside each Phase, we have tickets for different issues. Each ticket must be constructed with 3 types of labels : Priority status + functional blocks + Categories (Bugs / Features_Modify / Features_New)
- Have assigned a designer’s name and a consistent referral figma link for each ticket so that we can trace back to the initial file if we found any discrepancies among requirements, design and implementation.
2 — Design System & Continuous Iteration
In order to ensure the product quality and keep consistency for user experience, we need to build a design system where designers can reference on when there will be any modification or new features. In addition, a comprehensive design system helps to improve design efficiency because we can reuse the existed components. When we make changes to one place, it will automatically apply to all relevant pages.
I will further introduce How I built the Design System and How to Collaborate Remotely with Agile UX Deliveries in separate articles
UX design is an ongoing process which needs iterations based on real-world data, we need to keep on introspecting and to seek for improvement in each stage. In this way, we can further polish our critical thinking and design skills. And also to better understand what’s gap between designer’s conceptual world and the real world. 🤔
Happy to share my experience with you and wish we all can always gain some insights from each project we did 😇.
Thank you for reading 🍻
