\n
![\"designing-text-8\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021542\/designing-text-8.jpg.webp\")
<\/p>\nBeing a good designer isn’t always about having a beautiful end result that will hit the number one spot on Dribbble. More often than not, it’s about tackling unique constraints and making continuous improvements until you arrive at the best possible result for your users. In this article, we sit down with Ben Clemens, a product designer at Digit to discuss how they design simple text messages and mobile notifications to be more appealing and user friendly.
\n<\/p>\n
Digit<\/a><\/p>\n is an intelligent assistant that dynamically analyzes your finances and figures out ways to help anyone put aside money in savings, and it’s interacted with through a web interface and text message interface. As a financial product it’s extremely important to get all the details right, and a lot of the interactions are via short messages, small blocks of type! \nI’m a Product Designer, a generalist who works on all parts of the experience, from figuring out what the product could be to shipping production code.\n<\/p>\n \nWhen I got out of school in Philadelphia, Pennsylvania (just after the earth’s crust began to cool), I worked for a company that did typesetting called Meyer Typography. They still had Mergenthaler Linotype machines there and offered phototypesetting for the few aging art directors that still wanted it. The operators of those machines would compose blocks of text manually, and would sometimes re-write sentences so they made prettier “color,†the term for an even, pleasing distribution of type within a paragraph. Typesetting and illustration were the better part of design, with color photos an expensive gimmick. One of the older guys there told me a story of how Samuel Clemens was so upset about typesetters rewriting his words that he invested in early mechanical typesetting machines, so that printers would stop changing his copy (I have no idea if that story is true). \nWhen designers talk about type design, ordinarily they mean choosing a typeface or adjusting the details of spacing or layout, but design really should go deeper, deal with the design of the block of text itself. By treating text as a visual medium, you can make even the most ordinary things more elegant and beautiful. \nLets take an (actual) fairly boring update about your bank balance. \nI think of it like being a working actor, where you do whatever you can with the material you have. Actors say, “there are no small parts,†both as reminding themselves that even a couple of lines can be extraordinarily hard to get right, and not to get too far away from doing whatever it takes to serve the larger performance. Also, if the constraint is really congruent with what a person using your design wants, then it’s just a matter of working the materials you have. In this case, a short and elegant message is a good design for a user’s needs, so it’s not really a limitation at all. Text is a visual medium. Make it beautiful. Header image created using Sketched iPhone 6 Mockup<\/a>.<\/em><\/p>\n
\n![\"designing-text-7\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021546\/designing-text-7.jpg.webp\")
<\/a>\n<\/p>\n<\/span>What’s your role at Digit?<\/span><\/h2>\n
<\/span>How did you first become interested in type?<\/span><\/h2>\n
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021549\/designing-text-9.jpg.webp\")
\nBy the time I left that job a year later, all those operators were gone and their machines were replaced by the Macs I worked with. In years following, more and more sophisticated graphics became possible on computers, and then mobile devices, to the point where it was somehow obligatory to make every design a photo-realistic rendering of a real-world object. Just in the last couple of years, however, the tide has shifted. Inundation with information has made people prize designs that show less, make the world less crowded. Designers now prize the simple, spare, and clean, and take out as many graphical devices as possible. The lack of these doodads and drop-shadows doesn’t leave less meaning, however, it reinvests meaning into (for example) the simple composition of text.
\nThe product I design with the team at Digit is mainly interacted-with through mobile notifications. You might not think that notifications are a visual medium, or that it would be possible to make a text message beautiful, but when every character and space counts, the old ideas of type composition are useful once again. And in fact can be nicely melded with the most up-to-the-minute trends in mobile design.\n<\/p>\n<\/span>Why is it necessary to make texts and notifications more attractive? Don’t they all look the same?<\/span><\/h2>\n
\nWhat challenges have you faced when attempting to design type without traditional customization options like typefaces?
\nI don’t really think of constraints as challenges—every design context has constraints (and that’s a good thing!). The constraints here just push us to look harder for the solution.\n<\/p>\n<\/span>Can you walk us through an example?<\/span><\/h2>\n
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021552\/designing-text-1.jpg.webp\")
\nOk, I think I know this is Text Banking, so we can lose that, and I only have the one checking account, so no need to identify it with a number. I only really care about my available balance, and what might have changed recently. The “BAL†is there to remind me that the text command to see my balance is BAL (not “Balance†or “B,†weirdly). Let’s rework this:
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021556\/designing-text-2.jpg.webp\")
\nMuch better. Visually, a sentence would be better (and fits the context anyway), so let’s do that:
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021600\/designing-text-3.jpg.webp\")
\nNow we have plenty of room for another sentence, to continue the story:
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021606\/designing-text-4.jpg.webp\")
\nNow it feels like a person talking to you, and we can build on that feeling of conversation by breaking up the lines and giving another cue:
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021610\/designing-text-5.jpg.webp\")
\nRemoving the single quotes cleans up the color of that block, and the new block is a great place for expanding this message into a conversation. Each line feels like a visually parseable block. And, that new interaction helps me remember to do something we should all be doing a lot more of: saving.
\nNow, this might seem like just some textual details, but the difference between the start and end is mostly visual, from impersonal and vague to personal and conversational. That’s not the copywriting so much as the arrangement of elements in the space allowed: design. And, as John Updike says, writers and painters have a lot in common: we both want to make “dark marks on white paper.â€
\nAnd, in fact, the simple text update is right on the very edge of new design context: notifications. In iOS 8 and Android Lollipop, notifications are rich, interaction-enabled cards that sit right on the lock screen. This is a useful “breaking apart†of the existing app paradigm into discrete interactions or cards that are pushed to the user, and they appear on some of the most sought-after real-estate on the planet. For a lot of applications, they are better than being in an app (or having to open an app and switch contexts).
\n![\"text\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03021614\/designing-text-6.jpg.webp\")
\nThe design for these notifications are contained in the text and possible actions, rather than some Photoshop document. This enables a notification to be portable, appearing on lots of different devices as a bubble, a card, or lock screen. It’s adaptable, since the rules of displaying and reflowing text are well supported by modern platforms. And because of that portability and adaptability, things that used to be hard to imagine (for example, personal financial information appearing in a very personal space) become possible, simple, and elegant.\n<\/p>\n<\/span>What advice do you have to other designers working with constraints that make them feel limited in their creative capacity?<\/span><\/h2>\n
\nAlso! If you’d like to try Digit (an intelligent savings assistant), you can jump the line with this link<\/a>.\n<\/p>\n
\n
\n