top of page
Portfolio-header.jpg
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.

MY ROLE
Lead UX/UI Designer
TOOLS USED
Adobe XD, Jira, Github
TIMEFRAME
1+ Years
Seller-System-Mockup.png

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 rebarnd 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.

palette.jpg

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.

io connect.jpg

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-connect-modern.jpg

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.

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
bottom of page