UX design during the SharePoint Online Connector development

Using the SharePoint Online Connector development as a handy example we want to demonstrate the importance of the UX designer during the software development process.

In the beginning of last year, we started developing the “SharePoint Connector for Confluence” remake and made sure to integrate the UX designer right from the start.

But which role plays the UX designer? He accompanies the emergence process of a digital tool in place of the customer – starting with the analysis continuing with the development and ending with the test phase, always focussing on a positive user experience.

The gist of the matter

Beginning with an analysis, we took a closer look at the existing product. Thereby a collection of the existing features and the rating of their usability together with an overview of customer suggestions and problems evolved. Thus we had a clear picture, which problems had to be solved with the new version at the end of this analysis phase.

Not every desired feature made it to the first version, but with the help of the overview, we could design a roadmap including the most important features. The knowledge of the overall image also gave us a well and broad foundation for the conception.

Evolution in microcosm

Using the analysis as a base use cases and requirements were created and consciously kept simple so that the team won´t get lost in the details. For that reason, discussions were managed with wireframes (first, simple prototypes), so that the focus stays on the information architecture rather than the aesthetics.

First wireframe regarding the SharePoint list topic
First wireframe regarding the SharePoint list topic

Discussions altogether with the whole team helped at this point. The feedback that certain information is not delivered by the interfaces came fast and transparent, leading to an adjusted visualization even before the first line of code was written. Likewise, the team experts in both subject areas (Confluence and SharePoint) could deliver fast feedback regarding terminologies and labeling, so that the particular user of each system feels addressed.

To test the interaction design “click dummies”, which represent a linkage of wireframes, were constructed. This enabled us to test the process of whole use cases and detect possible disturbing flows or missing features.

Interaction design with a click dummy
Example for a click dummy, to navigate through a hierarchic structure.

This was particularly important for the user interface elements, which were specially developed for this purpose. This way we had the possibility to use the tools with little effort to start testing with potential users and create, refuse and adjust new ideas during the conception.

When we weren´t sure how the wireframe would look like in the Confluence or SharePoint environment we immersed it in color:

fine tuning for details
Fine tuning, to get a feeling for the integration of the macros in Confluence.

One of our challenges was the adaption of the look & feel of the Confluence and SharePoint Online ecosystems, to avoid making our solution look like a foreign matter and not to exceed the development expense. The design systems AUI on the Confluence side and Office UI Fabric on the SharePoint side served as a compass during the development of the user interface for the “SharePoint Online Connector for Confluence”. The UX designer, who also has expertise in software development, was able to identify barriers in both systems and this way estimated the effort for the future implementation.

Design a user interface according to numbers

Meanwhile, the backend was prepared well so it was time to bring concepts, wireframes and fine tuning to life. A designer in his original role would now start working on other projects, but in this case, the role had a wider setup. The UX designer accompanied the further development and implemented many user interfaces via HTML/CSS/JavaScript himself. Leading to an agile adjustment of details and omitted positions of the concept. On the SharePoint side in the Office 365 environment, we often heard: “In this case, there is, unfortunately, no possibility to implement it this way.” To avoid a delay of development a solution needed to be found fast. Fortunately, the UX designer was able to develop alternatives in his double role as designer and developer. Ambition and his eye for detail enhanced the quality of the realization of the own design. Well, otherwise he would have had sleepless nights (wink)

Thanks to an agile software process the results of the prior sprint and a short UX review were performed with the whole team during the sprint review. This had the advantage that the developers found some problems due to regular usage, that was approached right in the next sprint.

The first version of the app was presented to many other teams at Communardo, the feedback was evaluated and solutions found fast. Although the usability test was performed parallel to the development, it did not disturb, because we managed to collect at least one sprint.

The first time

Finally, it was time for the first version including the whole planned features. We could now put it to the acid test. This meant providing the customers of the analysis phase a beta version of the app to evaluate how satisfied they are with the new version. At the same time, we had ten people in different departments at Communardo test the beta version. It was crucial that it was their first usage of the new “SharePoint Online Connector for Confluence” to document their expectations and first try.

These first-time users were asked some background questions and, while the UX designer documented everything, they had to solve special tasks using the app. Every indecision and gasp of relief was recorded meanwhile.

The results surprised everyone on the team. During the evaluation 32 corrections occurred. They were prioritized by frequency and level of frustration. Serious problems, that appeared to all the testers, where solved immediately.


The UX designer is operating as a “lawyer of the user” during the development process. He needs to connect the core problem and the needs of the user and stay in the process from milestone to milestone.

Having in mind that such complex solutions have a high potential for support effort, it is crucial to always – during analysis, development, and testing – keep an eye on the usability. The users should enjoy using our product and in the best case even have fun using it, because the purpose of the solution “SharePoint Online Connector” is linking the content of both systems. If users don´t like using the solution, integration of both systems will be prevented which may in the worst case lead to loss of knowledge.

User Experience Expert

User Experience Expert

Location: Dresden, Germany

Are you a passionate UX designer striving to provide a unique user experience? Become part of our product team and help us in making our products more attractive to national and international customers.

Related Posts

Leave a reply