Case study: Creating a new story on Medium
I’ve been thinking a lot about new opportunities lately. We’re still at the beginning of a new year, this week marks the start of a new administration, and as weird as the last twelve months have been, I feel optimistic. This week I decided I’d design something that signified the start of something new. It didn’t take me long to land on creating a concept based on the very platform on which I’m writing this post: Medium.
I love Medium for its simplicity and straightforward nature when writing posts. But, on the Android app, I have always found it a little surprising that it takes two taps for users to start writing a new post. One must tap the hamburger menu in the top left of the app, and then tap “New Story” on the menu that slides out, as seen below:
I decided users should be able to create new posts with one tap. It turns out that Material Design actually has a built-in functionality for this exact use-case: the Floating Action Button (or FAB). If you’re unfamiliar with what a FAB is, here’s an explanation as per Material Design’s site:
“A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.”
A FAB is the perfect solution to allow a user to quickly beginning writing, but I didn’t want my FAB to be just a regular plus sign, like many apps in which I see it implemented. I wanted this FAB to have a tiny bit of personality, and I wanted it to be a subtle nod to Medium itself — yet still clearly convey its purpose.
At first I tried putting a plus sign within the largest circle shape of the Medium logo, or next to it. But it didn’t look quite right and it didn’t clearly convey what the button was supposed to do.
After staring at the logo for a minute (which is an abstraction of an ellipses), I noticed that the farthest most right “dot” is quite thin and that it could be manipulated slightly to convey what I wanted. I duplicated it, flipped the copy horizontally, and then overlaid it on top of the original and…voila, it looks like a plus sign!
After that I simply framed it within a standard FAB circular shape, added a drop shadow for emphasis, and placed it in the bottom right corner of the app, as per Material Design’s design system specifications.
This was a fun challenge because while utilizing a FAB is not uncommon, it greatly improves usability on the app for Medium writers like myself. I also found it to be a cool creative exercise to try to align this particular new post button subtly with the Medium brand itself, instead of just using a “typeset” plus icon. Creating something that is both usable and distinctly within the brand’s voice is always something I strive for.
Now, if you’ll excuse me, I’ve got to get back to creating this post.
