Collaboration Portal

UX and visual design of collaboration portal for a UN backed initiative regarding responsible and sustainable investment.

The client had a pre-existing collaboration platform which was badly in need of updating both in terms of the experience for users and providing visual consistency with their brand.

Working with a project management team and aided by meetings with the client and user testing sessions for key journeys I delivered a design for a comprehensive collaboration and networking solution.

The visual identity and styling are sympathetic to the clients pre-existing brand and online presence while also matching design patterns that will be familiar to users used collaborating in a social networking setting.

Case study

Pre-design phase

Prior to the design phase of this project I joined the project management team on several visits to the client to help unpack the brief and to fully understand what problems we were tying to solve and what it is that users are looking to get out of this application.


The first visual part of the project was creating a moodboard to show an initial design direction to the client in order to build trust and make sure we were aligned.

I gained an understanding of the client and their brand from the discovery workshops and conversations with their lead in-house designer, which coupled with my understanding of the nature and requirements of the project from these same meetings allowed me to put together a board showing the building blocks of the application using design patterns references for elsewhere while maintaining a sympathy to their brand.

Initial designs

Once the client was happy with the moodboard we selected a hand full of key screens from the core of the application showing a number of the most commonly reused elements which I then produced high-fidelity mockups for. The intention being to test the assumptions made around the visual direction and ensure the client is happy before going too far into the visual design process.

From here there were various iterations for many of the elements leading to a polished design which can then be tested with users.

Full designs and UX testing

With the clients happy with the look of the application I created an interactive prototype of six of the most important user journeys to be tested with end users. The aim of these tests were to ensure that the navigation and terminology used throughout the app is easy for users to understand. From testing we isolated several pain points that were then resolved as I produced a full range of responsive designs for all of the applications key screens.

Interaction Design

The final phase was interaction design. Using Sketch and Principle I mocked up several interactive prototypes to show the functionality of a range of elements.