The form layout is organized by grouping related fields together and improving some entries. This structure enhances user experience by providing clarity and making it easier for users to fill out the forms efficiently.
Telkomsel Enterprise
Revamped Safora Sales Plan Journey and Built Design System to Enhance User Experience
Safora is a sales management platform designed for account managers at Telkomsel Enterprise. As a comprehensive CRM solution, it aids in lead generation, client acquisition, and relationship management.
My Role
- Design lead, user research, prototyping, UI design
- Built and maintained Safora design system
My Impact
- Delivered the full end-to-end flow quickly, collaborating with cross-functional teams from research to execution.
- Developed the product framework, created interactive prototypes using Figma, and built a design system.
- Worked with the team to implement the design system and ensure consistency and integration across multiple teams.
Timeline
February 2022 – April 2022
Discipline
UX Research, UI design, design system,
heuristic evaluation, visual design
Platform
Website
Before
Context
Safora’s Sales Plan supports account managers by providing tools to manage their sales pipeline, including key features for handling leads (potential clients) and opportunities (active deals). These functionalities help users track progress and optimize their sales activities, from client acquisition to deal closure
Challenge
The Sales Plan lacked visual clarity, which made it challenging for account managers to navigate quickly and work effectively
Unclear design elements caused user inefficiencies, leading to frequent workarounds that slowed down overall productivity
Key tasks like tracking leads and managing opportunities were disrupted by a disorganized information, complicating workflows.
How Might We
How might we enhance the design of Safora’s Sales Plan to create a more efficient and intuitive user experience for account managers?
Research
To better understand the inefficiencies in Safora’s sales plan journey, we conducted comprehensive research, including user interviews, heuristic evaluation, and an analysis of comparable CRM platforms, focusing on their sales plan journeys.
Conducted interviews with account managers to identify pain points and challenges in using Safora’s Sales Plan.
Researched comparable CRM platforms, analyzing their sales plan journeys to gather insights for enhancing Safora.
Performed a heuristic evaluation of Safora’s Sales Plan pages to uncover usability issues and optimize the user experience.
User Interview Key Findings
01
Complex Navigation: Users found it difficult to move through multiple stages of the Sales Plan due to unclear hierarchy in the interface
02
Data Overload: Account managers struggled to focus on important information due to the overwhelming data presented in a cluttered manner
03
Unintuitive Flow: The interaction flow between leads and opportunities was not intuitive, leading to confusion and delays in decision-making
Competitor Analysis
Competitor Analysis Key Findings
01
Consistent User Experience. The lead and opportunity journeys across various platforms share similar interfaces and user experiences, with the main differences occurring only in the staging processes
02
Information Detail. Most platforms display information detail with the current stage and corresponding information categorized by specific groups, either through a new page or a popup
03
Form Layout. Platforms that require users to fill out forms with many fields typically use a two-column layout, while those with fewer fields tend to adopt a one-column layout
Insight
Insight 1 - Lead Dashboard
Safora’s Lead Dashboard failed to provide a clear user journey. During user interviews, account managers expressed difficulty in proceeding through the stages due to the lack of a clear call-to-action button and disorganized layout.
Additionally, the staging area lacked visual hierarchy, leaving users uncertain about the next steps. The information displayed on the dashboard did not provide sufficient context for decision-making, further complicating the user experience and slowing down the lead management process.
1
The action button for progressing to the next stage is located within the table, which is confusing and lacks a clear point of focus.
2
The journey on the lead page does not have a clear purpose. While there are multiple stages within the lead process, the dashboard does not display these stages effectively.
3
There is no lead detail view, despite the presence of many additional activities within the lead.
Insight 2 - Add New Lead
During user interviews, account managers did not provide much direct feedback regarding this page. However, heuristic evaluation revealed that having too many form fields aligned to the right could disrupt the flow, making the process less intuitive and smooth for users.
1
The layout of the new lead form is poorly designed, causing users to lose focus while filling it out.
Insight 3 - Opportunity Dashboard
The main issue identified was the lack of visual hierarchy and unclear information on the dashboard, which made it feel too monotonous and difficult for users to navigate effectively.
1
The filter form labels have low contrast, and the spacing between the form and titles is inconsistent
2
In the Kanban view, the staging titles have unclear hierarchy and inconsistent width sizes between stages
3
The cards in the Kanban view lack clear hierarchy, with poor categorization and disorganized information
4
The overall layout uses a monotone color scheme, missing out on brand colors and visual diversity
Insight 4 - Add New Opportunity
In this page, many form fields were aligned to the right, with some forms being too long and requiring extensive input, while others were confusing, further complicating the user experience.
1
The layout of the new lead form is poorly designed, causing users to lose focus while filling it out
2
The target postpaid form is displayed in a lengthy format by default, from January to December, even though not all months may be used
3
The staging due date form uses a different style compared to the other forms, leading to inconsistency
Insight 5 - Opportunity Detail
The Opportunity Detail page was one that received the most user complaints, as it presented multiple issues. The overwhelming amount of information, combined with the excessive use of popups, made it difficult for users to navigate and complete tasks smoothly.
1
There are additional actions needed but their unclear placement makes them hard for users to use
2
The staging colors are unclear and don’t represent any specific meaning
3
The page contains important information, but it’s hard to access as it’s buried at the bottom.
4
The overall layout lacks a clear objective and direction, leaving users confused about how to navigate and use the page effectively
Final Design
Design System
The main problems in Safora, besides the lack of clear hierarchy, were the inconsistencies across the pages. Therefore, one of the first things I did was create a design system while simultaneously designing the pages. The goal was to ensure that the design on each page remained consistent throughout.
Lead Dashboard - After Revamp
After several iterations, we decided to implement kanban view for the lead dashboard to enhance consistency with the opportunity page and added a dark blue color to improve the color scheme and avoid a monotone appearance.
1
Consolidated the filter options into a single row, and each filter was given a clearly defined title
2
Added a sorting button and table view to enhance data accessibility, allowing users to manage and analyze information in a more structured format
3
Standardized staging widths and colors for a cohesive look. Added arrows to define stages and clarify hierarchy
4
Reorganized card information in the Kanban view
5
Organized the layout for clarity and user experience by using a solid blue for staging elements, enhancing visual interest while avoiding monotone look
6
Convert the content from a table format into a Kanban format to align the experience between leads and opportunities
Add New Lead - After Revamp
Not much has changed on this page, the form has been organized sequentially to enhance user ease when filling it out. This design enhancement streamlines the user experience, making it more intuitive and efficient.
1
The form layout is organized by relevant information, while fields arranged vertically for sequential data entry
2
Add a “Save & New” button, allowing users to immediately add a new lead after completing the new lead form
Lead Detail - After Revamp
Lead Detail is a new page added to accommodate additional information and actions within the lead journey. It also aims to create consistency between the lead and opportunity journeys.
1
Standardized staging colors and shapes to match the dashboard, used white for future stages, and added numbering to titles for clear order
2
Added CTA button in primary color at the end of the staging section to guide users to the next step
3
Added an information section at the bottom of the staging section to highlight the most crucial details, ensuring they are immediately visible to users
4
Added edit buttons, to allow users to easily modify lead as needed
5
Grouped additional actions into a new tab with their own categorization to prevent clutter and improve user accessibility
Opportunity Dashboard - After Revamp
The layout was redesigned to enhance clarity and user experience by incorporating a solid blue color for staging elements. This addition adds visual interest without overwhelming the design while ensuring consistency with the lead journey. The goal is to strengthen brand identity and avoid a monotonous appearance.
1
Consolidated the filter options into a single row, and each filter was given a clearly defined title
2
Added button for sorting and change view to table view to enhance data accessibility and allow users to better manage and analyze information by viewing it in a more structured format
3
Standardized staging widths and colors for a cohesive look. Added arrows to define stages and clarify hierarchy
4
Reorganized card information in the Kanban view by placing key details at the top with a distinct background color and less critical info below for improved clarity and organization
Add New Opportunity - After Revamp
1
The target revenue postpaid form is displayed in a compact format, automatically adjusting to show the months selected
2
The staging due date form is standardized to align with the style of the other forms
3
Add a “Save & New” button, allowing users to immediately add a new opportunity after completing the new opportunity form
Opportunity Detail - After Revamp
The most significant change on this page is replacing the popup with a dedicated page for opportunity details. This redesign accommodates additional actions and information, thereby preventing overcrowding within a single popup.
1
Standardized staging colors and shapes to match the dashboard, used white for future stages, and added numbering to titles for clear order
2
Added CTA button in primary color at the end of the staging section to guide users to the next step
3
Added an information section at the bottom of the staging section to highlight the most crucial details, ensuring they are immediately visible to users.
4
Added edit and delete buttons for opportunities, to allow users to easily modify or remove opportunity as needed
5
Grouped additional actions into a new tab with their own categorization to prevent clutter and improve user accessibility.
Outcomes
- Enhanced Visual Clarity: The redesign significantly improved the visual hierarchy and clarity of the Sales Plan, allowing account managers to navigate the platform more intuitively.
- Improved Task Management: The standardized staging and clear CTAs on the dashboard enhance users’ ability to manage leads and opportunities effectively, leading to a more efficient sales process.
- Increased Focus on Key Information: The design adjustments helped prioritize critical information, reducing data overload and enabling account managers to concentrate on essential tasks.
Takeways
This project relied on user interviews before and after the design phase, limiting the depth of feedback. Ideally, usability testing should have been conducted post-design to gather quantitative data and identify areas for improvement. Incorporating usability testing in future projects will enhance user experience and lead to better design outcomes.