Interactive Flow Diagram Layout
We adopted a Tree workflow for user clarity and content support, while also providing error feedback effectively.
Employed "Cognitive disclosure" to simplify the flow and remove unnecessary steps.
Background
'Workiz’ is a B2B2C that serves small and medium businesses working in the home service field. Using VOIP technology, Workiz also provides call-center, IVR, and call-tracking capabilities for business owners.
The Challenge
Users faced difficulties customizing their call flows to align with their unique business needs, resulting in missed calls.
Team’s Objective
Our team set out to create a new interface that would prevent missed calls, instill trust among our clients, and boost revenue.
My Role
I was tasked with redesigning the call flow process to make it more intuitive and user-friendly.
Discover
To gather essential insights, I conducted a database query to answer key questions:
How many businesses are one-person operations?
How many call flows do they typically use?
What percentage utilize IVR menus?
What is the average number of departments in a business?
What factors contribute to missed calls?
Call Flow Scenario
I created a basic flow diagram to identify the minimum steps required to complete a basic call flow—a crucial step toward building a Minimum Viable Product (MVP). This outcome resulted from extensive discussions and meetings.
Next Steps
Recognizing pain points through user journeys.
Creating an affinity map.
Delving into the details to configure additional settings.
Maintaining consistent UX patterns for more complex workflows, like the IVR menu, to enhance the learning curve for users.
Increasing Empathy to Joe
I used persona-design methods based on the knowledge we already had. (Existing clients)
I did it to create a shared understanding, increase collaboration, and brainstorm with stakeholders and the rest of the team.Meet Joe:
Owns a small business that provides Locksmith services. He runs 6 team members. Joe is responsible for business operations, employers, and proposals.
On the road most of the day.
Generally using mobile devices rather than a desktop computer.
Demographic
Male
36 Years Old
Married
San Diego
Usually Use
Needs, Goals & Motivations
An alternative way to manage his organization
Easy to sync with my Calendar / Email
The invoice / Estimate /Receipt has to look professional
Having the option to get paid online
Send an Estimate and invoice by a single clickwith
Needs to get more estimated signed
Client Management by CRM (Prices, Notes and process)
Job Management and follow up
Know our product is safe, secure, and trustable
Announce to the end client about changes
Pains
Run and manage his business aspect in different tools (pen and paper, Dropbox, Google Calendar)
Finding Documents (Estimate / Invoices / Receipt)
Collect money in time (reminder)
Understanding his market
Can’t measure his advertising
Doesn’t have any finance insight
(Ex: Does’t know which on his job Is the most gained)
Worried to share sensitive info with employers
Update and sync with the team
Is a novice interface
User Journey
To gain a deep understanding of users, I identified pain points within the workflow and observed numerous full-story sessions. Data was documented based on logical steps, prioritized by severity.
Part of my research question was:
How do they currently use the feature?
What is their pain in the process?
What is the user struggling with during the existing
call flow builder process?
Competitors Research
I looked for a lot of IVR products, to recognize trends, conventions and best practices, in order to suggest the best solution. Here are some of my major insights:
Key Insights
Workiz's product, while highly customizable and flexible, was perceived as complex, catering primarily to expert users due to its extensive features.
The interface needed to be user-friendly for non-expert users.
We adopted a new approach, employing default settings to minimize user choices and reduce friction in completing call flow construction.
Feedback was lacking within the flow, leading us to implement indicators over unrevealed fields to guide users through the process.
Ideation & Sketching: Low-Fidelity Wireframes
I sketched basic layouts following best practices:
Dynamic Panel
I leveraged an interactive panel designed to dynamically adapt its content based on user interactions. I harnessed this consistent pattern not only to streamline the user's learning process but also to optimize development efforts.
Scrollable Canvas
UI
Prototype
Results
Opportunity
• Increased phone revenue and usability.
• Opened new doors for our clients, sparking curiosity about Workiz's comprehensive call products.
• This was just the MVP version, allowing for ongoing improvements and client feedback.
• A feature to be proud of (Marketing).
Challenges
• Resource limitations for extensive work.
• Terminology and labels such as caller ID, Ad group, VoIP, or Softphones proved challenging for clients.
• The usage of existing solutions (Right panel Dev limitation).
• Difficulty in relinquishing existing functionality (IVR menu after voicemail), despite only 10% of accounts utilizing it.
UI Guidelines
Style
Font
Poppins
ABCDEFGHIJKLMNOPURSTUVWXYZ
0123456789
Colors
#F8D230
#14495E
#F1F1F1
#50D58C
#FF6F64
Icons
Toggle
Radio
Checkbox
Cards
Panels
