Jun - Sep 2024
From Concept to Prototype
From Concept to Prototype
From Concept to Prototype
Design @ Malbek
Design @ Malbek
Design @ Malbek
internship duration
internship duration
Jun - Sept 2024
team
team
VP of Product (manager)
Principal Engineer
my role
my role
UI/UX Design Intern
skills
skills
UI/UX Design
Figma
SaaS Design
Kavya Verma
Contact
kavya.verma@gmail.com
what is Malbek?
what is Malbek?
what is Malbek?
A contract lifecycle management company aimed at providing efficient contract creation and negotiation processes, and incorporating AI tools in their interface to provide a seamless experience.
A contract lifecycle management company aimed at providing efficient contract creation and negotiation processes, and incorporating AI tools in their interface to provide a seamless experience.
In this internship, my business goals were to:
In this internship, my business goals were to:
1 Apply product thinking to simplify the user flow.
2 Improve Malbek's B2B customer experience.
3 Collaborate with cross-disciplines and engineering to design intuitive experiences.
4 Work with stakeholders to accomplish business goals.
what is Malbek?
what is Malbek?
A contract lifecycle management company aimed at providing efficient contract creation and negotiation processes, and incorporating AI tools in their interface to provide a seamless experience.
In this internship, my business goals were to:
In this internship, my business goals were to:
1 Apply product thinking to simplify the user flow.
2 Improve Malbek's B2B customer experience.
3 Collaborate with cross-disciplines and engineering to design intuitive experiences.
4 Work with stakeholders to accomplish business goals.
Malbek's competitors
Malbek's competitors
Malbek's competitors
I studied Malbek's competitors and what they offered, to get a sense of what contract lifecycle management is and how it helps the user and how Malbek uniquely implements CLM for their clients.
I studied Malbek's competitors and what they offered, to get a sense of what contract lifecycle management is and how it helps the user and how Malbek uniquely implements CLM for their clients.
This competitor analysis gave me a better picture as to how Malbek differs and is similar to these companies, and how I could help design features that sets the company apart.
This competitor analysis gave me a better picture as to how Malbek differs and is similar to these companies, and how I could help design features that sets the company apart.
getting to know the product
getting to know the product
getting to know the product
I spent around two weeks at the beginning playing with the product by creating mock contracts and moving them to different stages of the contract lifecycle and performing different actions on them to get a sense of the user flow, and ideating for future design projects.
INITIAL THOUGHTS: documented details of the user interaction jotting down eye-catching features and any moments of frustration.
Slightly overwhelming interface, but got used to it quickly.
Consistent action button locations.
Noticeably inconsistent UI patterns.
Felt a little confused navigating throughout initial interaction, but that may be because of my unfamiliarity with CLM.
I spent around two weeks at the beginning playing with the product by creating mock contracts and moving them to different stages of the contract lifecycle and performing different actions on them to get a sense of the user flow, and ideating for future design projects.
INITIAL THOUGHTS: documented details of the user interaction jotting down eye-catching features and any moments of frustration.
Slightly overwhelming interface, but got used to it quickly.
Consistent action button locations.
Noticeably inconsistent UI patterns.
Felt a little confused navigating throughout initial interaction, but that may be because of my unfamiliarity with CLM.
team
team
team
Throughout my internship, I prioritized collaboration and seeking feedback from the people I worked with. I worked closely with my manager, the CEO, product managers, and engineers, designing solutions that addressed to specific user problems and align our designs with the clients' needs.
Throughout my internship, I prioritized collaboration and seeking feedback from the people I worked with. I worked closely with my manager, the CEO, product managers, and engineers, designing solutions that addressed to specific user problems and align our designs with the clients' needs.
so where do I come in?
so where do I come in?
My role was to tackle these key challenges throughout the internship:
Malbek is a contract lifecycle management company that is aimed at providing efficient contract creation and negotiations, and incorporates AI tools to provide a seamless experience.
Before I was onboarded as a UI/UX design intern, I studied some core CLM concepts and some of Malbek's competitors, such as Ironclad, Agiloft, and Evisort. Competitive analysis helped me to learn more about the company and its values and unique features.
Design for users to seamlessly navigate the processes of contract creation and negotiation.
Malbek is a contract lifecycle management company that is aimed at providing efficient contract creation and negotiations, and incorporates AI tools to provide a seamless experience.
Before I was onboarded as a UI/UX design intern, I studied some core CLM concepts and some of Malbek's competitors, such as Ironclad, Agiloft, and Evisort. Competitive analysis helped me to learn more about the company and its values and unique features.
The presence of inconsistent UI elements and patterns due to a lack of a unified style guide.
Malbek is a contract lifecycle management company that is aimed at providing efficient contract creation and negotiations, and incorporates AI tools to provide a seamless experience.
Before I was onboarded as a UI/UX design intern, I studied some core CLM concepts and some of Malbek's competitors, such as Ironclad, Agiloft, and Evisort. Competitive analysis helped me to learn more about the company and its values and unique features.
optimizing user interactions with the interface
optimizing user interactions with the interface
optimizing user interactions with the interface
Designing for specific user tasks such as providing feedback for an AI tool, viewing contract obligations in an engaging manner, and creating banners for company updates and system messages helped me to work in a fast-paced environment.
By studying stakeholder feedback, sketching and mocking up ideas, presenting those ideas to my manager and the team for feedback, and creating hi-fi wireframes and prototypes for those ideas, I contributed to efficiently developing features at a faster pace.
Designing for specific user tasks such as providing feedback for an AI tool, viewing contract obligations in an engaging manner, and creating banners for company updates and system messages helped me to work in a fast-paced environment.
By studying stakeholder feedback, sketching and mocking up ideas, presenting those ideas to my manager and the team for feedback, and creating hi-fi wireframes and prototypes for those ideas, I contributed to efficiently developing features at a faster pace.
designing the AI clause trainer
designing the AI clause trainer
As a user, I want to use the AI Clause Trainer to generate different variations of a clause from samples that I upload, which will be used to extract that clause from a contract document.
Current Problem: Lack of an intuitive step-by-step flow for the user to train the given model with sample clauses.
As a user, I want to use the AI Clause Trainer to generate different variations of a clause from samples that I upload, which will be used to extract that clause from a contract document.
Current Problem: Lack of an intuitive step-by-step flow for the user to train the given model with sample clauses.
tasks
Study clientele feedback on current clause trainer and discuss requirements with CEO and manager for the design.
Redesign the existing clause trainer to a wizard.
Utilize current modal design and design system to drive the redesign.
tasks
tasks
Study clientele feedback on current clause trainer and discuss requirements with CEO and manager for the design.
Redesign the existing clause trainer to a wizard.
Utilize current modal design and design system to drive the redesign.
Study clientele feedback on current clause trainer and discuss requirements with CEO and manager for the design.
Redesign the existing clause trainer to a wizard.
Utilize current modal design and design system to drive the redesign.
wizard steps
wizard steps
my samples
User provides sample clauses.
User provides sample clauses.
generated samples
Model generates all possible variations of the clauses based on the samples.
Model generates all possible variations of the clauses based on the samples.
test samples
User tests all of the samples by uploading a contract document, and the model retrieves the clause.
User tests all of the samples by uploading a contract document, and the model retrieves the clause.
step 1: "My Samples"
step 1: "My Samples"
Enter clause name and description
Input samples
This step was fairly simple as the user only needs to enter up to three samples.
The UI adheres to the standard modal design which is used across the interface.
Enter clause name and description
Input samples
This step was fairly simple as the user only needs to enter up to three samples.
The UI adheres to the standard modal design which is used across the interface.
step 2: "Generated Samples"
When mocking up options for the generated samples tab, one challenge was designing how the user would regenerate samples in concurrency with accepting/rejecting individual samples.
Originally, we wanted the user to be able to regenerate individual samples, so I mocked up a couple of options:
step 2: "Generated Samples"
When mocking up options for the generated samples tab, one challenge was designing how the user would regenerate samples in concurrency with accepting/rejecting individual samples.
Originally, we wanted the user to be able to regenerate individual samples, so I mocked up a couple of options:
The regenerate button is placed next to reject button. “Save & next” automatically accepts samples that aren’t rejected. This wasn’t as intuitive because the accepting method is unclear.
The regenerate button is placed next to reject button. “Save & next” automatically accepts samples that aren’t rejected. This wasn’t as intuitive because the accepting method is unclear.
A “more” button for each sample that holds a “delete”/”reject” button and “regenerate” button. This wasn’t as intuitive because user would have to click the more button every time they want to do one action.
A “more” button for each sample that holds a “delete”/”reject” button and “regenerate” button. This wasn’t as intuitive because user would have to click the more button every time they want to do one action.
Result: Since the user already has the capability to reject individual samples or regenerate all the samples, regenerating individual samples was an unnecessary action.
Therefore, I collapsed all actions other than accept/reject into a “more” dropdown. This way, accept and reject are the main actions and the other actions are accessible in one place.
User needs to accept 100% of the samples to continue.
In the “more” dropdown, they have the option to accept all samples or regenerate all samples.
User needs to accept 100% of the samples to continue.
In the “more” dropdown, they have the option to accept all samples or regenerate all samples.
When the user reaches the goal (100%) for accepted samples, they can choose to “accept all,” "generate 5 more," “regenerate all,” or continue to the next step.
When the user reaches the goal (100%) for accepted samples, they can choose to “accept all,” "generate 5 more," “regenerate all,” or continue to the next step.
step 3: "Test Samples"
To test, the user uploads a contract document and the AI clause trainer extracts the clause based on the sample clauses accepted by the user.
step 3: "Test Samples"
step 3: "Test Samples"
To test, the user uploads a contract document and the AI clause trainer extracts the clause based on the sample clauses accepted by the user.
To test, the user uploads a contract document and the AI clause trainer extracts the clause based on the sample clauses accepted by the user.
designing the "know your counterparty" page
The "know your counterparty" feature was the last project I worked on, where I collaborated with my manager, the engineer, and the product manager to design a page where a user can view and edit a contract counterparty's details, including their key information and contract activity.
A counterparty could be a single person who is requesting a contract, or a company that has a contract with another company.
The "know your counterparty" feature was the last project I worked on, where I collaborated with my manager, the engineer, and the product manager to design a page where a user can view and edit a contract counterparty's details, including their key information and contract activity.
A counterparty could be a single person who is requesting a contract, or a company that has a contract with another company.
The initial mockup, which sectionalizes the information related to the customer.
Information Architecture of "Know Your Counterparty" page
1 Counterparty Info
2 Key Information
Total Contract Value
Key Negotiation Metrics
Relationship Summary
3 Contract Activity
Key accounts
Charts
1 Counterparty Info
2 Key Information
Total Contract Value
Key Negotiation Metrics
Relationship Summary
3 Contract Activity
Key accounts
Charts
The user can click on buttons located within the "Contract Activity" section, to view different types of contract activity. For example, in the mocks above, the user clicks on "Draft" to view the counterparty's draft contracts, or click on "Milestones" to view their upcoming events.
Making KYC interactive was an important component of the UI due to the substantial amount of data each counterparty contains. Organizing in clickable views therefore provided it with more structure and usability.
The user can click on buttons located within the "Contract Activity" section, to view different types of contract activity. For example, in the mocks above, the user clicks on "Draft" to view the counterparty's draft contracts, or click on "Milestones" to view their upcoming events.
Making KYC interactive was an important component of the UI due to the substantial amount of data each counterparty contains. Organizing in clickable views therefore provided it with more structure and usability.
takeaways + impact
takeaways + impact
takeaways + impact
Creating a systemized style guide that engineers at Malbek could adhere to was a challenging but impactful experience that spanned over the summer, and I learned to take a more sophisticated look and overview at the interface as I was creating the guide.
This was challenging in terms of gathering different components across the interface. I found that due to this being a startup, features were implemented at a very fast pace, leading to inconsistent styling, so the style guide would increase speed of implementation and ensure consistency at the same time.
Additionally, organizing the components and patterns in a slide deck was another challenge because we had to point out where UI elements were being styled wrong and also make suggestions to standardize them.
If I were to go back and continue my work, I would involve myself more in researching users and studying clientele feedback more thoroughly to drive my designs, and work on more complex tasks such as optimizing Malbek's approval workflow feature.
Additionally, I learned how to design in a fast-paced environment, where priorities change quickly and frequently, and how to design for specific users (sales, procurement, etc.)
Designing at Malbek taught me that balancing user needs and business goals is important, as well as the value in having a standardized interface for any design that I do.
Creating a systemized style guide that engineers at Malbek could adhere to was a challenging but impactful experience that spanned over the summer, and I learned to take a more sophisticated look and overview at the interface as I was creating the guide.
This was challenging in terms of gathering different components across the interface. I found that due to this being a startup, features were implemented at a very fast pace, leading to inconsistent styling, so the style guide would increase speed of implementation and ensure consistency at the same time.
Additionally, organizing the components and patterns in a slide deck was another challenge because we had to point out where UI elements were being styled wrong and also make suggestions to standardize them.
If I were to go back and continue my work, I would involve myself more in researching users and studying clientele feedback more thoroughly to drive my designs, and work on more complex tasks such as optimizing Malbek's approval workflow feature.
Additionally, I learned how to design in a fast-paced environment, where priorities change quickly and frequently, and how to design for specific users (sales, procurement, etc.)
Designing at Malbek taught me that balancing user needs and business goals is important, as well as the value in having a standardized interface for any design that I do.
Kavya Verma
Contact
kavya.verma@gmail.com
Kavya Verma
Contact
kavya.verma@gmail.com
