Copap Customer Portal

RESPONSIVE BROWSER APPLICATION UI/UX DESIGN

Revolutionizing Supply Chain and Trade Finance with Copap's Online Customer Portal UI/UX Design

Copap, a leading supply chain & trade finance company, selected The Skins Factory to design their online customer portal and management platform. Utilizing a combination of stock and custom illustrations merged seamlessly, bursting with color, and an intuitive design language based on user flowmaps our team designed, the end results are something truly unique and remarkable. Each section of the app (Login, Registration, Dashboard, Orders,  Invoices, and Customers has its own ‘theme’. This means that even those elements common throughout the app (the Chrome, Navigation, Live Search, Notifications, Live Chat and Company Profile and all associated dropdowns and menus) change appearance from section to section.

★★★★★
”The Skins Factory’s design work was a breath of fresh air.”
- VP, RISK MANAGEMENT, COPAP

Designing the User Flowmap

We started with a basic flowmap which evolved to a more advanced, targeted User Flowmap, once the scope of work was defined through collaboration with the client’s team.

The Login Screens

From the onset, we wanted to do something different for Copap. Illustrations have been more prevalent lately and the idea to fuse them into a browser productivity app was appealing to both us and our client. Because Copap deals with supply chains, we used the transportation of goods as the basis for the illustrations. We used the 4 main modes… Air, Sea, Train & Trucking.

THE Registration SCREENS

Because this was going to be a series of screens the end-user had to fill out, we created a super wide illustration and had the modal advance from right to left as the background swept across, so did the content at a different speed creating a parallax effect. The animation progression was designed in Adobe After Effects. Progress was tracked by using pagination circles so the user knew when the end point was. Logo, Registration title, pagination circles and back remain in place, Next fades out. Simultaneouly, the new step’s content slides in from right while fading up ito full opacity while completed step’s content slides to the left while fading down to zero opacity - the movement of this content correlates with the movement of the panel background illustration.

THE Dashboard SCREENS

Dark mode UIs are all the rage these days, so we created a dusk scene that was transitioning to night time. Deep blues and purples with the soft pink to purple sunset as the silhouette of a freight train fulfills its supply chain duties riding on its tracks.

THE Order SCREENS

THE Customers SCREENS

THE invoices SCREENS