Overview

The challenge

Research

Ideation

Usability testing

Conclusion & Design

Overview

ForceManager is a mobile-first CRM platform designed specifically for sales teams, particularly those working in the field. The app simplifies customer relationship management by providing sales representatives with real-time insights, task management, and account customization capabilities, all accessible via an intuitive mobile interface.

My contribution

Lead product designer. Interviews, user testing, low/high fidelity mock-ups.

Product conceptualization, collect quant and quali data to support design decisions, design system.

The team

Product owner(1), Web developer team, Backend(1), Product designer(me), Quality assurance (1).

Product owner(1), iOS and android developers(2) Backend(1), Product designer(1), Quality assurance

Product owner(1), iOS and android developers(2) Backend(1), Product designer(1), Quality assurance (1).

Tools

Figma design and prototyping, UI Design kit, FigJam, Storybook, MC Teams.

Miro, Figma, prototyping, iOS human interface guidelines, FigJam, Storybook, After Effects.

The challenge

To improve sales effectiveness, sales representatives were struggling to customize customer account details to align with their sales strategy by adding featured fields. This valuable capability was only accessible through ForceManager ERP, allowing only admin users to efficiently make widespread adjustments.

Account detail view before the implementation. Each box it corresponds with a group of displayed account data.

Research

We conducted interviews, analyzed usage data from the ERP system and explored how other CRM tools allowed users to customize account details.

Research

Tracking

Benchmarking

Interviews and Surveys

We conducted interviews with sales reps to gather insights into their daily workflows, how they interact with customer accounts, and why the customization was so essential to their sales strategies.

Additionally, I spoke with admin users to understand their process for making the adjustments.

Key findings

1. Limited Access to Custom Fields (78% identified this as a major issue).

2. Dependency on Admin Users (65% expressed delays due to this dependency).

3. Impact on Sales Strategy (55% noted issues with aligning fields to strategy).

4. Lack of Custom Field Categorization (42% reported difficulty navigating fields).

5. Mobile Access Needs (58% emphasized this need).

Suggestions for Improvement

• Grant Sales Reps Access to Non-Critical Fields

• Field Grouping and Categorization: Reorganize fields into easily navigable categories to streamline workflow and reduce time spent searching for specific fields.

• Mobile-Optimized Interface: Develop a mobile-friendly solution so sales reps can update customer accounts in real time, regardless of their location.

• Autonomy with Safeguards: Introduce role-based access to ensure critical fields (like contract terms or account ownership) remain under admin control but empower sales reps with autonomy for fields directly impacting their workflow.

Research

Tracking

Benchmarking

Interviews and Surveys

We conducted interviews with sales reps to gather insights into their daily workflows, how they interact with customer accounts, and why the customization was so essential to their sales strategies.

Additionally, I spoke with admin users to understand their process for making the adjustments.

Key findings

1. Limited Access to Custom Fields (78% identified this as a major issue).

2. Dependency on Admin Users (65% expressed delays due to this dependency).

3. Impact on Sales Strategy (55% noted issues with aligning fields to strategy).

4. Lack of Custom Field Categorization (42% reported difficulty navigating fields).

5. Mobile Access Needs (58% emphasized this need).

Suggestions for Improvement

• Grant Sales Reps Access to Non-Critical Fields

• Field Grouping and Categorization: Reorganize fields into easily navigable categories to streamline workflow and reduce time spent searching for specific fields.

• Mobile-Optimized Interface: Develop a mobile-friendly solution so sales reps can update customer accounts in real time, regardless of their location.

Research

Tracking

Benchmarking

Interviews and Surveys

We conducted interviews with sales reps to gather insights into their daily workflows, how they interact with customer accounts, and why the customization was so essential to their sales strategies.

Additionally, I spoke with admin users to understand their process for making the adjustments.

Key findings

1. Limited Access to Custom Fields (78% identified this as a major issue).

2. Dependency on Admin Users (65% expressed delays due to this dependency).

3. Impact on Sales Strategy (55% noted issues with aligning fields to strategy).

4. Lack of Custom Field Categorization (42% reported difficulty navigating fields).

5. Mobile Access Needs (58% emphasized this need).

Suggestions for Improvement

• Grant Sales Reps Access to Non-Critical Fields

• Field Grouping and Categorization: Reorganize fields into easily navigable categories to streamline workflow and reduce time spent searching for specific fields.

• Mobile-Optimized Interface: Develop a mobile-friendly solution so sales reps can update customer accounts in real time, regardless of their location.

Ideation

The first step before beginning the design process was to define the user flow, which helped identify key points and validate them with the product and engineering teams.

Proposed user flow

Usability testing

I conducted a usability test with six users using low-fidelity designs created in Figma. The goal was to observe how users interact with the prototypes and to gather key pros and cons for each design. This feedback informed my next iteration, ensuring that the design aligns with user needs and improves the sales workflow.

Proposal 1 - Actionable button

A clean design with the “See all fields” button placed in the top-right corner to keep the layout uncluttered. However, it might be less intuitive for new users. Initially, I proposed using a robust, scrollable modal that displays all fields, allowing users to mark them as favorites by starring them.

1 / 4

PROS - 45%

• Clear and Immediate Access: The “See all fields” button is visible and accessible for users who want to explore or manage fields quickly. • Minimizes Distraction: It doesn’t clutter the main content and allows users to focus on the featured fields.

CONS - 55%

• Modal and search steps are too bold. The modal, search, and markdown process steps are too prominent. Users don’t need to see all the fields at once; they only want to focus on the relevant fields and add them as needed. • Less Obvious for New Users, which might not intuitively look for a customization option in the top-right corner, reducing the ease of discovery.

Proposal 1 - Actionable button

1 / 4

PROS - 45%

CONS - 55%

Implementing feedback

After analyze the gathered feedback, we concluded that:

Using a secondary button inside the widget generated some confusion and could generate problems when scaling the configuration options of the main widget.
Adjusting the widget space to match the number of fields instead of using a scrollable widget would make information more accessible to users.
Reduce the size of the modal and use a dropdown with the fields to select.
Change the favorite fields approach and base it on a common interaction, selecting each field.

First MVP to implement.

Conclusion & Hi-Fi Design

Including much more in-depth understanding of users' pain points that were key to defining priorities and discover opportunities.
I discovered that focusing on the most relevant and overlapping issues, rather than attempting to meet all user needs, is essential for advancing the design process effectively. This approach allows for more meaningful progress and better outcomes in our projects.
Continuous testing instead of making decisions by myself to avoid to fall in bias.

Figma deliverable

Check it out the Figma deliverable file.

Figma deliverable

Check it out the Figma deliverable file.

Figma deliverable

Check it out the Figma deliverable file.

Prototype

Navigate through the prototype.

Prototype

Navigate through the prototype.

Prototype

Navigate through the prototype.

Proposal 1 - Top-right action button

A clean design with the “See all fields” button in the top-right corner, keeping the layout uncluttered. However, it might be less visible for new users.

1 / 4

PROS

• Clear and Immediate Access: The “See all fields” button is visible and accessible for users who want to explore or manage fields quickly.

• Minimizes Distraction: It doesn’t clutter the main content and allows users to focus on the featured fields.

CONS

• Button Location Might Be Overlooked, especially if their attention is on the main field content in the center of the screen.

• Less Obvious for New Users, which might not intuitively look for a customization option in the top-right corner, reducing the ease of discovery.

Proposal 1 - Top-right action button

A clean design with the “See all fields” button in the top-right corner, keeping the layout uncluttered. However, it might be less visible for new users.

1 / 4

PROS

• Clear and Immediate Access: The “See all fields” button is visible and accessible for users who want to explore or manage fields quickly.

• Minimizes Distraction: It doesn’t clutter the main content and allows users to focus on the featured fields.

CONS

• Button Location Might Be Overlooked, especially if their attention is on the main field content in the center of the screen.

• Less Obvious for New Users, which might not intuitively look for a customization option in the top-right corner, reducing the ease of discovery.

Custom Fields

Custom Fields

Custom Fields

Overview

The challenge

Research

Ideation

Usability testing

Implementing feedback

Conclusion & Hi-Fi Design

Go to Home page

→