UX / UI
Interaction Dialog Menu
After the release of our new transaction detail page within Brivity CRM, we received feedback from our users that they were getting frustrated when they lost progress on a written email having closed out of interaction modals in order to reference page data. Some users just wanted to copy and paste something from the page beneath the modal, while others wanted to reference the financials section placed under a mid-page tab inconveniently hidden by the overlapping center-positioned modal. Example to the right.
Role
Lead Product Designer
Resposibilities
UX/UI
System Design
Product Strategy
Prototyping
project length
2 Weeks
The Problem: Above you can see a modal covering the page, hindering a user from multitasking. (i.e. referencing page data & interacting with their contacts at the same time)
Inspiration
While I was messaging some connections within my network on LinkedIn, helping my boss find some more candidates for a product designer role, I noticed the non-modal dialog that LinkedIn used for their person-to-person messaging. I was impressed by its simplicity and ease of use on desktop for collapsing and expanding multiple interaction dialogs so the user could not only interact with a contact while referencing page information, but also keep multiple conversations open.
I knew this direction had potential, however I was going to have to adapt it to allow the ability for multi-channel interactions (i.e. Call, Text, Email, Scheduling Appointments, and Notes, as well as a timeline or “History” for all contact interaction)
Exploring Options
Process insights
Throughout this two week design process I explored multiple ways of attaching the collapsed dialog to the screen. Here you can see me exploring a fixation to the right of the screen.
Refining the Interaction Tabs
After some debate with the other product designers in our weekly project review meeting, and having talked to product owners & stakeholders, we decided on a bottom fixation. This approach won because this option stayed more out of the user’s way, and a later release, would allow more horizontal room for multi-contact interaction as these non-modal dialogs started to stack up.
Working at Brivity, on a small product design team, our design work gets passed up the ladder for approval quite quickly. Our CEO, Ben Kinney, likes to pop into our files and review what’s coming, and I was lucky enough to receive some positive, reaffirming feedback from him before I made the design file ready for handoff.
Call (Connected State)
Text
Appointment
Other
Timeline
Release A
Interaction & Releases
To reduce speed to first release and minimize dev build, we aimed to enable the user to interact with one contact at a time for MVP. But in Release B, we added multi-contact interaction enabling a user to interact with up to 5 contacts at a time.
Release B
Takeaways
This project taught me how to properly define scope of a project. I spent too much time designing feature-related ideas and rabbit holes that ended up not getting used. I dove into designing too quickly and got caught up thinking too big-picture, and did not spend enough time in the beginning narrowing down what MVP priorities were for this feature. If I were to start over again, I would have asked more questions to dev about build effort in the beginning. I also grew my hard skills significantly in this project. This project required me to use the full extent of Figma’s capabilities with auto-layouts, constraints, overflow behaviors, responsive components, prototyping and more.