This project explores my experience redesigning a website for an Employment Insurance product within an Insurance company.
Project Overview
Summary
At the beginning of this project, I got hired onto an innovation team within an Insurance company to work on their new Raincheque project as their sole UI/UX Designer. Upon starting, the team had already built an MVP landing page and had finished most of their research so my job was to now improve the existing designs based on feedback from further usability testing. Beyond UX improvements I also had the liberty to improve the appeal of the website and was responsible for establishing a design system to keep everything consistent.
Going into this project, I knew nothing about Employment Insurance so it was a great test to see how much of the website actually makes sense.
My Role
When I started my role as the UI/UX Designer, the company had simultaneously hired a design/dev agency to build out this product so I worked alongside their team on the designs. Being the youngest (the least experienced- I was working with pros) designer on the team, I naturally saw this as a growth opportunity and tried to learn the most I could from the other two more experienced designers. This project was set up in a way where I could derive the most amount of learning from the project, which means we started from the basic design system set up all the way to final refinements working alongside a developer.
Key deliverables
A new design system
Illustrations that are unique to the raincheque brand
Animations to complement the illustrations
A mobile layout for all pages
A simple checkout flow
A website that contrasts the “boring insurance” stigma
Results
The new designs of the website allow the user to:
Easily understand the value of the product
Have a more simplified experience when purchasing insurance
Navigate the site to find a personalized plan based on their income
Have a calm and delightful experience using the product
Design Process
Original Design
Before I got started on any design, I sat alongside the product manager and went through the existent designs to see what needed to be changed based on the feedback she got from user testing. For the most part, the structure of the website was going to stay the same with some new additions to the website. Below you can see a breakdown of what changes we noticed needed to be changed.
Building a design system
With the new changes in mind, we decided to get designing. Since this project was an opportunity for me to learn about the basics of design, I got introduced to the concept of Atomic Design. This was something I had heard of before but had never applied to my design work. Atomic design encourages designers to see UI has components and systems rather than just pages. Building a design system for this project would allow us to stay consistent throughout the website, make it easier for developers to code the website, and lastly allow future enhancements easy and quick as we continuously test and iterate in the market. One major benefit of working on this project was that I had a lot of time to experiment. Before the agency got involved, I had actually already designed the entire new landing page based on the feedback above, but I decided to start from scratch and take a more systematic approach. Things like grids, margins, and components all played a huge role in the new landing page. I also developed a better understanding of how Sketch organizes components which really sped up my workflow.
This was a game-changer exercise for me because for years I had completely neglected the atomic design methodology and now that I learned it, I felt like I truly leveled up as a designer. Working on this and building a style guide really allowed me to speed up my workflow.
New Design
For the new landing page, I wanted to have it structured in a way where it would answer the user’s most important questions first. Here’s how I wanted to order it:
- What is raincheque? This section’s purpose is to introduce the user to the product.
- What’s the difference between Employment Insurance and raincheque? This section would inform the user on how EI works, that it’s provided by the government of Canada and what raincheque would provide on top of the existing EI.
- If I already have EI, why do I need raincheque? Elaborating on the previous section, here, the user would see a with versus without raincheuque scenario to further explain the value of why raincheque is essential. At this point, it should be clear what makes this product unique.
- What’s the cost? Now the user is able to see plans personalized to their annual income with a tiered pricing and payout model.
- Okay, I’m convinced. How does it work? If the user has made it this far, they are intrigued so we can dive into the details of how the product works. This section should be straight to the point and most of the user’s important questions should be answered by this point.
- I want raincheque!!
Keeping this process in mind, here is the newly designed landing page:
Taking the design from the old landing page to a fully developed page took us about 2–3 months. Going from being a solo designer on most projects to being able to bounce off ideas with experienced designers was a great learning experience. Once the designs were completed I sat alongside the developer on the team to make sure that the final product looks identical to what we designed. We also made sure everything met web content accessibility guidelines so everyone can use the product with ease.
Since this was a full website redesign, below I will outline some other pages that were redesigned and how they looked before and after the change.
Purchase Flow
The purchase flow is one of the most important sections of any product. If a user has come this far, they have the intent to purchase the product. This should be a very friction-free experience making it as easy as possible for the user. Based on the user-testing we did, it was clear that there was a lot of friction in the purchase flow. Here are some pain points we noticed:
- The overall flow was too long (initially consisting of 11 individual pages)
- There was no clear indicator of your progress in the flow
- No form of help/ info if the user gets stuck
- The ‘Confirm your Plan’ page was too overwhelming
We started by rethinking some of the questions. What information do we really require from the user, and what’s the best way to ask for this? This allowed us to narrow down the flow from 11 pages to just 6.
Next, we took a look at the overall layout of the purchase flow pages. We noticed that each page was not being utilized in an efficient manner. There was only one page per question, there is a lot of whitespace on the left and right of the question, and it should be more clear for the user wherein the purchase flow they currently are.
Rather than keeping all the information centered we placed it side by side which worked out perfectly because all the information and the fields lie on the top while the CTA’s are towards the bottom. On the top right, we also added a question mark icon which would allow the user to submit a request/question and all also get our contact information to get answers to any questions they might have. Above the title of the section, we added step numbers, so it is obvious to the user wherein the purchase flow they currently are.
Confirm your Plan
Another page in the purchase flow we had to rethink was the “Confirm your Plan” page. Initially, towards the end of the flow, this page would allow the user to review their plan, and give them some important, final information. The problem here is that, if the user has come this far into the flow, they are ready to purchase and this overload of information could possibly deter them from making the purchase. Secondly, if this is important information, they should have these questions answered before they even enter the purchase flow. Questions like “When will I get my payout” and “When will I not get my payout” don’t make sense to exist within a confirm your plan page. Rather, what we decided to do is relocate some of this information partly to the landing page under the large print and other information in the FAQ. These are very specific questions with specific answers that fit perfectly within an FAQ whereas having it on the confirm your plan page would only confuse the user further.
FAQ Page
This section was one of my favorites to work on because although it was one of the most straightforward, there was a lot of room to get creative. Initially, we just had a list of collapsable questions that the user would be able to click on to get the answer. Although this format worked, there were two problems.
First, this collapsable question feature was something we were already utilizing on this website but it looked completely different. So for the sake of consistency, we made sure that this feature looked the same no matter where it was used on the website. Also, the bright purple CTA seemed a bit too jarring so having it white with a plus next to it looked a bit more suitable.
Secondly, the way we had the questions laid out would not work if we added more questions- which did end up happening. Since we were trying to condense the overall content on this site a lot of information got sent over to this page. With so many questions this layout would make it difficult for the user to get their questions answered. To solve this we categorized the questions into four sections so the user would be able to narrow down their search. I wanted to add a little bit of the raincheque flare to this site, so we made raincheque branded icons and animated them to create a more joyful experience.
Conclusion
This entire project spaned around 4–6 months and it was a transformative learning experience for me as a designer. Having mostly worked on fast-paced projects in the past, working on this and being able to take my time with it really allowed me to grow through this experience. Design systems, illustrations, and animations were always things that intrigued my interest and I was able to tackle it with all the support I needed with this project.We were able to build a website that was unique and met the requirements set out by the product owner and executives. We were ready to launch, and a week before launch day, COVID came into full force and the project got put on pause.