OVERVIEW

MAPFRE Agency Portal (MAP) is a web application by MAPFRE, one of the world’s leading insurance providers. I've designed the web and mobile web experiences of MAP, alongside its user interface design process. This product aims to help MAPFRE agencies to see their analtytics data in an understandable language, on a dashboard. In the end, MAP aims to make MAPFRE a preferred brand in a highly-competitive market.
THE CHALLENGE

Crafting the UI & UX of a user-friendly web portal from scratch, which is going to be used for in-company operations with visualizing abstruse analytics data of insurance agencies worldwide.
THE TEAM AND MY ROLE

•  Project Manager
•  UI Designer (Myself)
•  UX Designer
•  Business Analyst
•  In-house Development Teams
USED TOOLS & WORKING PLATFORMS

•  Sketch, InVision, Principle, Zeplin
•  Responsive Web
MY PROCESS
Research
Alongside with the UX designer on this project, we have researched about various web dashboards and analytics platforms, in order to gather the know-how and rise above any bottlenecks we might have on this product journey.

Focus Groups & Stakeholder Meetings
Gathered with the stakeholders in order to fully understand their needs from the product. At least one from each department from MAPFRE had joined our focus groups and stakeholder workshops to gather pain points, input for new features, concepts and ideas.

Pain Points
•  Different needs for stakeholders in different departments
•  Analytics data is very complex to everyday user
•  Product has to be suitable for global launch
•  Rival insurance companies already had similar web portals which created panic and tension

Feature Ideas
•  Creating a design system for the portal
•  Card designs for coherent data charts, graphic elements and key-value tables
•  Page layouts for different use cases such as detail pages
•  Mega-menu navigation with multiple breakpoints
•  Side-menu design for shortcut links
•  Admin panel to communicate with portal users
First Draft & Prototyping
Designed the first drafts and generated prototypes for one-on-one stakeholder meetings in order to gather intel from actual users of the product. I have set up the design system by following Material Design guidelines in order to create reusable design components such as card designs, buttons, visual charts, layout and typography.
First draft of MAP
Iterations
After gathering input from stakeholders, I've begun design iterations and showcased revised components and screens in order to resolve pain points. The iteration process was not painful since the stakeholders respected our design knowledge. I aimed to meet usability standards and did not want to overwhelm the users with complex charts, screaming colors and narrow layouts. Instead, I went for a spacious layout, neutral colors and smooth background shadows.
Even though the stakeholders were happy with the design, there was a necessity of changing the layout in the final stage, because of a lack of prioritization on stakeholders side. 
Iteration stage; an example screenshot showing different usage of bar charts and banners
Final Design
As it could be seen below, the layout needed to be adjusted in order to meet the stakeholders' expectations and I was able to produce high fidelity screens with the usage of structured and reusable user interface elements that I had created in the beginning of the project, so it has accelerated the product design process and we were able to handoff our high fidelity screens to the development teams very quickly.
Final design showing every feature that the stakeholders required from day one
SUMMARY AND LEARNINGS

•  The product design process had taken about 4 months to complete with punctual deliveries. This had enabled development teams to meet their deadlines and therefore the stakeholders were satisfied.
•  Creating a design system from scratch had been a great experience for me. I learned to take a look at the big picture before creating a component, therefore I had more power over my design decisions throughout the product design process.
•  Very happy to have designed an analytics dashboard by visualizing complex data. Having this kind of know-how could help me in the future when I would need to work with data visualization.
CASE STUDY VIDEO
Case study video in courtesy of Commencis
Back to Top