Initial research and ideation, UX and UI design, visual deliverables



While working at Juphoon Systems Software company, the company has expanded to include four more locations across China besides its headquarter in Ningbo. Working effectively with different remote locations of the company is therefore becoming an important issue. The problem gets us thinking and therefore want to come up with a solution to promote better remote collaboration. The ultimate goal is to apply this solution to other businesses, provide a communication tool to help different teams to collaborate remotely.




The whole process of working on this project is as messy as any other design process. But the user-centered design process still serve as a really great guide for the process. As seen from below, we did a few rounds with prototyping and ideation. Later, as the process evolve, 2 rounds of user testing and iteration were carried out to verify existing design and also provide insights for future designs.



Since it is mainly for business purposes, we started with looking internally for inspiration. As Juphoon has 4 locations across China, keeping every team on the same page of the same project has become a constant goal and motivation for us to improve the remote collaboration experience. Ater examing the current tools we use (qq, slack) for communication and file transfer. And also video commmunication tools, we realize that it is much more that we need to consider for designing a communication program. So we started with brainstorming for ideas that would improve non face-to-face communications.


Since we are working with many stackholders such as company CEO, branch managers, project managers, programmers and marketing managers. It is important to bring everyone onboard and also involve them in the whole design process. We decided to create user flow diagram to convey the big picture as well as the logic for this meeting application. This also helped us to keep track of the progress later on.


When the overall flow has been settled, we started to work on wireframing and convert the wireframes to iteractive prototypes for user testing as well as demonstrating ideas to people. This is especially important for programmers as they need to understand the details of  to be able to execute the ideas.


With guerrilla user testings and scheduled user testing sessions, we were able to get mixed feedback and suggestions to improve on each version. During iteration 3, we expanded the ideas and thought out the functions or features that are useful to include whiteboard, screen sharing options. This also helped us to get more ideas on what prople are looking for when they are working collaboratively.


After the four iterations, we did a few modifications and improvement. The final UI that will be delivered to engineers for execution looks like below. Our main goal is to have a professional look so that it is moresuitable for business communications.