A Womply user can add a customer to their Customer Directory in three ways:
Create a Customer - Manually add and save a single customer one at a time
Upload Customer List - Upload and import their customer list via excel documents
Save Your Credentials - Manually enter an Email service credential and wait for a Womply's Customer Success personnel to manually import their saved contacts
WHAT I DID
I was the product designer responsible for this project and led the end-to-end design process and re-designed a whole new experience for Womply's 'Direct Connect' feature on our Customer Engagement platform.
ROLE, RESPONSIBILITIES, & DURATION
Lead Product Designer | Womply
B2B Web Dashboard
User Research, Information Architecture, Paper Prototyping, Interaction Design, Visual Design
July - October 2018
My Design Process
Throughout the process, I actively communicated cross-functionally with product managers and engineers and pushed for open communication to discuss what was possible, be aware of limitations in our back and front end, and ensure that all scenarios were covered.
To start off this project, I made sure I had a complete understanding of what the current user flow was, define what was working, what was missing, and ultimately create a new user flow that accounted for all the scenarios an user could encounter.
As discussions went on and I found more information, I was able to refine and be more specific about the new user flow. Talking to both product managers and engineers was an essential communication step because I was able to get different perspectives and get a lot of clarification throughout the project.
My general flow was for refining the new user flow was:
White board initial thoughts
Discuss with stakeholdiers
Iterate on further discussions
Discover and define error states and edge cases
THE PROGRESSION OF USER FLOW COMPLEXITIY
ANALYZING EXISTING DESIGNS
After the UI analysis existing feature and understanding the full new user flow, I moved straight into sketching various versions of each step. I found that this was the easiest way to jot down all my ideas.
Understand how many different ways we can display text, buttons, and tables in a confined modal space
Explore possible interactions possible within a modal
For each iteration, I listed pros and cons for each and conducted in-house usability testing with coworkers.
I narrowed 4-5 iterations to 1 final version before proceeding to work on the full user interface design. I created the high fidelity design and imported them into InVision for final user testing rounds. After getting positive confirmations about my design from users and stakeholders, I set the designs up for hand-off to our engineers.
Introducing ‘Direct Connect’ which allows for more efficiency and control
Introduced a new ‘Direct Connect’ service with the usage of Oath connectivity allowing customers to direct connect with various services such as Gmail, Mailchimp, and many more.
For users who still want Womply Customer Success personnel to help them upload their customers, I provided a pathway for them to still do so.
More visibility with email services
With improved visual indicators, Womply users can easily tell which services are connected and disconnected, allowing them to resolve any issues quick and efficiently.
Also introduced a new interaction to show the accessibility to add an email service.
More control on who to import
Introduced a customer management view so Womply users can select or de-select who to import from their connected email service list.
Added visual indications to allow users to see the essential information about their customers.
More personal messages
As a way to increase engagement and excitement with our flow, I defined success and error messages accompanied with fun illustrations.
Womply Direct Connect fully launched December 2019 and we saw users utilizing Direct Connect with services such as Gmail and Mailchimp starting January 2019. The percentage of engagement of the Customer Directory with Womply users has seen a positive increase in engagement since Direct Connect was launched.
What I learned
Looking back, here are some of the key things I learned from this project:
It's important to have open discussions with every team member involved in the project to ensure that everyone is on the same page, aware of any changes, and offer different perspectives. I appreciate having different point of views outside the design team because we all have great ideas on contributing to a better experience for the end user.
I have an increased love for paper sketching and usability testing :)