Refining the experience

As I moved into the mid-fidelity phase, I had a stronger sense of the core structure, but this was where I began refining how we handled thread states, status indicators, onboarding flow, integration with core CRM pages, and navigation behaviors.

Early on, I proposed eliminating the multiple status-based tabs (Snoozed, Closed, Scheduled, etc.) in favor of a single “Open” tab with a dropdown filter. This dropdown would sit above the thread preview cards and allow users to dynamically filter conversations by status (e.g., "Needs Reply," "Scheduled," "Snoozed"), rather than forcing them to switch between tabs.

My goal was to reduce unnecessary back-and-forth navigation—a user working in the Open tab could seamlessly highlight only the conversations they needed without losing context. However, this idea was ultimately turned down in favor of keeping each status as its own separate tab.

Additionally, some design constraints were introduced:

• No hover states - While I originally designed hover interactions for better discoverability, they were removed for the first pass and labeled "out-of-scope"
• No differentiation between read and unread incoming messages - Ideally, unread messages would have stronger visual prominence, but this decision was also passed upon and labeled "out-of-scope" for the first pass. This mean't that I needed to figure out an alternative way to display the status and thread being looked at.

Messaging interface elements

As I refined these designs, I focused on making the thread previews more intuitive at a glance. To help users quickly understand the status of each conversation, I introduced iconography that visually represented whether a message was waiting for a reply, snoozed, scheduled, or had failed to send. The timestamps in the bottom right adapted dynamically—showing how much time remained before a scheduled message was sent, when a snoozed conversation would reappear, or highlighting a failed message in red with the exact time of failure.

Beyond just the thread previews, I also refined the core elements of the conversation experience:

Thread headers
I structured the headers to surface key details at a glance, which allowed users to quickly find useful information pertaining to the contact, and additional actions for setting conversation state and seeing who is assigned to the thread.

Message Input Area
I focused on surfacing key messaging constraints and actions. I added a character limit display for clarity, removed formatting options that were out of scope for launch, and introduced a split-button dropdown that let users manage conversations more effectively—offering options like sending and snoozing for a set time. Additionally, I ensured users could easily insert text links, making it easier to share important information within messages.

Message Bubbles
I refined the design of message bubbles to convey the different states: sent, receieved, failed, and scheduled. Each state had visual indicators, like subtle color changes and iconography, ensuring that users always knew the status of their messages at a glance. These additional details would create a more intuitive messaging experience.

While the designs for the navigation tabs weren't my first choice, this phase had reinforced the push-and-pull of UX decision-making-balancing user needs, business priorities, and preferences of the team while ensuring clarity in conversation status and navigation. It was after this phase I felt that after rounds of feedback, I was in a solid spot to pivot and focus on our onboarding and other pages that we were planning to tie in with SMS.

From Start to Send: Onboarding

This brought me to design the getting started walkthrough, a crucial and required step to help users enroll their business without friction. Early iterations even explored an AI bot named Shelly, which would guide users through the setup directly within the inbox, but to meet our launch timeline, we re-routed to a more straightforward approach. The walkthrough was designed in three clear steps:

1. Enrollment form
Users started by enrolling through a form required for Twilio’s A2P10DLC registration. This form, which asked questions like “What are you going to do with texting?”, was built using components from our design system, making it quick to design and implement. Once users clicked “Enroll,” their status changed to “Enrollment in Progress.” If they left and returned, their progress was saved. After submitting, the status updated to “Enrollment under review,” and once Twilio provided feedback, users saw either an “Approved” or “Declined” message along with details at the top of the form page.

2. Phone number selection
After approval, users could enter an area code and select a phone number from a generated list—or request new numbers if none fit their needs.

3. Sending your first text
The final step encouraged users to send their first message. A “Learn More” link triggered a lightbox explaining the inbox features, serving as an introduction before they fully dove in.

This walkthrough ensured that even with external dependencies (Twilio), users had clear guidance at each step. By using existing components within the design system, I was able to speed up the development process and maintain consistency throughout the application.

Seamless CRM Integration: People, Companies, and Lead Pages

With the SMS onboarding flow in place, the next challenge was integrating SMS functionality within the people, company, and person pages. Each of these pages featured a timeline view at the bottom, where users could see logged activities and interactions. Directly above the timeline, users had a familar text area for adding notes and selecting the type of activity they performed-whether it was with a person, someone within a company, or an individual tied to a lead. Above that, an email button provded quick access to send emails.

My goal was to extend this communication toolkit by adding an SMS option, ensuring users could send text messages as easily as emails, all within the same interface. I introduced a new 'Send a Text' button alongside the email button. When clicked, this opened a right-hand side panel that adapted based on the user's SMS subscription status:

Non-customers
Users who haven't subscribed to Nutshell SMS saw an upgrade section prompting them to explore and purchase the feature.

SMS Customers
Customers who have subscribed were greeted with their most recent text conversation with the selected contact, if one existed.

To ensure flexibility across different pages, I designed a dynamic contact selection experience for company and lead pages. Within a company page, users could select recipients from a dropdown list of people associated with that company. Similarly, users on a lead page could select associated contacts within the lead. If only one person was linked to a lead, the primary contact's conversation was auto-populated, mirroring the behavior on person pages.

With the mid-fidelity design complete, the integration now had a clear worfklow-from initial setup through the inbox and across the core CRM pages. The 'Getting Started' walkthrough laid a solid foundation for new users, while the integration with people, company, and lead pages ensured seamless access to text-based communication.

At this stage, the core structure was in place, the only thing left was refining the interface, addressing edge cases, and ensuring a polished, reliable experience from start to finish.

The Finishing Touch

With the SMS integration now seamlessly woven into the CRM, the journey from idea to implementation revealed the power of thoughtful, iterative design. What began as a simple need for text-based communication evolved into a robust, user-friendly feature set that enhanced how teams connect with their contacts.

Throughout the process, every design decision—from initial wireframes to polished prototypes—centered around usability, clarity, and consistency. The familiar inbox components, intuitive sidebar interface, and streamlined workflows gave users the tools to send, automate, and manage SMS conversations effortlessly.

Extending the Experience

As the feature matured, additional capabilities were introduced to further enhance its value. Contextual banners were added to provide real-time feedback on SMS registration, credit usage, and account status, ensuring users were always informed without interrupting their workflow.

Text Automation became part of the lead pipeline setup, allowing teams to schedule and personalize outreach messages with ease.

And within the settings, new options for inbound message assignment and call forwarding empowered businesses to tailor the experience to their unique needs.

The Impact

The launch of the SMS integration was a significant milestone for Nutshell, adding a streamlined, intuitive texting experience directly into the CRM. Early customer feedback highlighted the ease of onboarding and the convenience of managing conversations without leaving the platform.

Internally, the cross-functional collaboration between design, engineering, and product teams reinforced the value of iterative design and clear communication. The ability to reuse core components across the interface helped speed up development while maintaining consistency.

Reflection:
This project exemplified the importance of designing with flexibility in mind—whether accommodating external requirements, like Twilio's SMS infrastructure, or building adaptable UI components for future growth. It also showcased my ability to navigate complex workflows, advocate for user needs, and deliver a feature that seamlessly fits into a larger product ecosystem.