Sender UX/UI
Sender UX/UI

People who send texts with Spoke need an easy and efficient way to initiate conversations (send initial texts) with a large volume of contacts.

Area: Spoke Texter UI: Send Initial Messages

When using Spoke, texters will often sign up to send thousands of messages per day. They need an interface and flow for sending the initial messages that does a couple things well:

First, the interaction must conform to the regulations that govern peer-to-peer mass messaging. Texters need to actively send the message to the person they are contactingーit can’t be passive batch sendingーor it would be considered spam and not allowed.

Second, since the activity of sending hundreds or thousands texts one after the other is somewhat (incredibly) mindless, the texter needs an interface that allows them to complete their task with only partial attention. My rule of thumb is that the interface should be simple enough that you should be able to brew coffee while sending initial texts.

Pain Points and Solutions

Pain Point: small “SEND” button (and needing to pay attention in order to tap it)

The main pain point observed in the existing Send Initial Texts UI is a small, hard to hit SEND button.

Solution: a bigger button. At first, I experimented with (and we tested) a gigantic send button, but it looked very strange to first time users and they found it confusing. So, we released with a normal size button that was still bigger than the old button. I’d like to explore making the button bigger, instead of just not-small, in upcoming releases.

Pain Point: confusing options that don't apply to initially sending a text (e.g. forward and back buttons, skip)

Solution: The new design removes a lot of extraneous buttons that were un-needed when the only activity is sending the pre-written initial message.

Screenshots & Mockups of the Send Initial Texts UI

⁠

Screenshot: the pre-redesign “Send Initial Texts” Interface was essentially the same as the responding interface with some elements removed. Note: the very small send button.

⁠

Mockup: an early exploration of what the “Send Initial Texts” UI could look like ー simplified, very easy to hit tap-target, a progress bar. The header was only slightly different at this point in my design explorations.

⁠

Screenshot: “final” design iteration: no forward button, counter is moved to the top and the button is much larger than it was. I think the button could be bigger still but this was an expedient design in terms of implementation. Our main focus in this release was on the Responding experience.

Process

Mockups were created in Figma and shared with an audience of about 50 stakeholders and super-volunteers. After some design iteration, a code-based prototype was built. That prototype was tested with texting volunteers and their usage and reactions were observed via video and screenshare.

The code based prototype had what turned out to be way too large of a button... people couldn’t find it, it was so large that it felt like a section of the screen rather than a button. So, after some discussion we opted to err on the side of an intuitive and expedient-to-build interface. In the end, we made the button normal size and spent most of the design iterations texting focusing one the

Responding UI⁠

knowing that it would be possible to come back and further iterate on the Send Initial Texts UI later.

Future Iterations

The “Send Initial Texts” UI, in my opinion, has been effectively improved and has become more simple and therefore easier to use while doing something else (e.g. making coffee). However, as a texter, I still want the SEND button to be easier to tap.

Bigger “Send Initial Texts” button

https://github.com/MoveOnOrg/Spoke/issues/1577⁠

⁠

Expand to full screen send button (needs exploration)

Full-screen sending games

https://github.com/MoveOnOrg/Spoke/issues/1384⁠

⁠

Ideally, as a texter, you should be able to send texts while paying attention to the people on your video conference or any task that doesn’t require your full attention.

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP