Redesigning Vymo’s user experience & empowering sales teams with new innovative features

In this article, I’ll explain how I approached redesigning the Vymo app to boost sales efficiency and user experience.

Shivanshi Chaudhary
12 min readJun 17, 2024

Background

This project was undertaken as part of the 10k designers’ capstone project assigned by Vymo, focusing on enhancing user experience and introducing new features.

A sneak peek of what you are going to see further

What does Vymo do?

Vymo is a leading sales engagement platform for financial institutions, empowering sales teams by transforming records into actionable insights and tasks. It is a central hub for sales activities, helping professionals maximize earnings, plan their day, and achieve goals efficiently.

Why did I choose Vymo?

I chose Vymo because I wanted to work on a B2B SaaS platform and challenge myself with complex user needs and enterprise-level solutions.

Coming from an architecture background, I wanted to test my problem-solving skills and apply my ability to deliver optimal solutions in a new and challenging context.

Problem statement and scope of assignment

This project focused on enhancing Vymo with four key features aimed at improving sales efficiency. Additionally, I identified the need for and integrated a crucial map-based view feature to enhance the app’s functionality. within a three-week timeframe.

  1. Route Optimization- Simplify daily planning to minimize travel time and optimize customer visits.
  2. Nearby Connections- Utilize location data to facilitate spontaneous meetings with nearby leads, customers, or team members.
  3. In-the-Moment Nudges- Provide timely recommendations for optimal actions, enhancing productivity during breaks.
  4. End-of-Day Summary- Implement a feature to summarize daily activities, highlighting achievements and efficiency gains.
  5. Map-based view- Recognizing the need for enhanced geographical insights within Vymo, I introduced a map-based view feature to visualize the distribution of leads, customers, and team members, aiming to improve decision-making and operational efficiency for sales professionals.

Uncovering the existing challenges

  1. Lack of User-Centric Design: The app lacks a UI-focused approach, resulting in a basic, uninspiring dashboard interface that fails to engage users effectively.
  2. Inadequate Functionality: Users, including insights from the Vymo team, encounter difficulties in leveraging the app fully. Essential functions such as scheduling, quick access to information, and route optimization are not optimally supported.
  3. Visual Disengagement: The absence of visual elements and a sense of accomplishment within the app diminishes user motivation and engagement. The monotonous interface fails to inspire users
  4. Salesperson’s Daily Struggles: Salespeople, constantly on the move, face challenges like traffic and time constraints. Amidst their busy schedules, they risk forgetting crucial tasks.

Understanding the user personas and success metrics

User personas

I defined the success metrics at different levels of the company to understand the chain and figure out how the salespeople, who are the leaf-level employees, can affect the overall success.

Success metrics at different levels in a company

Defining the user flow

This user flow outlines the steps a salesperson takes to efficiently schedule, navigate, and complete their daily tasks within the app, ensuring a seamless experience from start to finish.

Detailed user flow for a salesperson using the app

Competitor Research and inspiration

Since these apps are exclusive to companies and their employees, I couldn’t access them directly to study the user flow. So, I turned to YouTube and competitor websites, where I found images of the app and took screenshots for reference and a better understanding of how they are doing things.

Competitors
Inspiration and mood boarding

🎨 Let’s Dive into Design!

After finalizing the foundational elements, I began wireframing and establishing a cohesive colour palette, iterating on screens and cards. Drawing inspiration from various sources including Mobbin and others.

🏘️The Home Screen

This was my first design focus, setting the stage for other features. I listed key elements and thought like a salesperson to determine what they’d want to see first especially if they are on the go. I also revamped the nav bar to clear up space and improve usability.

From start to the final product

I’ll start with a sneak peek of the home page and then walk you through each section step by step.

Home screen

1. The progress bar and task cards

  1. Progress bar- I added a progress bar at the top of the home screen to help salespeople track their daily progress. It provides a sense of achievement and gives a visual cue that their day is nearing completion. If a person sees they’re 90% done, they’re more likely to push through and finish their tasks quickly.
Iterations of progress bar and task cards

2. Task Cards- I divided tasks into three categories for better organization and clarity, This categorization helps salespeople easily manage their workload and track their progress.

  • Planned Tasks: Displays all tasks scheduled for the day. Tapping on the cards reveals the full task list.
  • Suggested Tasks: Contains tasks accepted by the user from Vymo’s suggestions, serving as a repository for these added tasks.
  • Completed: Shows a list of all completed tasks.
Final design of the progress bar and task cards

2. Upcoming meeting reminder

I added this section as a reminder feature. Whenever the user opens the app, they’ll see a prompt for their next meeting, ensuring they stay on track and never miss an appointment.

The idea was to include key details on the card so that users can quickly gain essential information about the client.

  • Name and Address
  • Time, Venue, and Time Left for the Meeting
  • Lead Score and Tags (e.g., first meeting, last engaged)
  • Navigate Button- Redirects to Google Maps, which Vymo currently uses as their third-party app.
Iterations of upcoming meeting card

After multiple iterations and feedback, I arrived at a final design where all essential information is clearly visible on the card in a clean and uncluttered manner.

Final design of upcoming meeting card

3. Vymo suggestions

Suggestions are the USP of the app, yet they are often overlooked or forgotten, as noted by the Vymo team. To address this, I made suggestions a prominent part of the home screen, dividing them into three segments for quick decision-making.

For example, if a user has an hour between meetings, they can easily choose between meetings (in-person tasks) and engagement tasks (non-physical ones), like updating previous meetings, sending documents, or making pending calls.

Quick glimpse of before and after
Iterations of suggestion cards
Final design of vymo suggestion cards
Card based on different cases

I removed the buttons from the card because it was causing information overload- instead, I have put them on the detail page which opens when the user taps on the card or it opens when the user accepts the suggestion.

4. Best route planned- Map and list view cards

Below the vymo suggestions, users find the map and list view cards as a carousel. They can also access the map directly from the Nav bar (Map View). This takes them to the map section, showing their planned route and nearby pins for clients, leads, and team members on the go.

Iterations for map and list view cards
Final design for map and list view cards

5. Pull-to-refresh screen

I introduced a feel-good feature on the home page- every time the user refreshes, a new inspiring quote appears, providing a refreshing surprise with each pull. It aims to offer users a comforting and motivating experience.

Pull-to-refresh screen

👦Client detail and notification page

1. Client or lead detail page

This page opens when a user clicks on an upcoming meeting card or wants to learn about a client or lead. It’s designed as a repository for all relevant information about that particular client, including-

  • Contact Details
  • Business Section- Revenue and product sold cards
  • Upcoming Activities- List of all upcoming activities for the client. Here a reschedule option is also provided incase there is any change in the plans for meeting.
  • Previous/Completed Activities- Tracks all calls, texts, meetings, and documents sent to the client
  • Documents- Contains all sent, received, and important documents the salesperson should read before visiting or for any other reason.

Here is a sneak peek of the detail page-

Client or lead detail page

The name card and contact details- I aimed to streamline the design by consolidating contact information into a single button for clarity on the screen. The optimal solution was to integrate a unified ‘Contact Details’ button, which opens a bottom sheet containing all necessary contact information.

Iterations of the detail page and the final design

2. Notification page

In the current app, all notifications are shown in one place, leading to chaos and difficulty finding urgent information for salespeople.

The redesigned version splits notifications into two segments: one for day-wise notifications and another for those requiring immediate attention. This way, users can quickly access priority notifications without sifting through a long list.

Before and after of the notifications page
Why is this approach better than the current app design

✨End-of-day report

I aimed to make the end-of-day experience more enjoyable by introducing tappable story cards, inspired by Instagram. These cards provide users with a fun and engaging summary of their day, showing metrics like completed tasks and motivating them for the next day’s challenges.

Each card includes action buttons tailored to its content. For instance, if a user has completed all tasks, the button suggests adding tasks to the calendar for the next day as a reminder. This helps users stay organized and prepared.

End-of-day report

Users can revisit these cards on the home screen. While the cards reset with each new day, users can find archived daily reports under the “Reports” section for reference.

This design enhancement not only streamlines the end-of-day review process but also adds a touch of interactivity and motivation to the user experience.

In the process, I realized that not everyone would want to view the End of Day cards daily. To address this, I limited the visibility of these cards to a specific period (5–7 days). After this period, clicking on the card on home page in the first screen, it will take the user directly to the End of Day report page.

The End-of-day report page has all the information compiled in the form of charts, it also has a separate page to view team reports as well as personal reports.

🗺️The all-new map view feature

Saved the best for the last, this is a feature that I believe could help ease the life of a salesperson.

This feature enables them to conveniently access essential information about leads, customers, and nearby team members on the go, ensuring they stay informed about nearby opportunities and increase their efficiency throughout their day.

Why did I plan to design this feature?

Salespeople are constantly on the move, often facing rescheduled meetings or finding themselves with 2–3 hour gaps between appointments. During these intervals, they aim to maximize their time by meeting potential leads or customers near their current location.

This proactive use of time is driven by several key factors-

  • Achieving monthly targets efficiently
  • Building and nurturing client relationships
  • Catching up with existing clients
  • Sending and receiving essential documents

For salespeople, whose jobs are already demanding, quick access to information about nearby leads, customers, and team members through the app is essential to complete the above-mentioned tasks and utilize their time.

Why map is the best solution for this problem?

  • Visual Clarity
  • Efficiency in Navigation
  • Real-Time Updates
  • Contextual Awareness

Let’s begin with a sneak peek of the Map view, followed by a detailed walkthrough of each section.

Map View

1. Map pins

These pins are markers for the client’s location

  • Planned meeting pins- Displays the number and scheduled time of each meeting; tapping on any card opens its detailed view.
  • Nearby pins- Displays the person’s initials, colour-coded for clarity- orange for leads, red for customers, and yellow for team members.
Iteration and final design of pins
  • Details of the planned screen and detail cards
Planned screen and detail cards
Card iterations

2. Map view and nearby filters

Tapping on the ‘nearby’ option next to planned meetings takes users to the nearby page, displaying all leads, customers, and team members with colour-coded pins.

To make this feature more useful, I introduced filter options for each category (leads, customers, and team members) to help users quickly find relevant information.

Filter for leads, customers and team

How filters were decided

Understanding a salesperson’s daily challenges, I designed filters that address their specific needs, ensuring they can quickly and easily find the most relevant information.

  • Lead Priority: Identifying high-priority leads to focus on potential conversions.
  • Active or Inactive Leads: Distinguishing between currently active leads and those that have gone inactive.
  • Radius of Nearby Leads: Setting a geographical radius to find leads within a specific distance.
  • Last Attended: Sorting leads based on the most recent interaction to ensure timely follow-ups.
  • Commission Slab: Filtering leads based on their potential commission to prioritize high-value opportunities.
Filters for leads, customers and team members

📋List view

The list view presents cards for planned and nearby contacts (leads, customers, and team members) in a straightforward list format. It serves the same purpose as the map view but offers a quick and effortless way to access and review key details.

  • Compact Organization- Displays contacts in a sequential list, ensuring easy scanning and navigation.
  • Concise Details- Provides essential information such as names, contact details, and pertinent tags at a glance.

The list view is designed to cater to users who prefer a concise and structured presentation of information, enhancing their ability to manage contacts effectively and make informed decisions.

List view for planned and nearby

Nearby Filters

The nearby filters are same as those available on the map view screen, providing users with robust options to refine their search criteria and streamline their interactions with leads, customers, and team members.

Filters for leads, customers and team members

🌯 And that’s a wrap

If you’re still here, big thanks for sticking around! I must have done a good job in keeping things interesting😜. Working on this project has been a blast, and I’ve levelled up in learning along the way.

😏Challenges, Learnings & Takeaways

  • Going big on iterations - My background in design unexpectedly proved invaluable during the numerous iterations I undertook. And this was already a win for me, as I was discovering how to solve a complex problem.
  • B2B SaaS-Designing for a B2B SaaS product was both challenging and incredibly enjoyable. It sparked my curiosity and affirmed my passion for tackling intricate projects like these.
  • Architecture and visual design really helped me- My years in architecture and my visual design experience played a crucial role. They helped me grasp visual aesthetics, brand language, and moodboarding more intuitively, enriching my design process significantly.
  • Documenting my process- I made a promise that I will document my design process in a notion doc which really helped me write this case study and I was instantly reminded why I made a decision in the first place.
  • Feedbacks are sooooo important- Looking back at my first designs compared to the later versions, I can see how constructive feedback shaped them into more effective solutions.

🫡Just one more thing…

👏 If you enjoyed this journey, I’d truly appreciate a long press on the clap icon to show your support!

Bhai ne bola karne ka matlab karne ka

🎯Currently exploring new opportunities as a Product Designer.

Connect with me on LinkedIn or Twitter for feedback, discussions, or potential collaborations. I’d love to chat with you!

--

--