ColArt, the world's leading supplier of art materials, is a $200 million a year business and the choice of artists in 120 countries.
"At ColArt, we aim to provide the art materials of choice to create masterpieces for generations”
Comprising of several highly successful brands, each with an extensive product range, ColArt discovered they had thousands of digital assets in different corners of their organisation. These were difficult to find, poorly managed and used inconsistently.
To launch "The Bank", a digital asset management application to drive efficiencies and consistency for the organisation and its channel partners.
As UX Lead for the project I was responsible for the overall design direction, production of all deliverables and implementation of a pattern library with the development team.
- Requirement gathering
- User interviews
- UI design
I spoke with subject matter experts to understand ColArt's vision and how the application should fit with its business processes.
On-site user interviews
I interviewed team members and partners - taking a deep dive into their day-to-day processes. I gained detailed insights into their individual requirements, objectives and pain points when trying to achieve tasks relating to digital assets.
My research identified different contexts for use of the application and I created personas based on the insights gathered. The personas helped me focus on the segmented audience and created empathy during the design process.
External user persona card
User flows & site map
Guided by my research, I mapped the key user flows in order to figure out a broad sitemap for the application.
Site map ideas from a whiteboard session
Ideation and sketching
I rapidly sketched solutions to the overall UI, focusing on designing a consistent experience for all user types.
Some initial annotated UI sketches
One of the biggest challenges was how best to present the 'asset grid' - essentially a menu from which assets are listed, previewed, downloaded, shared, highlighted and selected.
As each type of asset has its own specific quirks (for example, PDFs and videos have very different attributes), it became clear that a card-based layout for the ‘asset grid’ would give the flexibility required:
- Flex per user type depending on content requirements
- Highly visual and scannable
- Keeps a clean and tidy UI
- Easily manipulated for functionality requirements
Wireframing and client feedback
I wireframed and rapidly prototyped primary workflows - formulating the sketched ideas further, whilst keeping the UI as clean as possible.
I presented these deliverables to internal stakeholders to get feedback and ensure the design was meeting the project strategy.
Early stages of wireframing
Insights I gathered from the team included the need for asset titles to be added to the default card view, as users would need this in order to make a selection between similar looking assets.
At this stage I identified the need to pull out some of the task workflows and use rapid prototypes to communicate specific user interactions to the project team. Once these were agreed to, I documented the detailed UI for each task.
Rapid prototype showing 'add to folder' UI idea
UI design ideas for 'add to folder' workflow
I built a stylesheet for all UI components and created an icon font for use across The Bank. I then collaborated closely with the dev team to build out a pattern library, which ensured consistency and increased speed of development across the project.
Interface elements for styleguide
The Bank has been adopted by all ColArt brands and their network of dealers and resellers, with over 27,000 asset downloads in the last quarter.
The Bank now powers ColArt's entire digital asset ecosystem - improving consistency and driving efficiencies across the organisation.
- Makes digital assets available globally, both internally and externally
- Gives resellers the freedom to download assets when they need
- Reduces significant workload for the ColArt team
- Enables ColArt to serve digital assets directly to their websites and reseller websites
- Increases capacity of local servers by using cloud storage
- Contributed to ColArt passing ISO 9001 certificate