Citationsy

Well, it’s finally upon us. The brand-new Citationsy.
Over the last couple months I worked with a design agency in Leipzig — Büro 222 — to completely overhaul the look and feel of Citationsy.
This affects both the web version (www.citationsy.com) as well as our mobile apps (iOS and Android).
The redesign also includes a brand-new logo.

“The goal of the new design was to take Citationsy seriously as a tool, and to optimise the user interface for a concentrated and distraction free workflow.
With Georgia as our brand typeface we decided on a timeless classic that radiates practicality and was engineered specifically for screen use. It also loads instantly, since it comes pre-installed on all computers.
Georgia is not typically used in large sizes, and by doing so we let its confident, literary personality shine. Also, it has the most beautiful asterisk * of all.”

— Lukas Löffler, Büro 222

First, the logo. Our old logo was just the word “Citationsy“ set in our font back then, Aileron.
For the new logo, they chose the typeface Georgia and added the asterisk. The asterisk also works brilliantly on its own, as a favicon or app icon.

Comparison between Citationsy’s old and new logo

Examples of Citationsy’s logo in action

We also use Georgia throughout the website:
Screenshot of the Citationsy Website

Our old website only had one colour, a blue I chose at random. On the new website we use the same colours as the Citationsy app itself does.

Here are a couple screenshots of the new UI inside the app itself.
We consolidated all the functions into the right hand sidebar, labelling them and making things (hopefully) more obvious.
We also made several usability improvements, like not having to go into the edit screen on a reference to delete it – you can now delete references in the project.

Citationsy Screenshot

Citationsy Screenshot

Check out one of my favourite interactions: