EasyClaims SG
A client project to design a portal to make HR matters easier
![3 Phones.png](https://static.wixstatic.com/media/c99fdc_b232364725e84c5287d524989b80880a~mv2_d_2543_2016_s_2.png/v1/fill/w_704,h_560,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/3%20Phones.png)
Intended for SMEs, EasyClaims was made to help employees do their claims in a simpler way. Using OCR, the portal would identify the relevant areas important and fill in all the text fields. Like this, users would not have to go to the trouble of putting in all the numerous details i.e date, time, category.
My groupmates, Camilla, Yiu Hei and Kurien, and me, were to design it in the timeframe of three weeks. With this in mind, we had the kickoff meeting with our client, Mr David Ho, setting the scope of the project early on, so that we would not incur design debt or find ourselves spread too thin over trying to do too many functions and features of the portal.
Project Scope
To help HR reduce time spent on benefits administration and records management
Redesign the user experience to make it easier and friendlier to use
Gamification of
the portal
Well-designed elements based on best practices from UI/UX Designers
Self-explanatory design for users to easily navigate without assistance
Real world usability testing and feedback
SME & Flexible Benefits Focused
UX Process
Competitor Analysis
Interview Results
Affinity Mapping
Problem Statement
The Persona
Design Decisions
Feature Prioritization
Lo-Fi Prototype
Pinup Feedback
Usability Testing
Icon Design
Hi-Fi Prototype
Reflection
With this, we moved to interview people to find their user goals when it came to doing claims, as well as doing an analysis of the portal using a content audit and researching industry competitors.
Competitor Analysis
![12345.png](https://static.wixstatic.com/media/c99fdc_c9f3b5e107284c4597c44ee193e5ae4c~mv2.png/v1/fill/w_944,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/12345.png)
From the numerous competitors, we found that they made benefits easily trackable and the interface was designed to be easily understood even by older colleagues who were not as tech-savvy.
With simple color schemes and aesthetics, it also added simple wording so that no help was needed and users easily understood how to navigate the applications. It was also convenient to do quick searches to find details and to check their history of claims for the years before.
Interview Results
![Research 1.png](https://static.wixstatic.com/media/c99fdc_0335d51392434a78bbc4c7aee3582403~mv2.png/v1/fill/w_918,h_174,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Research%201.png)
Accessibility
-
From anywhere, any device
Saves Time
Visibility
-
Guidelines, status of claims
-
Easy to learn
-
Autosaves incomplete forms
-
No auto-logout
-
Immediate human aid if solution is required
-
Allows taking photos for documents
-
Editing rejected claims without starting over again
Notifications
-
Claim status updates
These were all pointers for us to take note when designing the portal - mainly being easy to understand regardless, clear details of the benefits and policies, and a convenient way to track the updates of the claims.
The portal would be used by 3 groups of people - employees of SMEs, insurance brokers, and HR departments. But our main focus, in conclusion, would be the employees, since they were the majority of the users who would work with the app.
![3 Groups.png](https://static.wixstatic.com/media/c99fdc_a5bb51e414e946efbc5ff422302c9676~mv2.png/v1/fill/w_691,h_160,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/3%20Groups.png)
Employees
Brokers
HR Departments
We then put the findings out and moved to analyze behaviours, to see common points were present in every part of our research. This ranged from where people would be most likely to use the portal, when was the ideal time, to other points like how diverse the claims would be, from traditional Chinese medicine, to taxi fares in travelling expenses or even discounts and offers for things like gym benefits or yoga classes.
![Screenshot_1.png](https://static.wixstatic.com/media/c99fdc_e6305bf0924644de9cfd840397d258b7~mv2.png/v1/fill/w_752,h_493,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_1.png)
With all the data from our research and interviews, we could then identify the overarching problem, and then from there begin to build up the app to address the issues. Now, we formulated our problem statement.
SME employees making claims need a way to streamline the claiming process because time is wasted looking for and ensuring guidelines are met, and entering accurate data.
Also utilizing the data from the affinity mapping and research, we also could create our persona, called, Dave Lee, which would align all our efforts in the designing. We also created a journey map, seeing how he would go about the portal, as well as the service blueprint to find out about both the needs of the broker and company, as well as any other problems Dave would encounter as he went through the process from start to end.
![Screenshot_5.png](https://static.wixstatic.com/media/c99fdc_d495f2b7ce6544c18224cf781be2e927~mv2.png/v1/fill/w_933,h_384,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_5.png)
![Screenshot_8.png](https://static.wixstatic.com/media/c99fdc_d21aedf04fd94a838d5be1bb75e16279~mv2_d_2480_2269_s_2.png/v1/fill/w_402,h_368,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_8.png)
![Screenshot_7.png](https://static.wixstatic.com/media/c99fdc_95e1f4c162684aa8a080b52b8e17236a~mv2.png/v1/fill/w_461,h_205,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_7.png)
![Screenshot_6.png](https://static.wixstatic.com/media/c99fdc_05135894e9b84d55827cfd9cac151efe~mv2.png/v1/fill/w_462,h_205,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_6.png)
Design Decisions
Before we got down to making the prototype, we also took care to be mindful of certain extra restrictions when bouncing ideas off of each other. A few were based of our own experiences, and other points were thought of after looking at the research.
-
Human touchpoint when unclear and for intimate cases
-
Universal platform for all types of admin activities (claims, leaves etc.)
-
No auto logout
-
No time restriction
-
Allows taking picture of receipts
-
Versatility - just needed internet access
The mobile version needed us to make sure to account for smaller screen sizes as some office workers might have earlier versions of a phone, and it was to be more touch oriented plus the context of use.
Feature Prioritization
This was still a three week project and we wanted to make sure we would be able to finish what we set out to do. There were many features to take into account to fully design the app to make it easy to use but we also did not want to find ourselves with insufficient time to handle everything.
![Feature Prioritisation.jpg](https://static.wixstatic.com/media/c99fdc_9c1c3c1a28014bb284a309a7fc964ce6~mv2_d_5436_3520_s_4_2.jpg/v1/fill/w_890,h_576,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Feature%20Prioritisation.jpg)
Prototyping
We wanted to prioritize the elements within the interface and thus did mobile first, so that we would only deal with essentials before moving on to the larger space for desktop versions.
![Screenshot_13.png](https://static.wixstatic.com/media/c99fdc_7dcc77ed229f4e54bfbbb0f0a68e03cd~mv2.png/v1/fill/w_770,h_576,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_13.png)
![Screenshot_12.png](https://static.wixstatic.com/media/c99fdc_75605ca02c6244738000887373f0b5af~mv2.png/v1/fill/w_787,h_592,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_12.png)
Then we moved it to Adobe XD
![Screenshot_11.png](https://static.wixstatic.com/media/c99fdc_e15dc4a2bb0e4a0c9d3ee30afc80cb48~mv2.png/v1/crop/x_0,y_107,w_1280,h_837/fill/w_927,h_606,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_11.png)
I handled the copy of the portal, making sure that the wordings were easy to understand. While putting Lorem Ipsum inside the prototype would also have been a viable choice, we would also need to test this on users, so they would not understand why the text was gibberish and nonsensical. Also by putting in good copy early, it would allow for us to worry less about the amount of actual text needed, in case the size of the text box would affect the interface layout.
Pinup Feedback
We put it to the first round of testing to get feedback on the new additions with this first iteration. This also tied in with a pinup session where people would take a look at it and add their feedback onto post-it notes. The idea behind this was to have people without any prior knowledge and no priming to try the portal out. If someone random picked up the prototype and could understand it easily, it would also double as validation that the interface was improved to a great extent.
![Screenshot_14.png](https://static.wixstatic.com/media/c99fdc_1e370140a7944d20aa0de3e8c226095b~mv2.png/v1/fill/w_872,h_343,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_14.png)
We organized the feedback into various groups.
Mobile - Glows
-
Clearly labelled
-
Easy to navigate
-
Grouping of claims to approved/declined is good
-
Good claims system
-
Good use of space
-
Claims progress bar is very nice
Mobile - Grows
-
Menu bar should be the full length of the mobile
-
Achievements are confusing
-
Play button on the camera screen is unclear
-
Back button feels unneeded
-
There should be a way to send push notifications
-
Pending and Approved buttons are too small
-
Receipts of the same type should be able to be grouped together in a claim form
Desktop - Glows
-
Page looks very clean
-
Good flow
-
Good UI Hierarchy
-
Claims Summary is very useful in showing claims balance
Desktop - Grows
-
Could have a bigger header for main action
-
When uploading images the wording should say click and not tap
-
Some tutorial text would help when submitting forms
-
Text field should say [Receipt Number] instead of a blank box
-
Make a claim could also be shown as a (+) on main page
-
Call-to-Action should be clearer on main page
-
Design is inconsistent
-
Profile page has no point of contact
-
After claim submission, there’s no prompt on what to do next
-
i.e go back to main page
-
No back button
-
Confused at overlays of textboxes
-
Would like to also be able to make claims even at the profile page
-
Steps 2 and 3 of the process are confusing
-
Purpose of badges are unclear
The glows from the session were key in affirming our design choices, and now we would work on improving the next iteration to solve the issues that arose from the test. This next phase would be a more in-depth usability test, where we would add tasks in as well as time how long they would take to finish the objectives.
We made a point that with each users, we would shuffle about which version they would use, desktop or mobile first. This way, all the feedback would be more balanced.
![Screenshot_17.png](https://static.wixstatic.com/media/c99fdc_dc0ae207fdff4ebfa9f2f118abbc9607~mv2.png/v1/fill/w_377,h_302,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_17.png)
![Screenshot_16.png](https://static.wixstatic.com/media/c99fdc_b8103f6bdab84a738c6e091024206ed1~mv2.png/v1/fill/w_377,h_302,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_16.png)
Usability Testing
From here on, we would work on the iteration, and make a more in-depth usability test with tasks to be done, as well as to time the users on how long each objective took. We also would ask them to give ratings and from there, also inquire about their rationale for giving the score.
So, we went about putting the prototype to be tested by 7 people, 4 of them being employees and 3 of them in the HR department.
You recently purchased a pair of prescription glasses and are wondering if it can be claimed under the flexible benefits scheme offered by your company.
Feel free to explore the portal to find out the information you need.
The glasses cost $95.00.
(For mobile version) Assuming you have the receipt for the glasses with you
OR
(For desktop version) Assuming you have the picture of the receipt in the computer,
Proceed to make the claim.
POP-UP: Achievement unlocked. (Observe if the participant is persuaded to click on “See achievements”.
(For mobile version): Is participant persuaded to click “Leaderboard”?)
Metrics to be used are:
-
Ease of use
-
Navigation
-
Learnability
-
Aesthetics
-
Information organization
-
What did you like most?
-
What did you like least?
-
Recommendations for improvement?
We compiled the results, and arranged them according to priority in needing to be changed. Now with new feedback on our newest version, we set out to solve the issues presented.
![Screenshot_18.png](https://static.wixstatic.com/media/c99fdc_24ff52613811436aaac2428e7b852a59~mv2.png/v1/fill/w_816,h_407,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_18.png)
![Screenshot_19.png](https://static.wixstatic.com/media/c99fdc_7b218361af9945c0a6f7c4583d44bfc4~mv2.png/v1/fill/w_811,h_432,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_19.png)
We found that people had an aversion to the gamification aspect, where the leaderboards would show how much they had claimed. They mentioned how it was considered as personal information and that it would look bad on them if it was readily available to anyone. As such, we changed it into points, and HR could reward points on their own criteria other than claims. There was also the issue of the colors used and we changed it to make it fit with the fun tone of the portal.
Icon Design
To really add detail to the prototype, I handled the icons and badges, making sure they were easy to understand and also visually appealing. Looking at several references for style, I went about using Illustrator to design.
![Screenshot_24.png](https://static.wixstatic.com/media/c99fdc_2a37d04f5ec54c08ab05bcfbeec2c49d~mv2.png/v1/fill/w_714,h_720,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_24.png)
Because the badges were part of the gamification, I looked to make them fit the style of casual games as research showed that a simplified, cartoony feel to the artwork was the most appealing. The buttons were also not made entirely black, taking into consideration that some office workers already had eye strain from seeing black text on white screens, so the portal would have greyish text to reduce the strain.
Hi-Fi Iteration
![Screenshot_23.png](https://static.wixstatic.com/media/c99fdc_ea4fe0c00c6b4a8997296b33528cb687~mv2_d_2006_1218_s_2.png/v1/crop/x_103,y_40,w_1823,h_1151/fill/w_941,h_594,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_23.png)
![Screenshot_22.png](https://static.wixstatic.com/media/c99fdc_0ef29a0abfc74ce6a2bd5705dad54ceb~mv2.png/v1/crop/x_103,y_47,w_1169,h_772/fill/w_872,h_576,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_22.png)
One interesting feedback given by a user was how novel and different the portal looked. Compared to bigger apps used by MNCs, the fresh colors and style made it look a lot more attractive.
We also decided to add a bit of animations as well to give the prototype a bit of polish. Even though it was not essential to the goals we set to do, it enhanced the user's experience and they enjoyed using the portal because of the visual feedback it gave.
Looking back, this was also my first experience working with a real client, giving me a feel of how to properly interact and discuss things with them. My group and I handled the scope of it well, and managed to also convince the client to keep within what was set and also justified our need for research. This was quite a fulfilling project to do, and it really allowed us to see into the thoughts and mental perceptions that users had when doing claims.
We knew that claims were essential, but it didn't have to be boring, so the copy was turned to be more conversational, yet also kept serious as this concerned sensitive data like health. The more common comments from tests also noted that the app, though good in doing its functions we made it to do, was only scratching the surface of the capabilities it was capable of. There was still a lot that could be done, and some future steps were put in for the client.
![Screenshot_25.png](https://static.wixstatic.com/media/c99fdc_fb0d6944db124840ae5dc74aa9331057~mv2.png/v1/fill/w_774,h_446,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot_25.png)
I'm still interested in learning more about understanding people's thoughts and behaviour patterns, and this really helped us to all build more empathy to allow us to make the designs more accessible. Maybe someday, for apps such as this, we could even localize it in several languages as well. It was quite a journey for us too, travelling to other offices to meet with people, hearing the points from those already years ahead in the corporate world.
I'm still learning more on the UX process, deepening my knowledge and understanding of people. There's still a lot for me to learn, and I'm more than eager to try. But like all projects, I also would like to commend my groupmates once more, Kurien, Camilla and Yiu Hei for this. The success of this project was a combined effort from us all.
Check the link below to try the mobile prototype for yourself!