One UnionBanker Hub is the official employee lifestyle app of UnionBank, which aims for seamless interaction between employees and the bank by streamlining Human Resources processes. 1UHub 1.0 has been recognized internationally and has won awards such as the Asian Banker Award for Best HR Technology in 2019.
Duration: Aug 2020 - Oct 2020 (6 weeks)
Role: UI/UX Intern
Category: Internship
The app streamlines Human Resources processes such as availing of benefits, applying for leaves, accessing one’s payroll, and many more.
In 2020, the Employee Experience unit set out the goal to launch 1UHub 2.0 with a more modern user interface, better app performance, and more features.
My contribution to our team of two designers in the Employee Experience Unit was to enhance designs of screens for features such as the Employee retirement pension fund and Employee rewards and recognitions.
UnionBank’s Retirement Pension Fund falls under their Employee Investment Fund program, which is their talent retention and engagement tool to address attrition. Essentially, it is a way for employees to invest and be financially secure for the future.
I was given the feature’s initial screens and a powerpoint presentation explaining the program. Along with this were respective user stories, which I used to find a more modern ground for the app.
Screens for the Retirement Pension Fund from 1UHub 1.0
I searched for modern investment and banking apps online before I went to sketch wireframes for the redesign I had in mind. As I was given a day to develop a basis for the redesign, I used InVision Freehand to quickly make the wireframe sketches for the screens’ redesigns.
Based on the initial screens, entering a contribution for an employee’s contribution was through a slider, which I didn’t think was the most effective input method. Here, I decided on some redesigns. I used a text box where employees would have to type in the amount. I found this method more appropriate because a slider would only be effective if there were fixed options for the investment amount with set increments. Changing the input method would prevent the user from experiencing difficulty in entering a specific amount, such as Php 1,323 to their liking.
I also added a slider as an option for the redesign as it was the initial input method, but I made the slider include lines to signify there were set increments in the amounts.
Sketches of Retirement Pension Fund redesign on InVision Freehand
I also created the wireframes for the consent form and the dashboard. For the dashboard, the main changes I made were in the graph options in the investment unit summary. Ideally, employees can check their investment progress through a graph by the day, month, quarter, or year. I made these buttons more prominent below the chart instead of on top of the graph where they were much smaller.
Likewise, I made redesigns in the feature where employees can change their contribution instantly, which not a lot would know. I highlighted this by adding a button on top of the graph which displays their current contribution, which they may update if ever they feel the need to do so.
Sketches of Retirement Pension Fund dashboard and consent agreement redesign on InVision Freehand
For 1UHub 2.0, there was an existing style guide that I used throughout prototyping. With my teammate’s help, we were able to carry out these designs to design the feature. Likewise, the assistant product owner clarified the investment processes that we needed to know and include in the employee's dashboard. For the graph, it comes from an API currently being used for the investment program. Unlike the previous Contribution History of 1UHub, the redesign consists of each contribution’s status, whether it is still for processing or successfully purchased for their convenience.
As the app wanted to highlight the feature and other employee benefits that they may avail, an accompanying carousel was included in the employee’s “My Finance” tab to encourage them to avail of these benefits.
My Finance tab on the app
Retirement Pension Fund dashboard
For other screens, such as where employees input their contribution amount, I still would have preferred if employees typed their amount instead of relying on a slider. However, key stakeholders opted for the slider option for this screen as they saw it as a key element from the initial designs.
Screen for consent form
Screen for entering a contribution
Screen for success prompt in making a contribution
In addition to the Retirement Pension Fund screens, I also designed the monthly statement of the program to be received by employees via email. The previous monthly statement was very straightforward in terms of content. Here, I felt the highlight color was too harsh for the numbers. For the redesign, I opted for a more exciting frame that looked more like a receipt. Since this was to be sent to employees personally, I added a short greeting that thanked the employee for participating in the program before giving their monthly summary.
Approved redesign for the monthly statement
Approved redesign for the monthly statement
1UHub also gives employees the experience of being recognized for their hard work through the app. For this feature, the previous intern started on the initial concepts for the screens before I was assigned to them. These ideas helped me flesh out the feature further in redesigning them. For the "My Rewards and Recognition" tab, employees can easily see their recent recognitions made by their managers. Likewise, they may see their current recognition points, which they may exchange for rewards.
Line managers recognize employees by first selecting the type of recognition before being brought to a list of employees. Here, I decided to organize the list of employees by units and added the option to select all employees in a particular unit in the company. The list was initially alphabetically sorted, but it was later seen as inconvenient to search for employees through this order since most managers recognize the employees they directly work with.
User flow for employee viewing a recognition
Employees receive recognition from their managers and instantly see them if they tap the "My Recognitions" card. This will redirect them to the screen that shows the standard recognition letter from the bank, which I formatted. I decided to include the manager’s message on top of the screen, which shows a preview of their message. To make the manager’s message distinguishable from the bank’s letter, I added their picture, and for the use case that their message is long, the employee may read more of it by tapping the "See more" button.
User flow for employee viewing a recognition
To entice employees to earn more points, we made tiers that have additional corresponding benefits. I designed the cards for these tiers, making them dynamic in color depending on the number of points earned. As there were three tiers: Bronze, Silver, and Gold, the design for each complemented the tier level. Employees may view the points system to see how many more points they need to unlock the next tier along with the progress bars.
User flow for employee viewing the rewards points system
Using these points, employees may avail of rewards such as gift certificates from Ayala Cinema in partnership with Giftaway Philippines. For these screens, since there was a wide variety of gift certificates to choose from, we categorized them into different experiences that were popular for UnionBankers. We used a slide to confirm button to prevent any unintentional purchases from happening since this was common. Lastly, the details on the success prompt had a receipt theme to accompany the gift certificate.
User flow for an employee redeeming rewards
This internship was fast-paced, with several screens being needed daily to develop and be tested as soon as possible. As a basis for the design team’s work, highly detailed user stories were given based on the research conducted by the product team. What helped in the process was the design system of 1UHub that was already developed. Likewise, several features were already present in 1UHub 1.0, which sped up the process. After the developers' work, we had to audit the screens and approve them. With the work being very fast-paced for a team of two, there wasn’t enough time to wireframe everything, and I didn’t have the luxury to conduct usability tests with my designs after the product team's approval.
It took a few days before I was familiar with the style guide of 1UHub after being oriented. Later on, it helped save me countless hours to establish consistency since there were existing guidelines for most design elements needed. Whether it was in typography or drop shadows, it was easier not having to worry about specific standards needed as they were already established.
As this was my second internship in the field, I expected to have a balanced opportunity to do user research and design. However, due to the timeline given and the fact that we were only two designers, no usability tests were done. The procedure was that the product team validated the screens before undergoing development. It was challenging to create user-centered designs when I was not given a chance to research in-depth.
The opportunity was fruitful, and I got to hone my Figma skills throughout my stay, but based on the responsibilities, it was more centered around UI design instead. I finally saw how vital the two disciplines of UI and UX design were not just for product success but also on the designer's side in validating decisions throughout development. Still, I stand by the view that it’s a designers' role to bridge the client’s vision and, most especially, the users' needs to form a holistic design solution.
I would have focused on iterating my designs for one particular feature if permitted. Preferably, I would have requested to spend more time validating the methods through more research and user testings instead of just having them approved by the product team, which was the usual process.
Screens were validated through different departments whose HR processes were being streamlined in the application. However, I would have preferred to do testings with users who were not involved in the project with techniques such as A/B testing since one of the selling points of 1UHub was an enhancement in UI.
Check out my other works below ⬇️
Full-time, Product Design
Full-time, Product Design
Internship, UX Research, UI/UX
Designed and built by Arvin Almario
