Case Study: Product Feature Enhancement for Infor Rhythm
Background:
Infor Rhythm is an enterprise SaaS product built for e-commerce and the public sector. It offers an end-to-end solution with the integration of content management, product catalogs, product promotions, analytics, as well as customized website designs into one seamless offering.
Working with a team of UX designers, engineers, PMs, and BAs, I had delivered parts of the product design by collaborating with the Business Analysts on the team. One of the product feature enhancement requests was to integrate a File Uploader to enable users to upload .csv files and adding a Quick Order Entry form in the shopping cart for bulking ordering.
“One of the product feature enhancement requests was to integrate a File Uploader to enable users to upload .csv files and adding a Quick Order Entry form in the shopping cart for bulking ordering.”
Existing shopping cart experience before feature enhancement
Process – Business Requirement:
Starting off with a business requirement doc that was presented by the Business Analyst, some of the immediate questions I had were:
• "What is the maximum file size?"
• "Is .csv the only accepted file format the system could accept or are there others?"
• "How fast can the system upload a file?"
• "How does the system know when a file that is being uploaded is good or bad?”
• “What are some examples of those good or bad return from the system? (so we can plan a feedback loop back to the users)”
• “What if there were already items in the shopping cart before uploading? What does the system expect to do?”
• “Can the file upload happen in the background while users perform other tasks?”
With some of the the initial questions answered by the dev team and the requirement doc in hand, I collaborated with another UX Designer on the team and we started to whiteboard a new workflow digram.
Whiteboarding the new workflow diagram
Process – Design:
Based on the requirement that both File Upload and Quick Order Entry were needed in the shopping cart, we explored the possibility of having both be housed within the same “Bulk Order Entry” section and using the Tab UI, users can quickly access either one (with File Upload being the default state based on the business requirement need).
Whiteboarding: Bulk order entry section, and file processing notification in the mini cart
Process – Design Iteration:
While the initial questions were helpful to get started, more questions came up during the design process along with additional information given by the dev team leading us to iterate the design multiple times.
“We soon learned several key limitations and additional requirements through implementations by the dev team (as they too learned about the capabilities of the platform)”
We soon learned several key limitations and additional requirements through implementations by the dev team (as they too learned about the capabilities of the platform). Some of the problems that we ran into during the design process were:
• Users must construct their .cvs file a specific way (columns within the spreadsheet) to get a successful upload or as an alternative they can download a template to follow
• Users must explicitly choose how their file was formatted before uploading (due to the fact that there is a different way to representing currency and file formatting in Europe)
• Users would lose the ability to clear any current errors on the page if they navigate away from the shopping cart as it will not save errors for review on returning visits
• The drag-and-drop functionality could not be done due to technical feasibility at the time
• Users could not have the ability to cancel an in-progress upload due to technical feasibility at the time
To solve some of the technical limitations, we tried to design around them in the simplest way possible by being more explicit in the workflow to avoid any user confusion.
Users must construct their .cvs file a specific way (columns within the spreadsheet) to get a successful upload or as an alternative they can download a template to follow (annotation #3, annotation #4)
Users must explicitly choose how their file was formatted before uploading
Users would lose the ability to clear any current errors on the page if they navigate away from the shopping cart as it will not save errors for review on returning visits
Below are some examples of the final deliverables sent to the dev team with detailed annotations, including functionalities that were not prioritized for the release due to technical limitations:
Outcome:
While the above-mentioned limitations were unavoidable at the time and certainly not ideal from a user experience perspective, we were able to find compromises and simple solutions like placing explicit wording and warning to guide users in completing their tasks.
The collaboration process between design and development were done using Sketch and Invision. Given a comprehensive Sketch library of UI symbols, it allowed us to build out workflows rapidly which eliminated the need to delivery rounds of wireframes. Full annotation of functionalities and behavior were also included in the different design stages.
“While the above-mentioned limitations were unavoidable at the time and certainly not ideal from a user experience perspective, we were able to find compromises and simple solutions like placing explicit wording and warning to guide users in completing their tasks.”
During the product development process, we learned that some UX recommendations (like drag and drop, cvs template download, the ability to cancel an in-progress file upload, etc…) would be left out from the planned release schedule due of technical feasibility. What could not be ready on time would be pushed to the next release train for development to pick up post the design phase for this particular feature requirement.
In the process of working on this feature request, new UI elements like the animated "uploading" icon was needed so the Rhythm foundation team was notified for the new addition to the UI kit, and having that collaboration helped to drive consistency and reusability across experiences within the Rhythm product.
“...there were “push backs” and technical limitations from development on some UX recommendations, we empathized and compromised by finding alternative ways together to stay committed to our product roadmap.”
Through the collaboration with development, we formed better understanding of the full scope of the feature request together. And while there were "push backs" and technical limitations from development on some UX recommendations, we empathized and compromised by finding alternative ways together to stay committed to our product roadmap.