top of page
SUMMARY
Working remotely and cross-functionally alongside internal stakeholders, I was able to provide a new cohesive visual upgrade to the company’s vendor-based SaaS product. This helped establish a grassroots UX effort as I documented and audited our existing products for a cohesive user environment.
TIMEFRAME
1+ Years
TOOLS USED
Adobe XD, Jira, Github
MY ROLE
Lead UX/UI Designer
Design Goals
Problem Statement
Business Goals
To launch a redesigned version of Ingredients Proprietary Online's Seller System portal that featured more branding consistency and remained scalable for future expansion.
After consulting with business stakeholders, we recognized the opportunity to bring more cohesion between the back and frontends of the website. This included addressing the 70+ color palette and a rebrand to unify the visual design.
Problem
As features were primarily developer-led, customer requests informed IT's reactive efforts presenting unique challenges to best UX practices. The UX team's goal was to reconciliate customer/user needs with UX strategy, despite having little prior UX documentation.
Our goal became to navigate through the design debt and use it as a catalyst to establish better procedures and elevate the company's visual design.
Establishing a Brand Identity
Design Solutions
Design System Audit
Upon starting there, the first thing I noticed was that the frontend and backend of Ingredients Online were inconsistent leading to user confusion. I called for us to do an internal audit of our assets. This led to the start of a formal design system that catalyized a company rebrand, bringing down the amount of colors to 5 primary/secondary and UX eventually being moved under marketing.
Improved Cross-Collaboration
Speaking with the head of development, I discovered that the marketing and development teams were largely previously siloed. This caused a lot of the branding inconsistencies when working agile and was something I sought to fix through working with both teams. It was the first order of business to fix as it was my belief that we wouldn't be able to advance UX without working backwards first.
Improved Internal Workflows
Raising UX Maturity
UX Road Map
New Ways of Thinking
While working through the Seller System and its features, I began to work on a UX Road Map to help address areas of improvement for the UX and marketing teams. This included a throrough analysis of where the team currently sits and how we could get from Stage 0 to Stage 1.
Although research methodologies were in place, including stakeholder research and UATs, I had to educate on the importance of usability testing to help show the benefits of it to the head of e-commerce and marketing. Allowing for us to ensure a balance between business requirements and user needs.
New Feature: IO Connect
Connecting With Customers
Designing the System
Stakeholder Collaboration
With the successful improvement of internal processes, we were able to quickly start moving onto launching new products that fit into our agile/lean UX pipeline.
One was IO Connect which used a two-column, multi-tabular approach to organizing information as I felt it was best to avoid overloading our sellers with too much info on one screen.
For the new Seller System, one regularly requested set of features was IO Connect which would allow our vendors to communicate directly with customers using our internal tools.
This helped to address consumer pain points of wanting to learn more about companies prior to product purchases, further aligning our designs to business needs.
IO Seller 3 Mobile App
Mobile Inventory Management
Native Mobile App
As about 80% of our seller app dashboard came from desktop use, we also spent a few weeks updating the IO Seller App. This update included revised branding colors, updating the touch icons for better Material Design compliance, and small edits to the user navigation.
The biggest takeaway was that since our typical data-heavy product tables don't translate well into mobile screens, we chose to utilize vertical dropdowns with accordions to keep information easy for our sellers to use. In addition, we chose to keep the app strictly to allowing our vendors to only see their stock to help prevent any potential user error.
Android App: https://play.google.com/store/apps/details?id=com.ingredientsonline.seller_app&hl=en&gl=US&pli=1
Outcomes
Raising the Company's UX Maturity
Establish user flow development process for software development efficiency
Creating a design system and cohesive look for the company’s SaaS product and
user portal. This includes the Seller System app which I helped rebrand and ensure
a proper conversion from the web app to mobile app.
Internal design audit on the company’s existing software solution to create cohesion
between our software/website offerings, aiding in 47% increase to year-over-year sales.
Further Reading
Ingredients Online- Basic Marketing PDF: https://mcontent.ingredientsonline.com//media/wysiwyg/seller/images/sellpage/IO-SellerFlyer-BasicMarketingPackage-021023.pdf
bottom of page