Yunjoo Lee
Yunjoo Lee
ascii6.jpg

Ascii typewriter

Ascii typewriter is a website that enables users to explore and customize letterforms. I created the original concept, conducted user research & testing, and collaborated with an engineer to launch this tool. This project was awarded the Core 77 Design Awards 2017 under the visual communication design category.

Creating ASCII art is a pain

Creating ASCII art is a pain

Let’s say you’re a designer who wants to convert text into ASCII art. Basically, you want to make a design of letterforms using special characters.

 This process is tedious and time-consuming because creating ASCII requires the manual creation of backgrounds and foregrounds.

This process is tedious and time-consuming because creating ASCII requires the manual creation of backgrounds and foregrounds.

 Let’s say you wanted the background to be a hashtag #. And you want the foreground (or the letter), to be composed of question marks.  In order to do this, designers usually spend hours in Illustrator first with the background, then manually remove specific rows of hashtags to make room for the question marks.

Let’s say you wanted the background to be a hashtag #. And you want the foreground (or the letter), to be composed of question marks.

In order to do this, designers usually spend hours in Illustrator first with the background, then manually remove specific rows of hashtags to make room for the question marks.

 Now, using ASCII Typewriter, designers and artists save significant time and effort because my tool automates this process. All you have to do is simply select your desired background & foreground, and type!

Now, using ASCII Typewriter, designers and artists save significant time and effort because my tool automates this process. All you have to do is simply select your desired background & foreground, and type!

Concept Development, User Testing

Concept Development, User Testing

I started the project through a combination of prototyping and user research.

// Paper prototype

For initial user testing, used paper prototypes. They're great because making changes is a lot faster with this low fidelity method: I went through 7 iterations of this design as I gained more insight from user testing.

User research and testing

User research and testing

Fortunately, I was able to conduct user testing on my target audience: 15 designers and artists.

These were the tasks I provided during user testing:

- Selecting a foreground

- Selecting a background

- Leading options - did they make sense?

What I learned was that…users had difficulty with the navigation / choices in the typewriter. Initially, I had a toolbox. Users were confused with it. Redesigned so that users can use direct input instead, saving a number of steps.

Another thing I found surprising was that designers did not care for other design options I had in the tool, like color. Quote from user test: “I prefer my ASCII text to just be black and white”

As a result, I reduced the number of functions to make this tool as simple and easy to understand as possible.

How I arrived at final product

How I arrived at final product

Go to the Ascii Typewriter website.

After collecting all the user research insights, I knew that there’s still a large gap between paper prototypes and what a final product could be. I decided to make an HTML prototype so that users can test this out.

Part of this effort was coding my own jQuery, HTML, CSS to create the selector buttons and the basic framework of the page.

I worked with the talented programmer Heedo Kim, a student from KAIST who created the backend logic to generate the ASCII text.

Collaboration and changes:

- I designed the system of the letterforms, including loose/tight leadings making different fonts and composition of letterforms such as foreground + background, and the number of special characters for use in the website. 

- I worked on UI/UX part of the project as well. Making it simple & easy to use and designed overall look of the website to resemble old window sites.  

- He created selection tool in a different style, size of the ASCII art was too large.

- He made it possible generate ASCII art by typing the letter on the keyboard. 

- He made changes to the keyboard cursor to look different with different fonts.

- I created Visual examples for each edit. We made 10 different versions before we landed to the final outcome. 

Conclusion

I presented the final outcome to Juerg Lehni, the digital artist who created Paper.js,  and Alex Shoukas, the Senior Designer at Bloomberg. The project was also awarded in the 2017 Visual Communication Section in Core 77. 

Final Outcome: 
With Ascii Typewrite, you can convert any text to ASCII art from Ascii Typewriter with just one click and typing. I eliminated all the unnecessary elements on the screen so users can view the text in the full screen. Also, simple navigation enabled users to use the tool more easily without explanation. 
Challenges: 
As a designer, programming language was the most challenging thing in this project. However, I self-taught some of the basic programming languages by watching tutorials and also learned a lot by working with the programmer friend. It was easier to communicate with the programmer, once I knew the language better. 

Here are the key takeaways from the project: 
It's never easy to make a universal tool that anyone can use. 
Making it simple is harder. 
When designers are communicating with programmers, the visual example is most effective way to communicate. 

Possible Outcomes in the Future
I got a lot of feedback from the designers to make it into a font, so it can be used in the print designs. My next step to Ascii Typewriter will be making it possible to save/share the ASCII art that you created on the website.