Procurement Leaders Redesign
Working directly with the CEO and product managers within Procurement Leaders, redesigned their entire website and digital products to create a flexible, easy to use design system.
Procurement Leaders (PLN) is the world’s largest procurement network and intelligence platform. With 33,000+ senior leaders, from 750+ global companies, offering next-practice insights, practical tools, expert guidance and industry connections.
Was responsible for designing their entire visual look and feel, along with contributing to refreshing the overall brand. Together we created a UI and visual design system that made their offering and website clearer and easier to navigate. As well as allowing them to develop and test new products 3 times quicker than before using the design system.
MY ROLE
UX/UI Design, User Flow, User Research, Information Architecture, Visual Design, Prototyping, Branding, Icon Design, Design System
Before Redesign
The pre-redesigned site was very heavy in look and feel, along with overloading a visitor with to much information. It also didn’t do a good job of communicating the brand and values of Procurement Leaders. It was very dated, and needed to be updated and refined to work harder in selling what the value of working with Procurement Leaders could be.
Initial Ideas
Whatever UX and UI I came up with had to work within the exiting CMS that Procurement Leaders were using. The functionality of the components were a tightly controlled by the CMS maker, however we could style and adapt them. As a result, one of the biggest UX challenges was being aware that whatever I suggested was possible to build within the CMS.
Therefore, these initial ideas explored what is possible within the CMS. While also exploring simplifying the visual design to make the site easier to use, while also showing off all the various things Procurement Leaders (PLN) offer for clients.
Using more visual expandable main menu, with images to highlight content. Adding topics and community by using colour and introducing faces to communicate fresh changing content. The idea of using bold simple panels to showcase the various content was one which remained from this initial exploration.
An exploration in which the content would slide across the initial landing screen using panels layered on top of each other. Would then close the panel to go back to the content overview. Client liked how sexy the idea was, but ultimately it was to much for the PLN audience and the CMS.
More of a grid based exploration with less white space and more content displayed on screen at the same time. It worked in terms of organising all the content, but didn’t align with the aim of simplifying and improving the overall browsing experience.
An exploration using a left hand menu and content panels. While it achieved the aim of simplifying the content browsing experience, it felt to busy due to the mixing of images, colours and background images. Distracted from the content to much.
Final Designs
Procurement Leaders (PLN) is subscription based. With their website having a logged out and logged in state. Following are examples of key screens of both states.
Overall the new logged out experience proved successful at launch, increasing conversions and subscriptions to the PLN product.
Logged Out Designs
Home screen
On the home screen we managed to simplify what PLN does into 3 main areas that communicate clearly the value offered by PLN. We put it front and centre as soon as you land on the site. These messages are supported with examples that show off the available learnings, and how PLN can connect you with minded people to improve your job performance. The screen ends by demonstrating that you can trust PLN, followed by a secondary call to action to increase conversion.
Product screen
On the product screen the aim was to show the action a reader could achieve by working with PLN. We didn’t want to overload the reader with to much information that they miss the value add. Therefore, the story is delivered with short clear statements supported by relevant visuals showcasing how PLN can help.
Resources screen
The resources screen is an important part of the PLN sell. Allowing a reader to explore what PLN does and how it can be used within their job. The reader can explore the freely available resources by topic, type and role, allowing them to find relevant value they can use.
Logged In Designs
Landing screen
The logged in experience of PLN would be personalised and based on previous usage. Along with a featured story from PLN, the rest of the landing screen is a feed displaying content. Tabs are used to allow the person more content over what they want to view. The articles are presented with enough context and features to give allow a reader to make a decision about it. Included as well is a read time to nudge a reader into reading an article.
Other features are presented within content panels, promoting items that the person might be interested in across topics, questions and answers, tools and events. The overarching thinking being to make the content as helpful as possible.
Topic screen
One the big ways a reader discovers and uses PLN content is via its topics. Therefore, finding a flexible solution for all the topics PLN cover was an important part of the redesign. The solution we came up with using colour as the main visual cue. This also allowed PLN to extend their use of colour cues to the rest of the site, and freshen up their visual appeal. This also reduced the image lift so that PLN wouldn’t need an image for every topic and sub-topic, which would have been a major task for them.
Using clear visual cues and content patterns already established on the landing screen, the content is presented in an easy to browser and use layout. This allowed layout to scale and be used across all the numerous topics and sub-topics.
An added feature allows a topic to be followed. This would then feed back into the personalisation of content, while also creating more stickiness for PLN in attracting someone back to their content using notifications and personalised email alerts.
Article screen
The article screen uses a simple layout allowing the older content to be migrated across to the site more easily. PLN were keen to encourage readers to do more with their content, so developed new features that were possible within their CMS. These new features allow a reader to save the article, share it 8 different ways, and mark it as a must read.
On the left hand side of the screen, created a flexible action area to house these features. These features can be switched out depending on the content, for example if its a report, would display a download button. Where needed the feature would also expand down like an accordion to reveal more functionality and work across mobile as well.
Article screen – Related
Suggested a future feature for this PLN redesign – inline related content. Whereby, within the content there would a visual ‘+’ icon that once selected would expand to reveal content related to a term or topic. These could be added by an editor, and then based on the topic the related content could be pulled in.
This was suggested as readers would read just the single article before leaving the site again, and this was a feature to increase click through rate to more content.
Another feature to highlight is the sticky header at the top. It was added to report screens to provide context for the reader, as reports can be long and the reader gets lost within the content. There is an example screens for a report below.
Collaborate landing screen
This section contains a lot of different functionality all fighting for attention that a reader would want to use. To help reduce and avoid confusion the main functionality is reduced and divided into 3 areas using the header ideas from the topic screen. Thus giving a reader clear direction as to what to do.
The questions and answers are presented following a similar pattern to how the content is presented on the landing screen – using a tabbed feed. Showing the flexibility of the overall design system. Key information is highlighted to help nudge a reader into making a decision to read it.
Search screen
The search screen is broken up into different types of content allowing a user to easily find whatever they are looking for in a simple, yet powerful layout.
Mobile screens
Report Designs
Report cover screen
Created a flexible cover system that could be used across all PLN reports. This would cut of the need to completely design every report cover. The information overview on the cover could be changed by the author to reflect its content. With the meta data auto updating to reflect its contents. The report is designed to scroll into the next section to reflect how a reader would navigate through the report.
Note the changes to the left hand action area, which now includes additional functionality to reflect that the reader is viewing a report. It now allows a reader quick access to the report sections, its charts and an notes the reader might have made when reading it. The saved notes feature was important to increase the useable of the reports, and it more sticky. Also highlighted is a related tool, to increase usage across all PLN offerings.
Report content screen
The content within the report would be displayed using html, allowing for it to be arranged and displayed as needed. This made it flexibility and easy for its author to create the report within the CMS, reducing inconsistencies across PLN’s reports – which was a growing issue within the company as it lead to reader confusion and brand devalue. Using the print function within the CMS user could also download reports using this clean and easy to read format.
Report make a note screen
Readers would be able to save notes within reports for future reference. They could simply highlight the content and the option to save it would be appear.
Report viewing saved notes screen
The readers saved notes would be accessible from the left hand side, or from their profile. They could delete them or select to jump to them within the report.
Additional Product Designs
With the aim of not only redesigning the PLN website, but also to create a flexible design system for use across all PLN products. This was accomplished as part of the project, with key elements and thinking carried across all PLN offerings. Below are some examples of the design system being used on some of the PLN tools and products. This allowed for new products to be developed and tested 3 times quicker than before the redesign.
Branding
As part of the project also contributed to a brand refresh. Working on refining the brand colours and typography for use online and off. These stylesheets describe the design system for the website and digital products.
The design we done together with the PLN in-house development team, once an element as agreed it was handed off to be developed. Once the project was completed PLN took over control for its ongoing refinement and use. The company also under when a leadership change since the project completion, but the bases and elements of this project are still present on the existing Procurement Leaders website.
I’m currently available for projects
Send me a message and let’s chat about how I can help you.
© 2019, Ripetungi, Ltd