YuLife is a life insurance company that inspires life. It helps to provide companies around the world with Group Life, Critical Illness and Group Income Protection cover amongst other insurances, as well as access to the YuLife App. The App helps to encourage users to take walks, cycle and meditate, all in exchange for rewards from big brands.
I joined YuLife in 2019 because I believed the company’s philosophy and vision. It was in an industry I’d never worked in and I wanted a fresh challenge. I was excited about the prospect of being able to design a first true first-to-market product which gamified and simplified the outdated and cumbersome experience of buying personal insurance which was thoroughly in need of a revamp.
The company also had admirable leaders which I met with and trusted in. Josh Hart, CTO, was an avid gamer and understood the phycology of gamifying experiences, whilst Sammy Rubin, CEO, had previously founded insurance company Vitality and wanted to build something even more user friendly and sticky. Their vision to help everyone become a better version of themselves was also something I also wholeheartedly believed in.
The main project I worked on whilst at YuLife was the design of the YuScreen, a section in the App where users can create their unique Yumoji avatars as well as equipping them with armour which corresponded to different types of insurance products. I worked as the Product Design Lead alongside another Product Designer, Data Researcher, UX Designer and Graphic Designer.
We successfully launched the YuScreen in 2020 which has gone on to become a major contributor to the company securing $120 million in Series C funding. It has drastically helped to grow the number of lives YuLife insure, bringing in more partnership opportunities with insurance companies such as Bupa, AIG and Aviva. The App and YuScreen experience has received positive feedback, from data insights reports, App Store and Trustpilot reviews. In 2022, YuLife launched overseas in the United States with plans to continue and expand, setting a new standard in user experience and service in the insurance and wellbeing sector.
The first thing the design team did when onboarded onto the project was to help the company define their expectation. I got together with our CTO, CEO, Head of Product and Data Researcher to help put together a roadmap of what we could achieve within our launch window. To incrementally improve on the product, we decided to role out each feature in Beta to be tested with our users before release. We also staggered the release of each feature to give us time for changes in user experience and design, giving us more buffer between development.
I worked on the YuScreen Landing Screen first as this was the entry path for users to unlock and create their Yumoji avatar as well allowing them to purchase and view more information about insurance products.
We decided to approach the user experience in a gamified way, whereby the user interface would take inspiration from traditional role-playing games. Users were able to equip armour for their Yumoji which symbolised the form of insurance purchased. Insurance products could be purchased in different tiers which allowed less or more cover (Common, Rare & Legendary), which would be reflected in the armour.
Our UX Designer worked closely with our insurance partner at the time to surface any information which a user would need for them to make a purchase. We set out usability tests using initial wireframes on both Maze and Usability Hub to insure users understood the principals we were aiming towards. With this feedback, I we were able to develop the initial designs further in order to improve the user understanding and usability of the screens.
After potential improvements were discovered from our testing, I started on the UI design for the YuScreen. Based on these insights from our testing, I decided to include an onboarding flow which gave the user more information about this new feature as well as including more detail in regards to how buying more insurance products increases the users “YuCoin Power”, which allowed them to earn more YuCoin whilst taking part in walking, cycling and mindful activities in-App.
It was also at this stage where I began to direct our Graphic Designer to begin designing assets we needed for the UI, such as armour and the Yumoji avatar. Together with the rest of the team, I organised various brainstorming sessions where we discussed what these assets could look like and what art direction we wanted to take. Everything had to look desirable and we really wanted different tiers of armour to stand out from one another. The graphics also had to fit into the overall style of the different worlds the App is set it, such as the desert, ocean, forest and. We used games adventure games such as Zelda, World of Warcraft and Assassins Creed as inspiration as we thought they portrayed this element of desirability in their item management menus. During the lifecycle of building out the YuScreen, we continually pushed ourselves to improve on the art direction and experimented with different armour designs until we thought we had it right. Multiple versions and mock-ups of the armour can be seen deeper in-to this writeup, with the final version showcased at the end.
Due to the complexity of both the YuScreen and underwriting journeys, documenting interaction in Figma alone was not enough. As YuLife was still a relatively new company at the time who were growing out their design department, I took the initiative and created our own space in the company’s Jira Wiki to document interaction, patterns and functionality.
This also allowed our colleagues in other departments, such as sales and legal, easier access to view the methods in which were selling insurance products within the App. It also gave them a better overal understanding of our App, which helped them in pitching to clients when they were selling the YuLife package as 96% of our user base found the App to be YuLife’s best benefit. Furthermore, I wanted to start emulating Google’s Material design system, whereby guidelines, components and tools were documented to support best practises of user interface design for our App. My ambition was to create a framework which would help make the App experience more consistent, in addition to helping to onboard any new designer we hired along the way.
I designed the Yumoji avatar creator after the YuScreen. By creating an avatar, it unlocked the ability to purchase insurance products which they could then equip. I made a thorough competitor analysis on avatar creation suits and took inspiration from Bitmoji and Facebook when designing the user experience. It was our first measured success in the project, whereby upon release, 87% of our user base had created a Yumoji. We later incorporated Yumojis in other parts of the App which I worked on, including displaying it in a user’s company leader board which measured number of steps taken. I also made several prototypes to showcase the transitions and animations when handing over designs to our developers.
Browse Packages was a screen where a user is taken if they decided to consider purchasing a form of insurance. Before I started designing wireframes, Our UX Designer worked closely with our insurance companies to surface any relevant information which would benefit the user in making their decision. We tested the understanding of this screen through Maze and Usability Hub tests, whereby participants were asked questions regarding the information presented.
It was clear that improvements needed to be made, and I was frequently in contact with our insurer to try and simplify the understanding of this screen. I ended up designing more interactive elements into the user interface, such as payout calculators and comparison modals which, which helped with the user making a decision about which product tier was right for them.
I made several attempts to bring this screen to life in the user interface design, presenting both internally and to our stakeholders for feedback. Our primary goal was to make each product tier stand out from each other to match the desirability factor with the armour. My first attempt was to incorporate the user’s Yumoji in this screen to make the experience seem more personable, but we felt as though we needed to call out the insurance product’s main benefits more. The difference in product tier didn’t seem apparent enough.
In parallel to this, I also investigated how could improve the focus state of the armour itself by using animation to bring more attention to the armour.
In my second attempt, I took inspiration from gaming user interfaces and introduced iconography to display the main benefits and perks of each tier of insurance. The idea was that we would be able to show more of these in each tier, creating a more visual impact to the user. I also explored using colour more to communicate how valuable each tier is.
To verify colour choice, we conducted research to see what users felt as valuable and invaluable colours when presented together.
In one of my later designs, I simplified it further, making it look cleaner. Final designs of this screen are be presented in the Putting It All Together section later in this write-up.
For certain products, an underwriting journey was required for insurers to determine the risks of insuring an individual. Before starting any design work, we brainstormed the key questions we needed to surface.
Our goal for the underwriting journey was for it to be as fun and frictionless as possible. I concepted a first version where our company mascot, Yugi the Giraff, appeared similarly to how a character would appear in a role-playing game.
Upon internally testing the prototype I made, we thought adding both our mascot and a graphic background in all screens added too much noise to compete with the questions displayed and decided to focus on simplifying the experience. We would later re-use Yugi in explainer screens along the underwriting writing journey as we all thought it made for a friendlier and more personable experience. He would act as your guide and point of reference during the user journey.
I made second version, this time including iconography for each of the sections for clearer understanding, in addition to working on animations for question transitions and button presses to make the experience feel more fun and polished.
In the end, I decided to bring Yugi back in these screens in a subtler way, as the internal consensus was most of us still enjoyed the playfulness of the first version but they preferred the simplicity of the second. I improved on this by working closely with our Graphic Designer to theme Yugi in different outfits which corresponded to the type of question he was asking. We also decided to introduce gamification into designs by introducing a progress bar and rewarding users with YuCoin when they complete a section.
Along the development cycle of the underwriting journey, I worked closely with our developers to ensure quality and consistency in the design. From developer feedback, we decided to introduce a mix of both custom and native pickers into the journey in order. I frequently paired up with our developers whenever they had any queries or they would send recorded videos of their development stages for sign off.
Once the user had completed the underwriting journey, status screens were needed to inform them at what stage they were in their application.
I then documented the entire flow in Figma together with our UX Designer, outlining the conditional logic for answering questions in the journey.
I also created a Wiki page detailing the functionality of these screens for handover, which included inserts of input patterns used from our design system.
A payments hub journey was the final step in securing a transaction. I had to consider both scenarios of a user checking out for the first time and amending their payment details after they had bought an insurance product. I worked together with developers to understand more about Stripe (the payments platform they were using) and the different case scenarios which a user might encounter along their journey. I decided to make several prototypes detailing these scenarios to document the user experience. It also allowed the developers to work on each scenario individually during sprints. I also designed custom certificates which outlined policy details for when a user has successfully purchased an insurance product.
We also conducted usability tests on this journey to verify users understood how to troubleshoot any payment issues.
After releasing all these features in Beta which were tested by both internal and external groups of users, we were confident the journey would be both accessible to users and be built to a high quality technically without bugs. From Beta feedback, we strived to improve the interface design along the way whilst staying true to our ambition of building a fun and game-like experience. We used Lookback to record our user testing sessions.
Whilst working on this project, it was paramount that we maintained a sustainable design system to build upon the experience in the future. I worked together with our other Product Designer to help to add to and align the design system.
After the release of the YuScreen, we noticed a significant increase in app engagement rating. YuLife users were now purchasing insurance products which significantly helped the company to secure $120million in their Series C funding. Positive reviews were received for the App experience and the company continues to grow and provide it’s services to hundreds of thousands lives and are now broadening their market overseas in the United States.
