a supply chain financing platform to enable global enterprises to make well-priced financing available to every tier of their supply chain

Rebranding & solving complex UX problem with limited resource in a fast pace

Our user experience before this redesign was tedious. There was no clear brand representation making it indigestible for both our customers and potential investors. Applying for an invoice financing was super confusing for new customer users.
Being engaged with all facets of the business meant cooperation with different product managers and teams. Each of these products have a lot of user views which meant that the redesign had to carefully consider each stakeholder’s opinions on the requirements and goals.

Uniting the world through enlightened trade

Worry-free onboarding

We image the onboarding process as a teaser to our new users, providing the just enough relevant contents in a comfortable range is the key.
Users can set the account type based on their business needs, complete the KYC form, invite the workspace members with a sharable link in order to receive a personalized dashboard experience, with a contextual sidebar to minimize user concerns.

Intuitive representation for complex data

The primary challenge we faced in the dashboard was displaying various edible numbers. We chose to arrange numbers logically based on how the sales process work, especially on mobiles since the sales spend most of their time travelling and process transaction via smaller devices. Thus, it’s easy for anyone to relate those numbers logically; also, with tiny round dots to represent the stage of each request.

An effortless way to view various notifications

Our users complained that they got the overwhelming amount of notifications every day. The reason was all messages looked the same. Therefore, I came up with adding an icon that classified each information and made the list accessible.
After the implementation, the notification engagement ratio increased by 7 %.

Contextual sidebar with actions highlighted, minimizing the navigation effort

The business owners care more about the pending or RFI invoices when they were processing financing requests. The statue and its causes are their biggest concern. Accordingly, we decided to add a contextual sidebar without breaking their reviewing flow, with status and actions highlighted.

Before we paint the product with pretty pixels

Key findings from strategic discovery meetings

Key findings from user research & customer insights

The weekly customer insight meetings with our existing users proved to be super helpful, allowing us to gather hand-on insights and confirming our initial assumption

Notifications with similar looks is overwhelming

The sales complained that they get the overwhelmed amount of notification they get every day.

Team Account management needed

Sales team always have one admin who has higher authority, can invite and assign tasks to the rest teammates.

Our concept is powerful but complicated to potential customers

63% of potential customers find our solution super powerful but hard to understand at the start.

Error status matter more

The business owners more cares about the pending or RFI invoices since they are the ones blocking the money flow

Translate concepts into features that address customer behaviours and motivations

User flow

In order to start designing, I decided to kick off with the information architecture and flow of the product and each financing model to narrow down the task the user needs to complete.

Crafting new visual identity

Our visual identify need to cover the ROW/China websites, two web applications, digital and offline material, which suffered from a breach of consistency. Henceforth we decided to make a scalable design system across all the platforms.
First, I worked with our marketing director to select keywords that describe our brand. This method helped, but it was by no means like the be-all-end-all. Further, I talked to our stakeholders to understand the company's vision.

Then, I started building out the mood board, pulling inspiration from previous discussions, Behance and Dribble, showcasing across the team.
And in this process, I even intentionally included some not-so-suitable examples because I want to keep the first couples of conversations as broad as possible to make sure we touched more angles before moving further. My team would comment on the ones they like, dislike, and why via Figma.

It was really helpful to do a mood board first because I didn’t need to spend a ton of time designing anything only to find it wasn’t going to work. I was able to cross that idea off my list initially. For example, our brand wants celebratory feeling, but we were more about the interaction than the visual elements.
Finally, we found our new brand look. Then we evolved our brand idea into a complete brand guideline definition, then emerged into company product website and web application.

Crafting dashboard UI

1. Define widgets based on user needs

We started with two question: what info do the users concerned the most and what is the best practice to present them, which allowed us to form a rough idea of the dashboard UI

2. Simplify widget sizes with grid layout, optimized by user flow

We twisted widget sizes and arrangement in grid layout, to help us create an essential structure for our product. Finally, we simplified our widget into three widths: large, small, and mini widgets.

3. Finalizing with the new brand identification

I tried different pairings, changed composition, polish specific alignments until it looked good. I kept similar margins/spaces between the elements to ensure visually proportional spacing.

Iterate and enhance the feature with user feedback

Massive drop found in the onboarding process

Initially, we included more questionnaires and steps during the onboarding flow, which makes users spend more extended time preparing the required documents and provide quite a bit of personal information before they even understand its purpose, increasing concerns and anxiety, which leads to a massive drop of users.

We mapped all possible flow under signup and log in.

Furthermore, we need to explain to the exceutives team and different stakeholders thoughtfully to explain the impact I was envisioning.

We released to 50% of the users, and 45% of users signed in and started using our product.
As a result, this flow ends up being a successful project of the year. Although it's a small design work, the thinking behind took us a long time.

Well-designed empty state benefit UX

The dashboard is the last step of our onboarding and the first step of our product, especially when they log in for the first time. Therefore, it's necessary to prepare for the empty state:

Below was the two initial ideas we had:

We preferred the 2nd one because these four CTA gave new users a clear clue of what they could do, however it gave users no chance to see the actual dashboard, and the four CTAs only appeared before users took any actions.
So we combined these two solutions-- Put the CTA in its corresponding widget.

And we also mapped all possible dashboard cases based on our persona to ensurers would not end up with an empty, clueless dashboard.

Lessons I've learn

Working for a start-up was an excellent experience for me. I enjoyed working in the fast-paced environment and seeing how our initial tech solutions transformed into the service that can impact people's lives. In addition, it was fascinating to test what kind of strategies would guide our users and address customer insights under the constraints and limitations.

One of the service features that set us apart from others is that it has a mechanism to accelerate the financing process of small business owners. This ensures that all the users are connected by credit flow and facilitates finance knowledge sharing. Although our team has experienced engineers, it is still very challenging to scale up a sustainable business model in such a short period. It seemed that local business owners needed to see profits that we could bring to them immediately and how to adapt our product into their own business need is a big challenge.

Additionally, I found that one thing which helped during meetings was sketching. It sounds simple indeed but did help us a lot. For example, when we were in discussions with many product managers and engineers, everybody argued about products and features. And people were talking to each other, but they did not see what was in the other person's head. So I started to draw those ideas on the shared whiteboard (Miro/FigJam) or sketch on my iPad Procreate. And as soon as I drew something, everyone could look at it, and then this was where it clicked because this was where we could actually start a real conversation. This method I took proved to be super helpful, especially we were working remotely, and accelerated the decision-making process.