UI/UX Design

Project Overview

yufin is a global platform for the small business merchants, their shoppers and suppliers. A POS app that will help merchants efficiently in running their business, big or small.

Working on a finserv industry catering to middle aged and elderly bracket of the population, it’s necessary to make sure that our app is easy to use and understand. Given that this demographic struggle to keep up with the fast-paced world of technology, here are some of the app features I worked on improving as well as conceptualizing the whole branding interface and experience both for our merchants and partner suppliers.

I started designing two short-term UI/UX projects for this app before we proceeded to focus on a longterm project for yufin's newly added feature: yuBayanihan.

— Cashier Mode improvement

Success state screen

— ROLE

UI/UX design

— PROJECT TIMELINE

June 2023 (1 week)

I first worked on some improvements for the Cashier Mode. This feature is used by merchants which helps process their customer's purchases. yufin will automatically calculate the total amount to be paid, change and invoice. While overall user flow and experience of this feature is seamless and understandable, I noticed it lacks "Success State", which is crucial for users when interacting with digital products as this leaves a positive impact that they have accomplished their goal within the app.

See before and after below.

Old cashier mode

No success state. Leaves users hanging, no acknowledgement of their activity within the app.

0:00

New cashier mode

With success state. Improves overall app experience by acknowledging their goal was achieved. We’ve also added some sound effects to improve user’s overall interaction with the app.

0:00

— Utang, Payables redesign

Addition of installment feature

— ROLE

UI/UX design

— PROJECT TIMELINE

July-Aug 2023

Under the Utang, Payables, this feature helps merchants record their customer’s utang (debt). It also allows them to send ‘utang reminders’ using the readily available message template with the exact amount of utang their customers owe them.

See below before and after UI/UX, I also designed the new additional installment feature for customers who opt to pay weekly or monthly. This allows merchants to efficiently track record of their customer's payment schedule by ticking off paid installments, which automatically shows the remaining balance without manually computing.

There were a lot of changes that happened as we go along the production of this update. Some of the features in my original design didn't make it to the final update release of this app due to our tech team's constraints.

UI/UX screens for the Utang, Payables redesign

UI/UX screens for the Utang, Payables redesign

UI/UX screens for the Utang, Payables redesign

Old Utang, Payables

Not organized and a bit confusing for each transaction. When using this it was hard for me to distinguish what actions to take and lacks enough context to determine what each transaction is.

0:00

New Utang, Payables

My goal in this redesign aside form adding installment feature was to have an organized information that helps users identify the latest transactions and ones that need attention to send utang reminder to their customers.

0:00

yuBayanihan features

— yuBayanihan feature

Marketplace and Community

— ROLE

UI/UX design

— PROJECT TIMELINE

Aug 2023-Apr 2024

We started this yuBayanihan homepage as a feature that aims to be a marketplace/community for our merchants. The marketplace section is where merchants can avail our additional services that would support their business for stocks and logistics, whereas the insights section would help them be up to date with the current product trends within their area and respective industry. These insights allow businesses to leverage these information to improve their competitive edge and not limit their business' potential.

As I was conceptualizing the draft of yuBayanihan's homescreen, I gathered some designs both from our main competitors (Peddlr, GrowSari, Sarisuki, etc.) and some inspiration from other e-commerce apps that align with the design direction I'm going for yufin app.

PROBLEM

Small merchants don't have affordable and accessible platforms that support their business needs in terms of their stock/business supplies or logistics to handle their deliveries.

Not enough resources and valuable information for small business owners to take action from and improve the quality of their business.

SOLUTION

To create a FREE all-in-one platform to support their business needs with stocks and deliveries. This also allows them to earn more monthly by assisting their shoppers with the same services through mark-ups.

To provide them business insights that will help them with analyzing their monthly sales and profits goal. A platform that will aid in managing the overall status of their business.

Insights will also display which products has the most and least sales, and help them monitor their shoppers with good credit history. This allows them to check what needs attention and what corresponding actions to take.

yuFam trips and tricks section that will create a sense of community to help their fellow business owners in running and overseeing their businesses.

Figma design

My final original screen designs made in figma

0:00

Actual production

Screen record of the latest yufin app build

0:00

Figma design (insights)

My final original screen designs made in figma

0:00

Actual production (insights)

With success state. Improves overall app experience by acknowledging that they’ve achieved their goal.

0:00

— yuOrder(Order Stocks)

Ordering of stocks feature

— ROLE

UI/UX design

— PROJECT TIMELINE

October 2023 (3 weeks)

After finishing the yuBayanihan homescreen I proceeded to work on the UI/UX design of yuOrder where merchants can order their stocks from. We've partnered with Lots for Less as one of our first leading FMCG wholesaler in Mindanao.

I made sure the user experience of ordering stocks for our merchants would be straightforward. Keeping in mind that our users aren't much of a tech savvy, buttons, product images and names are easily readable and recognizable. Seamless user flow will allow them to have little to know problem navigating the screen, leading with step by step process until they place their orders.

Although yuOrder feature is currently available only in Davao, it will be available nationwide soon.

*show yuorder screen record

yuOrder userflow

Figma design

My final original screen designs made in figma

0:00

Actual production

Screen recorded by our Sales Manager during one of our tests.

0:00

— Tutorials

Addition of tutorials for all our features

— ROLE

UI/UX design

— PROJECT TIMELINE

September 2023 (3 weeks)

The app's initial tutorial page only redirects the user to our YouTube channel containing different videos of step by step how to's. In order to guide our users effectively, we eventually added a section of static step by step tutorials that is now accessible within the app. I designed it simple enough for the users to navigate and find the tutorials they are looking for. Texts and images are big and visible enough to guide the users to the necessary steps.

The addition of tutorials is still ongoing as we keep adding new features for our merchants.

Below shows the original figma screens I designed versus the final implementation by our tech team.

Figma design

My final original screen designs made in figma of tutorials

0:00

Actual production

Screen recorded by our dev and marketing team during our tests. Multiple stops has

0:00

— yufin Supplier App

Supplier Order Management

Of course, our partner suppliers needed a system to manage their store’s stocks and orders. From accepting to ensuring a delivery is complete and sent to the recipient. This also gives suppliers freedom to assess orders and whether or not to proceed with it. It has a variety of features that will make ordering experience hassle-free from both ends, merchant to supplier.

In order to make sure the user flow is seamless, we had a meeting with the supplier to understand how their ordering process works in their actual stores. By reviewing the process, I was able to incorporate it in the app user flow and have them test the process. As we went through several internal and external testings from our supplier, we implemented changes that would fit the supplier’s needs.

*show video of actual vs implemented screens

Supplier App userflow

Figma design

My final original screen designs made in figma

0:00

Actual production

Screen recorded by our dev and marketing team during our tests. Multiple stops has been implemented in the latest build as well.

0:00

— yuDelivery (Delivery)

Delivery for different use case

Our yuDelivery feature was made possible by our partnership with Transportify, a delivery firm that will help our merchants to either arrange a delivery for themselves or for their customers, and to receive their stocks ordered from wholesalers. This includes our partner supplier Lots for Less, especially for customers who opt to have their orders delivered to their doorstep.

As we want to continue supporting our merchants to focus on their business by providing them a variety of fast and efficient delivery options, one feature that we implemented on yuDelivery that will enable them to make more money without a capital is by allowing them to arrange deliveries for their customers. By doing so, our merchants are able to mark-up based on the cost of delivery they're booking. This significantly increases their profit every month as it empowers our merchants to create more money outside of their business.

As I reviewed the UI and UX designs of several delivery app, one thing I made sure to incorporate in my design is to reduce the time of our user's decision making by showing them the prices and info of each vehicle available to deliver their needs, in the initial screens. This will make the process of completing the user's booking as quick as possible.

As opposed to our yuOrder feature, our delivery is available nationwide, for entire Luzon, and some parts of Visayas and Mindanao.