Jottly

Jottly, a Bloc.io UX Design project, is an online collaborative text editor. The live version of Jottly is at DISPLAYBLOG.com/jottly. Jottly was the first web page I created from scratch using HTML, CSS, and a tiny bit of JavaScript. The goal of the Jottly landing page was to convince you to try it out by clicking on the I’m In! button at the end.

There are text editors, on-line text editors, and collaborative text-editors. But on-line collaborative text-editors are not common. And the ones that are available are either simple but not powerful enough, or too powerful and complex. I didn’t have a lot of good examples that inspired me, so I started out with Sublime Text, a popular desktop text editor that was introduced to me when I was in the Full Stack apprenticeship at Bloc for three months, before I shifted to UX Design. Another text editor gaining popularity is Atom.

Personas

Before I get into the nitty-gritty of how the UI and UX were designed, I’d like to start from the very beginning. Thinking back — it was about 8 months ago and my long term memory can definitely use an upgrade — I believe the first thing I was asked to do was to create personas of those who would be using Jottly, and what for.

First was April Kim; here’s her persona profile, created using InDesign:

The purpose of this exercise was to get a good idea of what her needs and goals were and how Jottly can help meet and achieve them, respectively. By the way, in my imaginary Jottly world April Kim is a Senior Editor at Facebook. She leads a team of seven — located all over the globe — who update Facebook’s Newsroom page. I created two more personas and their profiles: Jack Sato, an Aikido Instructure, and Terry Park, a Developer at IDEO. Jack is not terribly computer savvy but uses Jottly to keep track of his students and how they are doing; he uses Jottly as a journal. Terry is a hard core programmer and needs Jottly to be powerful, just as powerful if not more than Sublime Text or Atom, but also similar so as to not require a steep learning curve. At this point I was thinking Jottly will need to be both simple and powerful. The persona idea is a powerful one and helps put myself in the shoes of those who will be using the websites and mobile apps that I design.

Icon Design

Next I’d like to share how the Jottly icon was designed.

Jason, my mentor, encouraged me to come up with as many logo designs as possible. So I did just that. I took great liberty to copy many existing logo designs for word processors, text editors, and the like. Take a closer look at the one on the bottom right: that should remind you of Sublime Text’s icon.

This page is filled with icon designs centered around the idea of incorporating writing tools (pencils, pens, fountain pens) and using the first letter of Jottly.

I took the letter ‘J’ and played around with it some more.

Here’s some more designs incorporating the shape of writing tools. The one in the middle is a stylized ‘J’.

I wanted to see how things would look like with a 3D perspective, compartmentalizing a circle, and making the letter ‘J’ blocky simple.

This, created using Illustrator, ended up being the final design. Similar to what I wanted the web application itself to be the icon here is simple. The letter ‘J’ — for Jottly, or a writing tool if using copious amounts of imagination — leads a line, which can be thought of as a line of text. To soften the sharp edges of the letter ‘J’ and the following line, tight radius corners were used.

User Interface Design

What better way to convince the web app is worth your time to try out than to show the web app itself? That’s what Sublime Text and Atom do: the UI is right there front and center. Sublime Text nicely animates the UI. I wanted to do that too. I did, but the challenge was that it was not responsive to different page widths, and neither is the animation on Sublime Text. I decided responsiveness was more important. So instead of animations I chose a few choice images. These images are in SVG (Scalable Vector Graphics) format. Resize the browser window and the UI images — along with all other elements including the icon and text — should respond accordingly. A quick geeky note: viewports (vw, vh) were used instead of px or em to maximize text size responsiveness. Check it out at DISPLAYBLOG.com/jottly.

I took design cues from multiple sources. The tabs were from web browsers. The right- and down-facing triangles to open folders were borrowed from Apple’s operating system, as were the + button to create a new folder or document.

At first the text editing portion of the UI was blank and filled with Lorem Ipsum gibberish. I thought that was a waste of an opportunity for something more useful and decided to put in descriptions and instructions in there instead.

Testimonials

I went back to my three personas — April, Jack, and Terry — for my testimonials. Before this project I didn’t think much of testimonials, but I learned they are powerful. Testimonials connect you to those who are already using the product. I code a little and journal too, so I connect to what Jack (journal) and Terry (code) have to say.

Call To Action

I stuck with the three words — Write, Share, and Collaborate — throughout the landing page. I’ve read on multiple occasions that repetition helps with memory.

Many signup forms require your name, email address, and some form of agreement to a bunch of terms and conditions by way of clicking a button. I think that’s an unnecessary hurdle for testing out a web app. So I got rid of all of that and required the one piece of information I thought was essential: your name. Your name would be used throughout the user interface to make the experience yours. I would ask for additional information — such as your email address and password — if you decided to save your work on Jottly.

This is where the rubber meets the road: have I successfully persuaded you to click on the I’m In button to try Jottly? If you haven’t already, hop on over to DISPLAYBLOG.com/jottly and let me know if I have. Or not.