Summary
A main responsibilities of mine at Felix was the source to contract experience. Felix is a vendor management and sourcing product for building, resources and infrastructure industries. Teams in these industries use Felix to collaborate better and work faster together while improving traceability and reduce risks through their supply chain. The following case study highlights a small but impactful improvement to the RFQ experience that involved a collaborative effort to understand, define and design an evidence backed detailed design.
After several months of users engaging with the new RFx experience, it became evident that there was a notable gap in their preferred method of handling request documents. Our preliminary research unveiled that users frequently upload diverse documents categorised according to the service they were procuring for, and often sourced from various cross-functional teams. Given the intricate nature of their tasks, maintaining clarity and organisation is paramount to avoid oversights and inadvertent sharing.
Organisation is paramount to success in procurement.
Procurement users particularly value the meticulous structure and organisation of their requests, recognising its direct influence on successful outcomes. Every UX and visual design decision in this interaction was made with this in mind – and guided by wanting to enable success for our users and their teams. Every interaction big and small matters.
While we held confidence in understanding our users' desires, we recognised the need to establish what could realistically be delivered. Kickstarting the project involved aligning with the Product Manager and Engineers to outline the scope of exploration and delivery within our designated timeframe. To facilitate this, we opted for a straightforward brainstorming session, compiling a basic list of requirements, followed by iterative edits and a rough sketch to visually communicate potential features.
Given this feature used the early iteration of our new UI I spent time carefully experimenting with different ways that each interaction and control could be presented to the user. While the design system’s foundations and core elements were set and not to be altered, we still had the opportunity to introduce new and improved components, states and behaviours where appropriate. This allowed us the space to explore new components, interactions and other component use cases on the fly. Each feasible iteration was tested for usability to determine improvements until arriving at a version we had high confidence in.
We noticed a common user behavior where users frequently uploaded entire folders or batches of highlighted documents. Given this tendency, it was crucial to ensure robust error handling to mitigate the risk of overlooking any issues. We saw upload errors as a direct risk to the users goal of organisation and efficiency. Hence, the design of error handling needing to operate at the file level, enabling users to quickly identify, understand, and address any errors efficiently.
The following example illustrates how users might encounter different errors and their presentation. When an error occurs, the affected file overrides alphabetical sorting and is prominently displayed at the top, accompanied by a red error icon and an informative error message to guide the user. Moreover, anticipating scenarios where users might have numerous folders, I implemented a file error badge within the accordion. This badge ensures that even if a folder is collapsed, users can easily locate any errors within it.
When uploading many files at once, errors are a common risk our users experience – especially with large file types. We purposefully designed for this case to support in finding and understanding the error quickly to rectify the issue.
With the core styles from the design system and newly designed components in use, I shifted my focus to interaction design to refine the finer points of the section overall. I delved into details like hover states, shadows, and animated transitions, ensuring each element contributed to a cohesive experience. These considerations were incorporated into the prototypes used for testing.
The example of how each folder accordion behaves with different interaction is a good demonstration of how some of the visual decisions needed to be made in a detailed prototype to both communicate with users and Engineers.
Creating RFQs requires a lot of attention and careful consideration – that is why we chose to only show the most important information and controls at a glance with relevant affordances appearing when required (including edit, delete and reorder).
In every instance, it was crucial to have a rationale for each behavior. Take, for example, the deliberate animation when adding a new folder. Just as a purposeful shake can draw attention to an error, I implemented a subtle animation to position the new folder, reinforcing its successful creation.
A small but deliberate animation that makes the placement of the folder feel meaningful while reinforcing successful creation.
When testing the prototypes and discussing folder structures with users there was one common theme. They always had relevant folder structures before creating the RFQ. This is because a structure would be set up in the early stages of procurement planning and would be used for a period of time by a variety of teams before making it’s way into Felix. With this insight in mind, we experimented and tested a little further to determine if we could design an interaction that would turn a series of steps into one step.
The outcome was an interaction that would allow the user to drag a collection of folders into the folder accordion to quickly replicate their folder structure and upload documents in one single drag and drop.
Our users typically have detailed folder structures made during early planning and cross-functional collaboration – So we designed an interaction so users can drag and drop their existing folder structures made by their teams from their shared drive to quickly create in one simple interaction.
Up next
Find the right health cover for you with a simple online conversation.Find the right health cover for you with a simple online conversation.