Melissa Chukri Design Portfolio
Meet the Experience Design team
What is Vertafore?
A software company that is building complex enterprise solutions for the insurance industry. If you have insurance, there a good Vertaforechange your agent used our products!
This talented group of Designers has built and championed the value of design within the company over the past 5 years Our efforts have proved effective based on customer satisfaction scores which are drastically higher on all of the applications that our team was involved with. We've also spent the past 18 months building out a robust Standard and Guidelines System to streamline development-designer communication as well as reduce the amounts of design documentation needed.
My Contributions to Vertafore
XD Standards & Guidelines: Developer Persona
NetVU17 - Design Lab
Vertafore Agency Platform
Vertafore Policy Issuance
Next Gen Rating
XD Standards & Guidelines
Vertafore acquired many smaller companies over the past 5 years, with this rapid growth came many different design paradigms and visual languages. To bring cohesion to this diverse portfolio of products, we began the journey to build a unified predictable design system.
Original Design
The first release of the S&G site began with defining and documenting patterns and then building a place to collect these definitions. However, this presentation never gained adoption amongst our development counterparts, because it was not in a language the developers spoke.
​
Understanding the Problem
We took this feedback and started from scratch and redefined the problem we were trying to solve. We interviewed our primary user group (at the time, this was developers) and did a competitive analysis of other style guide systems of other tech companies. We then began to concept our improved interface.
We found that the problem with the original site was the documentation still left the developers "inventing the wheel" repeatedly, and lead to designers to needing to redundantly document common patterns and components. With this understanding, we built a sandbox interface for our components with downloadable illustrative code packages.
The Developer Persona
Developers were our primary user group for the first phase of this project. Collaborating with Developers in their efforts to build a UI framework we created our a Sandbox & Illustrative Code site giving developers intractable documentation to build their new framework from.
Sandbox & Illustrative Code
The site took form, as a collection of interactive components and patterns which empowered developers to "build the wheel" once and contribute this production ready code to their newly forming framework. This tool also gave designers the power to reference the sandbox, reducing their needs to document patterns that had already been established.
AngularJS
Our components are written in Angular which matched with the Development teams who were working on newer products. I am a primary contributor to these code packages, adding patterns such as address validation, growlers, and a select/deselect all checkbox pattern.
​
​
Problem 2:
Now that we had an established tool for our development counterparts, we needed to establish a tool that empowered designers as well. The problem the Design Team had was, we didn't have a unified wireframing/documentation system or library of assets. I then took on the sole responsibility of building out the Designer Persona solution for the Standards and Guidelines system
The Designer Persona
Bringing cohesion to a diverse portfolio of products, these illustrative code packages eliminate redundant design documentation and link to developers tools. In addition to this resource for developers, I've created and implemented a Sketch and Framer Library for the designers to build wireframes & prototypes using the components, and interaction patterns published on the XDS&G site. With the help of Invision's Craft plugin our library is synced via the cloud and the team and their projects automatically receive any updates to our library.
Sketch
I built all our components that had been defined in our live S&G system in Sketch. Utilizing their nested symbols, changes made trickle through to all sub-components. All of the components are pixel perfect to our visual design specs and maintain these ratios when the components are resized. From these basic components, I also built our larger patterns which allowed for full product UI's to be built with only a few components.
Once the library was built to the match the S&G I published the library to the cloud. Then if there are changes or updates to the library, I update the cloud and the changes get pushed and published through to the team's local projects.
FramerJS
We build our documentation in Sketch, then import it to Framer and with a few lines of code, we can product clickable prototypes. The wonderful part of Framer is that prototypes can be very high fidelity with hover states and full click interactions, or they can be very simple and only show the workflow. You're able to tailor the fidelity to meet the needs of the project or the team that you're working with.
Teaching the Team
Converting our team to utilize Framer and Sketch was my brainchild, it was the completion of the S&G ecosystem that was missing. After I started researching the tools it was apparent to me how much time and effort it would save the team. Additionally, a common issue the team would have with other counterparts with the company was our unpredictability and vastly different documentation styles between designers; implementing this toolset was also in efforts to rectify this issue. To educate the team on the value of this system, I held a Bootcamp for the team to teach them the Sketch, and walk them through Framer. After my team had bought in, I finished our library and continued to run weekly sessions, where we'd built a project in Sketch and imported our creations into Framer to bring to life. I continue to be the SME for this conversion, it's my pleasure to help them whenever necessary.
Vertafore Agency Platform
Vertafore Agency Platform is a tool for customer and policy management, agency licensing, reference materials, and real-time rating. Only Vertafore offers this comprehensive platform designed to make the modern agency more profitable today and into the future.
Super Queue
In efforts to bring the best of all our workflow systems together, we redesigned our Work Queue to increase efficiencies and introduce automation. With the side module becoming the centralized compnent in the UI for initiating workflows, I abstracted the component to make it an S&G pattern. This allowed for it to be extremely scalable as well as predictable for our users. In this pattern creation, I also conducted a usability study for Keyboard interaction in this space, in efforts to continue to improve user efficiencies.
Dashboards 2.0
Dashboard 2.0 removes redundancies and non-actionable items from Platform. It is evolving to allow users to see their own metrics and the health metrics of their agency. We present users with high-level data and then the ability to drill into very granular data. These varying levels allow the users to take action, help their teammates and effectively assess their workload and see their upcoming workloads to plan their time accordingly.
​
Super Client Record
Users of the platform's primary goal is to service their customers. To do this the need a robust and actionable record the launches the applicable workflows and presents them with the data necessary. With the research, I conducted at NetVU17 we uncovered these innate needs and are designing a powerful.
NetVU 2017 - Design Lab & User Research
Every year the Network of Vertafore Users (NetVU) puts on a conference to exchange industry knowledge and network. The design team uses this conference as an opportunity to meet and talk with our users. This year we brought and discussed innovative ideas about machine learning and automation with our users as well as ran usability tests and ran through design thinking toolkits to get a better understanding for our users.
Protocol Design
For NetVU17 each designer created a research protocol that would deepen their knowledge gain insights of the user's who interact with our products.
I looked at the product work I'd be working on for the year and identified three problems I wanted to uncover answers for.
CSR Persona Rebuild
I had felt for some time that our team's personas were incomplete and out of date, I set out to gather information to rebuild them. For this, I used design thinking tool-kits to learn about the day in the life and learn their pains and joys of their jobs.
Usability Study- Keyboard interactions & Visual Design
Looking to take our Platform to a new level we were Product Management wanted to improve our Work Queue. I teamed with visual design to build a prototype of proposing an improved Work Queue. We simultaneously asked users to assess the visual design, metadata, and functionality of the new design.
MetaData Research
Our previous tactic had been to show users all the data possible. But this lead to feedback that the UI was overwhelming and cluttered. To rectify this, I wanted to users to tell me which pieces of metadata were important for different work tasks, and which were superfluous. With this data, I would then be able to confidently eliminate unnecessary clutter from the UI
Engagement & Interest
In past years the team wasn't as successful as hoped in engaging with customers. I designed "Mad-Lib" engagement boards to passively collect information while also increasing interest and knowledge of our Design Lab.
Data Gathering
I collected data at the conference using our Design Thinking Toolkit as well as some worksheets I created. I first thought about the ending, how I wanted to analyze the data, I then created unique forms that would uniformly collect data. The worksheets had instructions and were simple so that others on my team could moderate the tests. Goers of the conference would pass by on their way to workshops and with a large whiteboard behind me, a marketed myself to the users I wished to speak with. My table was always busy, and iI was at times moderating multiple tests simultaneously. To aid in the collection pertinent information during this chaos, I asked participants and collected audio recordings which i could then re-listen to when i was home and annotate the documentation with additional information. After the conference, I imported all the data into Excel where I then could look for patterns.
​
Analysis & Application
Once the data was in Excel it became digestible. I'd then focus on individual columns and look for patterns. I used excel's sorting and filtering to find differing trends between Commercial and Personal Lines users. We identified which metadata pieces were important and which were unnecessary. And lastly, we used the cumulative of all the data to begin rebuilding our CRS persona. In application, this data in being used in the redesign of our Dashboard 2.0, future iterations of the Super Queue and beyond.
NexGen Rater
NexGen Rater was an idea to revolutionize the way insurance representatives approached Rating & Carrier Connectivity.
Research & Market Analysis
... coming soon
User Feedback
..coming soon
​
Design Deliverable
...coming soon
Client Portal
Vertafore PolicyIssuance, data from management systems is pre-filled into form sets minimizing errors and omissions. The remote team had never had interaction with our XD team, but there was a market gap and a business need to improve the system. I took a look at this system to identify ways to increase revenue, and reduce customer servicing issues during set-up and maintenance.
Research & Market Analysis
I conducted a competitive analysis of other products attempting to solve similar complexities and identified gaps where our product lacked usability. I also conducted interviews with users and internal stakeholders, to get a well-rounded knowledge of the problems in the workflow, and where Vertafore efforts, and in turn, profits were being wasted. To collaborate with the remote team and involve them in the redesign, I held remote Design Thinking workshops where we identified additional gaps and a vision for the future of the product.
User Feedback
The user feedback confirmed what we hypothesized, the system was archaic, required a level of coding knowledge our users didn't have and was extremely convoluted. Users needed predictability and wanted to be empowered to use the system themselves without the need to closely involved with Vertafore Support teams.
​
Design Deliverable
Because my involvement with the remote team was limited, I built for them a detailed case study, which included the findings from my research, as well as detailed wireframes for an improved UI and overall experience with the product. All aspects of the redesign were grounded in the business value of these improvements. In the time since my handoff, the team has implemented many of the improvements and have a renewed understanding for User Centered Design practices
Vertafore PolicyIssuance Case Study
Vertafore PolicyIssuance, data from management systems is pre-filled into form sets minimizing errors and omissions. The remote team had never had interaction with our XD team, but there was a market gap and a business need to improve the system. I took a look at this system to identify ways to increase revenue, and reduce customer servicing issues during set-up and maintenance.
Research & Market Analysis
I conducted a competitive analysis of other products attempting to solve similar complexities and identified gaps where our product lacked usability. I also conducted interviews with users and internal stakeholders, to get a well-rounded knowledge of the problems in the workflow, and where Vertafore efforts, and in turn, profits were being wasted. To collaborate with the remote team and involve them in the redesign, I held remote Design Thinking workshops where we identified additional gaps and a vision for the future of the product.
User Feedback
The user feedback confirmed what we hypothesized, the system was archaic, required a level of coding knowledge our users didn't have and was extremely convoluted. Users needed predictability and wanted to be empowered to use the system themselves without the need to closely involved with Vertafore Support teams.
​
Design Deliverable
Because my involvement with the remote team was limited, I built for them a detailed case study, which included the findings from my research, as well as detailed wireframes for an improved UI and overall experience with the product. All aspects of the redesign were grounded in the business value of these improvements. In the time since my handoff, the team has implemented many of the improvements and have a renewed understanding for User Centered Design practices