Re-Design of Online Bind
Role
UI/UX Lead
Project Management
My Responsibilities
Setting up Explorative Research
Competitive, Heuristics & Comparative Analysis
Designing User flows
Facilitating Workshops
Defining Persona's
Creating Low-fi and Hi-fi Prototypes
Validation Research
Creating hi-fi Designs
Design hand-off and Design governance
Timeline
(March - August ) 2019
Tools
Adode XD, Photoshop, Illustrator, Miro Board,
MS Teams
Team Size
1 UX, 1 BA, 1 SME
Target Users
General Public (Age 18+)
Form Factor
Problem Overview
MAPFRE Insurance provides a full range of insurance products, including coverage for automobiles, homes, motorcycles, watercraft and businesses, as well as term life insurance. The largest private passenger automobile insurer, homeowners’ insurer and commercial automobile insurer in Massachusetts.
However their designs were all outdated in their legacy systems and it had a serious impact ion their Online business conversions, Usability and Customer satisfaction. Based on their internal surveys, they had identified a set of pain points in their existing applications specially on the Online Binds and it needs urgent resolution to improve overall performance. Hence MAPFRE management decided to go for a complete redesign of their application matching to the current technology & Design trends adhering to latest accessibility standards for maximum usability.
The Challenge
The client knew the problem but didn’t fully know the solution. They were seasoned in the car insurance industry, from developers through to risk-setters and wanted to start fresh. My first challenge was to deeply understand the problem and work out how to solve it, together.
Hard deadline
With an insurance convention in America fast approaching, the client didn’t want to miss a key opportunity to present their product to potential investors. This shaped which services to provide to the client. Being lean was key. We had to approach it iteratively and cut out complexity.
The Approach
Based on the above requirements a high level Ux approach plan was envisioned to make sure all the necessary steps are done before arriving to the proposed solutions.
#1 Discovery
In this phase myself and the clients got to know each other and conducted in-depth research. I identified the business problems, its objectives and cleints expectations. I also studied the market, analysed competitions and figured out users' needs and pain points.
Workshops
Workshops
Workshops
I started with a series of regular team discussions and workshops with SMEs and stakeholders to better understand business requirements, gather existing stakeholder knowledge, current limitations, expectations and create consensus on plans and priorities for a product, its direction and key milestones.The workshops accelerated progress on the project. Getting everyone in the room at the same time meant we didn’t need endless meetings or calls. Gathering technical, legal, risk, design, analysts, and insurance experts all together meant we were all on the same page from the off.
Competitive & Comparative Analysis
To better understanding the industry and how the insurance providers are attempting to communicate with their users, I conducted a competitor analysis on few of our direct competitors and a few of other competitors. Basically evaluating them to better understand their product offerings and intended customer base. Special attention was given to the types of policies offered, online purchase flows, their mobile/tablet experience, and their “Request a quote” features.
Observations
-
Most companies offer resources to help customers, like calculators, insurance glossary, comparison tools and blog articles;
-
Pros of buying insurance online: lower premiums; easy comparison; convenience; less paperwork; no miss-selling;
-
Cons of buying insurance online: lack of knowledge about the product; lack of customization; online scams; poor customer assistance.
-
Users don’t understand what is included in the coverage until they need to use it.
-
Insurance providers’ websites typically didn’t work well on users’ mobile devices.
Heuristic Evaluation
For this project, heuristics were used focusing on the core functionalities present in existing MAPFRE websites. The goal of this evaluation was to identify major usability flaws within the existing interface through the application of heuristics:
Contextual User Interviews
Conducting interviews with potential users is a great research method because they provide a source for qualitative data. From these interviews we can gain insight into the users needs, pain points, and how they generally perform tasks.
Interview Summary
I interviewed five participants ranging from their 18’s to late 60’s and who had some experience of purchasing some form of online insurance packages within the past 2 years. Four of the participants were male and one participant was a female. Also, four of the participants were working professionals but one is recently retired.
Needs
-
Users need information to be easily understandable.
-
When getting a quote users need to be able to easily compare all the different policies and see the differentiating features.
-
Users need to be able to get answers to questions quickly.
Frustrations
-
Actions by their provider that lead the user to lose trust in said provider
-
Encountering insurance terms or industry jargon that they don’t understand
-
Most users find it difficult to understand the financial implications of different policies.
Goals
-
Users want to know that the coverage provided in a specific quote is going to cover all their needs.
-
Get the best possible coverage for the lowest monthly premium.
-
Get a breakdown of premiums and deductible so they know what is exactly covered and what is not.
-
Users want to be able to get discounts for choosing a bundle through one company
Motivations
-
A simple claims process
-
Mobile Friendly Applications
-
Finding clear & transparent informations
-
Discount bundles and offers
Online Research Findings
After doing research on Grubhub, we realized we needed to know more about POS systems: How they’re purchased, how they function, common pain points, common features and more. It would be a huge challenge, however, given our almost non-existent access to these closed systems.
For our competitive and comparative analysis, we examined seven different point-of-sale (POS) offerings, such as Square, Revel Systems, ShopKeep and TouchBistro. Through feature comparison, we tabulated the features of each. However, because of our limited access to these closed systems, contextual inquiry at several restaurants became a necessity to better understand how users — in this case, servers, hostesses, managers and other restaurant staff — approached them.
Setting Project Goals
Based on the findings, inferences and requirement prioritisation from the stakeholders & POs, high level business, user and technical goals were defined.
Business Goals
User Goals
Technical Goals
#2 Strategy
This is the phase we worked on setting up correct goals, determine product features and estimate the scope of work that will provide an optimal business impact. We conducted thorough Brainstorming, user research, including developing personas, user stories, an empathy map, and a user journey map.
Understanding the User Groups & Defining Personas
With the research findings, I identified the beliefs, pain points and most common behaviours among potential users when planning to purchase Auto insurance policies, and used an empathy map to gather similar feelings and thoughts together. With that in mind, I created a user persona.
Empathy Mapping
My final step in the research process was to create an empathy map. Here, I used the data from my interviews to map what Jamie might think and feel when shopping for online Auto-insurance packages. The fact that these simple post-it notes originated from my user interviews really helped me to ensure that future design decisions were in fact based on valid evidence and not just wild assumptions.
MoSCoW Mappings
The empathise stage helped identify the framework to define the project goals which helped strike a balance between business, user and technical goals. This step brought clarity and cohesiveness in the design process and helped connect the research to the process of design.
I used the users’ needs, project goals and my secondary & market research to identify features to include in my site. Sat with Project managers, Development lead, and Business analysts and segregated by priority into - Must have, should have, Could have and can have later categories. It was important to outline the highest priority features in a product feature roadmap. This helped me ensure that no feature was forgotten.
Information Architecture & Site Map
Once personas and key features had been decided on, an open card sorting exercise was conducted to inform the construction of a site map and determine how various products and policies would be grouped together on the site.
Participants were given index cards with 25 distinct insurance products and asked to sort them into whatever categories they saw fit. Once complete, they then named the categories based on what they perceived to be the shared characteristics of the products in that category. The results were compiled and analyzed before being translated into a site map.
Task Flow
In order to figure out the site pages that the user might navigate through and the actions they may take, I decided to create a task flow.Carefully considering how the user might achieve this aim helped me to consider the obstacles she might come across. I then explored these in greater depth in the following slide.
User flow
Using my task flow as a springboard, I considered Jamie's ultimate goal, along with his frustrations to create an extensive user flow map that I felt would accurately illustrate his full journey through MAPFRE's website to get a Auto Bind Quote.
I went into great depth to consider all the blockages he might encounter along the way, and what MAPFRE’s website could offer to counteract these to create a quote.
Looking back on this project, I certainly felt that the extra time spent considering all possible blockages allowed me to design a more cohesive end product for the user.
#3 Design
Finally, we are ready to move onto design. Leveraging research data and project objectives, we build the most comforting, engaging and desirable experience for users, helping them achieve their goals as quickly as possible with minimum fuss.
Branding Guidlines & Accessibility Considerations
Clients had their own style guides hence all the wireframes that I designed were in alignment with the set guidelines to ensure maximum component reusability and smoother Ui development process. Also in terms of accessibility, I made sure the layout, reading order and navigations etc all passed the minimum required WCAG guidelines.
Solution Exploration
As the streamlined and integrated flow became more and more clear, we began sketching wireframe layouts of the new solution. The idea was to accommodate large data sets in the best possible layout for users to perform their activity efficiently. First we defined possible layouts and did an analysis to find which layout wound best suit our requirement.
Layout 1
Layout 2
Layout 3
Anatomy of UI
I started working on a few key screens in low-fidelity to find the best solution in terms of usability and scalability. After testing and refining, the overall layout started to shape into the unified structure that can be applied for different types of users and their use cases. Later the responsive versions of the same also were designed to aid UI development.
#4 Build
After finishing the user interface design, the next step was to make a Hi-fi prototype so that the design can be tested before the actual development starts.
Final Outcome
There is a strong trend of reducing complexities in design. This works in consumer apps with single and simpler goals, but when you design for enterprise products, not always you can (and should) do it. We built a product for a specific audience that values functionality over the look and feel, has certain expectations and goals.
Managing a small agile team allowed me to move faster without noticeable compromises either on the design or tech side. We managed to introduce a significant amount of improvements compared to what the industry operates with today. At times, there were hundreds of challenges building certain elements that fall under industry regulations in such a short time.
Before and After
Many usability enhancements were made in the new solutions provided for better customer experience. One of the prominent suggestion recommended was the wizard layout proposal for quote creation form. Earlier the data captured in the form was less organised, the form had a lengthy layout and users where not having any idea about the current progress nor the context in which informations were captured. All those issues were rectified in the new solution provided.
#5 Launch & Learn
The design is a constantly evolving and improving process thus cannot be 'completely done'. Once the product is released and users start using it, we get a great opportunity to review its performance, aggregate feedback and improve based on user needs and business goals. We followed the same process to evolve the product even better.
Usability Testing
Now that I had created my first set of prototypes, it was time to put the user interface to the test to find out if the design has any usability issues. Although the prototype had limited functionality, test participants would be able to grasp the structure of each screen and identify any issues that might impact the user experience when completing a requested task.
Before conducting any tests however, I established a set of test objectives that I believed would offer a clear picture as to the success of my prototype:
-
Understand the user’s first impressions of MAPFRE homepage
-
Examine the ease at which the user is able to navigate to the ‘Get a Auto Quote’ section and then through the final quotation form
-
Identify any frustrations the user experienced
Methodology
I interviewed 4 participants over video call who undertook tasks related to these objectives whilst they shared their screen. I then documented my findings in my affinity map.
Key Insights
-
I was pleased to note that all all participants were able to complete the tasks I had set them and without any errors.
-
UI I had created for the homepage denoted a sense of trust.
-
It was also that observed some users getting stuck in the Auto Quote creation process, slowed down by too many questions about preferences and other informations.
Outcome
-
100% completion rate
-
100% error-free rate
Affinity Mapping
I put together a prototype to test and find out if the design has any usability issues. Although the prototype had limited functionality, test participants would be able to grasp the structure of each screen and identify any issues that might impact the user experience.
Conclusion
The results from the usability testing confirmed that my prototype was in fact usable and that users experienced few frustrations when navigating through the prototype.I learned usability testing is vital in discovering areas that are inconsistent with user expectations and working to correct these inconsistencies.
Long-term Goals
-
Make some functional changes to the app to improve user experience.
-
Have more testimonials written, preferably accompanied with photos of customers.
What I Learned
I learned that, as a user experience designer, you can’t solve every problem in one project. It’s counterproductive. Exponentially, your project shouldn’t, nor can it, solve everyone’s problems. It can be easy to lose focus when there are so many problems to solve, but it’s important to solve the ones you can that are most essential with the resources at your disposal.
#6 UI Devlopment Support
Once the wireframe sign-off from stakeholders was obtained the designs where handed over to the development team building the MVP. The development was divided into three releases based on user story prioritisation. After each release the MVP was tested and the feedback was used again to enhance the next release build.
Coordination with Developers
A good deal of time was spent working on a design integration strategy with the engineering team. We devised a phased approach that would have minimal impact on the work in progress, and allow everyone to become familiarized with the Fabric design system. Some of the main production support activities are-
-
Supporting user stories in Azure DevOps by providing relevant wireframes, acceptance criteria and prototype link references.
-
Make custom wireframes on the fly for special scenarios to speed by engineering process with out delay.
-
Participate in build meeting to supervise the build progress
-
Test build to validate the user story alignment with the UX guidelines and interactions.
Key Highlights of Final Delivered Solution
-
Quick entry using zip code
-
Auto filling of PO details based on zip code
-
Sequential data capture from users – wizard approach for forms.
-
Live Discount table prompting user to avail more discounts
-
Responsive Design layout.
-
Implementation of latest branding guidelines.
Tinton made the user experience, customer journey and graphical design processes very straightforward for us, after a detailed face-to-face session he was able to deliver wireframes, interactive mockups and assets quickly and autonomously. He worked as if he was part of the team, treating our problems as his own and helped us come up with solutions that would work well for the end-users
Keerthi Chakrvorthi
Associate Director
Thank you for providing Tinton for the B2C redesign work. The work went well and got wonderful responses from client manager and BA’s. Tinton’s effort was significant on this and without his involvement it was not possible. Thank you once again.
Joice K Jose
Manager Projects
Hi Team,
Congratulations all for another successful release! It is because of the combined effort of entire team we were able to meet the stringent dead line for June release. Keep up the good work in future release as well.
Bijoy Joseph
Onsite Manager Projects
Congratulations team…
It was mammoth task for OH and WA team to integrate with number of new interfaces and rating services. Team did splendid job in coordinating with CGI team to get this done time. Good team work overall.
John Linto
Senior Project Manager
Client Feedback
Thank you for your time.