LIN Xiaoxiao - Colibee Connect project

Colibee Connect 2.0

Project

Design of

Colibee Connect 2.0

My role

UX design

Visual design

Interactive design

Year

2018-2020

Created in 2017, Colibee Connect is a digital responsive platform for the company's clients and consultants. But the version 1.0 had very limited features, its reliability and performance issues increased exponentially. Nowadays, it can’t fit users‘ needs anymore. To resolve this problem, An internal product team was created at Colibee. We wanted to bring new life to this outdated product. I was in charge of UX / UI design in this team.

Our goal : create an innovative DPA platform that connects all stakeholders

Process digitalisation has become an inevitable trend today, more and more execution processes need to be accomplished online to save time and human resources costs. Furthermore, users have more and more demands on building relationships with others on digital platforms. The old colibee connect platform couldn’t reflect these new needs of users.

That's why we need to create an innovative digital platform that connects all stakeholders of the company as a real hub. This platform will focus on automating HR and admin processes and optimizing workflows in HR, sales, marketing and administration. We want to make it as a social, interactive and automatic platform for clients, consultants and internal teams as well.

To accomplish our missions efficiently, we separated our goal to three components :

Firstly, ensure a smoother ,faster and better user experience;

Secondly, digitalize HR and administration processes ;

Thirdly, make it a social networking.

Challenge : a large-scale project for a small team

Colibee Connect is made up of three different sites : client interface, consultant interface and interface for internal team. The processes digitalization involve many interactions among different stakeholders : clients, consultants and internal teams, so it seemed difficult to create efficient and complete user flow systems and to make navigation on this platform smooth.

Colibee wanted to keep also a continuity of the original version on the visual design. The visual continuity didn't not leave me too much freedom in terms of visual design.

As UX designer, to manage the complexity, I needed to have the perspective view of the three different interfaces and to handle different interactions among them without forgetting any detail of each new feature. Instead of modifying much of visual design, I preferred to focus in users experience improvement.

Dashboard of Interface clients Colibee Connect

Dashboard of consultants Colibee Connect

Dashboard of internal team Colibee Connect

Agile approach : keep flexibility and continuous improvement of product

As UX/UI designer of this project, I was responsible for interactive and visual design. I collaborated with a product owner and 3 developers. We worked in an agile way.

Design research is a critical step in creating the optimal user experience. It allows us to understand complex human behavior and turn that into actionable insights to improve our design.

Users investigations allowed us to understand our client's vision, user needs, behaviours and pain-points.

The audit of the existing platform helped us to better define project milestones.

The old version wasn't user friendly : no customized design for loading and error page; no useful information for external users; too much unorganised information in database, it was confused for internal users. It wasn't functional at all. So there were many things to improve and to create.

When we knew clearly user's needs and actual state of platform, We kicked off a technical discovery phase to understand feasibility and constraints.

Then we listed all new features to develop and defined the roadmap of the project to achieve our goals by 3 steps: user experiences improvement, new features development and social networking exploration. We worked in the agile way. We started with the most essential features for users and which don’t need much development work as well. Once a new feature was fixed, a release of platform would be launched.

Roadmap of Colibee Connect 2.0

Design with iteration : improve user experience and optimize user flows for process digitalization

The research phase allowed us to clarify solutions to all questions and achieve our goals during design phase. Based on above design research results, we decided to make main improvements on user experience and process digitalization :

Improve user experience : small changes make big difference

1. Give feedback to users for site loading and empty states : when we did site audit, we found that the old Connect platform didn't give users any feedback, when the website was loading or when it's empty. So I created different templates to fix this problem. The efficient feedback is an important element of user experience.

2. Helpful wordings and bold visual design attract more attention of users : so we redesigned all transactional mails sets and sign up & login page.

3.Useful information is what users need : we created section of "services" for consultant interface. Consultants could find all services provided by Colibee on Connect.

4.Never forget internal users : a good organised interface is a powerful tool for internal teams. We created a customized menu for different department (HR, sales, administration & marketing) in order that everyone can't be suffocated by too much useless information,he can find quickly what he needs. I will give more details about this improvement later.

Ghost content for loading state

Ex of empty state page

Ex of Colibee service page

Ex of transactional mail

Customised dashboard for different services Colibee

Process digitalization : ensuring the effectiveness and efficiency of business processes & improve clients and other users 'experience

Process digitalization is a crucial evolution of the business process management. The need to rapidly automate processes as part of the digital transformation journey is the main reason behind this change. As a result, we focused on digitizing different operations in order to become more user-centric and responsive.

Reservation process digitalization : Consultants could browse and sign up all trainning programmes provided by Colibee on plateform. They can reserve co-working space on Colibee Connect.

Recruitment process digitalization : Clients could publish their HR needs on their account of Colibee Connect, at the same time consultants fill out their professional information online, create digital resume, then internal teams could recommend candidates directely online, and clients browse candidate's information and resume online, then give a feedback to HR team.

Administration process digitalization : Consultants could upload and send their invoice, timesheets and comfomity documents directly on their account of Colibee Connect

Co-working reservation

Space coworking is one of benefit to be consultants of Colibee. Colibee provided some offices as coworking spaces for free. But marketing team spent much time on the management of co-working reservation. That's why the company wanted to digitalize the reservation process.

Before starting the design, I did some research on main coworking reservation websites and knew how did these websites work in general. Then I passed to the part of user flows creation.

When the userflows were clearly defined, I worked on the detailed visual design for co-working space. After that, the project entered to development phase. Here are some examples of prototypes I designed.

Example.I.Interface of internal team : management of co-working reservation : dashboard, liste of reservation and reservation details

Example.II. Interface of consultants : co-working reservation and details

Recruitment process digitalization

We tried to make all RH process flow accomplished on line. This functionality is implicated to three different users : clients, consultants and rh team of Colibee, so the user flows are extremely complex. To make the job done, we have interviewed different types of users, and got the benchmark of differents RH process platform. After the research step, I tried to make the user flows clearly and design the prototypes for three different interfaces , then tested again and again before the final release.

Examples of prototypes mobile

Examples of prototypes : interface clients

Administration process digitalization

I. Validation of CRA & invoice online

The CRA and invoice validation process by mails and phone calls gave always headache to clients and internal admin team. Much time was wasted on completing those tasks. So users would like to accomplish these tasks on line. That's why we tried to automatize this administration process.

After we have known clearly the users' needs, we checked the whole process of cra and invoice validation with our administration team. Then my work focused on the complex userflow design. To make sure that our product can let consultants upload their monthly CRA and invoice correctly, I have treated diferent situations : Validation for first time, regular validation and validation bimonthly , CRA or invoice refused, etc

userflows & interaction of Administration process online

Examples of Hifiprototypes : interface consultants

To be continued !

Thanks for your attention ! As redesign of Colibee Connect is a complex project. Every feature I designed could be considered as a independant case study. I will try to complete the case studies of HR process digitalization and of the administration process digitalization as soon as possible.

Colibee Connect 2.0

Project

My role

Year

Our goal : create an innovative DPA platform that connects all stakeholders

Challenge : a large-scale project for a small team

Agile approach : keep flexibility and continuous improvement of product

Design with iteration : improve user experience and optimize user flows for process digitalization

Administration process digitalization

To be continued !

Other Projects

Minette et Matou

Bimpli

My logo