DesignLab
Online collaboration platform that will help people from different locations to work together on the same project in real-time.
Overview
MY ROLES AND RESPONSIBILTIES
-
Conducting UX Research
-
Wireframing and Protoyping
-
UX Design
PROJECT
Timeline : August 20 - September 20
Team : 2 members
BACKGROUND
Working together from different locations has become very vital these days. We have realised this more due the COVID-19 situation which has lead to teams work remotely. We faced the problem of collaborating with the team in real-time while working on a project during this situation. In today’s world of internet and technologies online collaboration tools can be used as one of the modern means of communication. We then decided to try and solve this problem by designing a online collaboration platform that will help people from different locations like us, work together on the same project in real-time.
Design Process
01. Goal
The aim of our project was to help people from different locations collaborate and work as a team in real time remotely. Once our goal was clear we started with the design process and first asked ourselves a few sprint question and then mapped the whole process of people working on a project as a team be it professionals or students.
SPRINT QUESTIONS
-
Can we make the collaboration experience better for UX designers?
-
Will it be more convenient than physical collaboration?
-
Will it facilitate easy communication with the members?
-
Will it help to reduce the time it usually takes to reach the goal?
-
Will it help teams to build a product quickly?
-
Will it help to allocate tasks and track them?
-
Will people make the projects just to use our product?
-
Will it help throughout the project or just in some stages?
-
Will it be like as other platforms, or is it going to be different?
-
Will it involve third-party integrations?
-
Will it be a social platform to share your work?
MAP
02. Brainstorming
In the brainstorming session, How Might We questions helped us to look for opportunities and challenges rather than jumping to solutions directly. It helped us to discover the problems more deepely and categorise them into the their specific nature. The stand-out questions helped us to make a decision about which part has to be targeted on the map. It also came handy in the ideation phase.
HMW QUESTIONS
MAPPING HMW QUESTIONS
03. Ideation
After knowing the questions from brainstorming, we sat for ideation session and sketched plenty different solutions for the problems discovered.
While doing that we got many options studying which helped us decide the right solution.
04. Decision Making
After the ideation phase, it was time to choose the solutions from all the ideas we sketched in the ideation phase. Thought behind choosing the best ideas as a solution was to consider their feasibility and viability.
The final sketch of the solution was the composition of 3 best ideas from all the solutions and the sketches from the ideation phase. It was also explained in the three steps so that it would be easy to understand.
05. Brainstorming
Storyboarding helped us to imagine how your finished prototype would look like. It also helped to spot the problems and points of confusion before prototype was built.
Information architecture of the product was created after the storyboarding to understand the detailed view of the user flow of the product.
INFORMATION ARCHITECTURE
06. Style Guide
Next, to ensure that the designs remain consistent and for branding purpose, we decided the which colors and fonts were we going to use. When choosing colors to create a color palette, we selected the primary and secondary colors in respect to our brand’s attributes.
COLOR PALETTE
FONTS
07. Wireframing
After preparing the style guide we worked on the wireframes of our application. Wireframing provided us a clear overview of the page structure, layout, information architecture, user flow, and functionality.
08. Final Design
Finally, we converted the wireframes to high fidelity designs. We designed screens for all the features we decided to include in our application.
Home screen comes with the customisation feature which puts the customer’s desires at the forefront and delivers a personalized interface. User can pin the widgets on this screen as per his/her convenience.
Users can connect with their teammates from this screen. Sorting of personal chat and teams conversation makes it easy for user to chat.
Uniqueness about this meetings feature is that even if the team member misses the meeting due to some reason he/she can still get access to useful information from that meeting by using record and MOM feature.
Tasks screen allows users to view all the tasks allocated to them. These tasks are divided into three categories viz. To Do, In progress and Done. Users can simply drag the task from one category to another according to its status.
Canvas is the feature where teams can collaborate for design process in a real time. Teams can use templates to make the process even smoother.
Easy to access project screen which displays all the primary information of the project so that user can access any project they have been working on quickly.
Calendar screen gives user a daily, weekly or monthly view of their schedule. The users can also create new event or reminders from here.
Meeting screen provides users with multiple functionalities like chatting, presenting screen and recording the meeting. It also shows the details of the meeting and list of people attending it.
Users can store all their data files belonging to different projects into folders which can be accessed quickly from here.
Also the details regarding the owner, creation date and last opening time can be accessed from here. Team requiring advanced features and more storage can upgrade their account accordingly.
Real-time chat and different colours cursors can help the team to communicate and collaborate more effectively.
Learnings