Giving our hawk a makeover

Who we are

Hello there! We are Mariana Cerveira and Filipa Cruz and we were part of the summersmith cult! This summer at Whitesmith they gave us a very specific task: to re-design Hawkpost. When we thought of giving Hawkpost a makeover we felt excited and scared at the same time, and because it’s not easy to re-design, we rolled up our sleeves and started the hard work.

What is Hawkpost

Aren’t you tired of sending passwords or confidential information unsafely on chat or e-mail? Of being worried that someone might get access to valuable information of yours? Long story short Hawkpost is a way for you to easily receive private and confidential information, without installing any software at all! Hawkpost provides end-to-end encryption using OpenPGP.js library.

The concept is simple: get encrypted data from people that don’t know how to encrypt! You generate a unique link on Hawkpost, then you share it with someone that needs to send you secret information. When that person visits your Hawkpost link and submits the sensitive data, this is encrypted in their browser with the PGP public key you used on signup. The encrypted message is sent by our hawks to your email and you can decrypt it with your private key. Want know more? Check this out!

The new Design

Since the hackathon (where we created Hawkpost) we knew that the design was probably the first things to improve. A cool product needs a cool design, right? The first step was to analyse the previous layout and understand what could be a strong enough concept in order that we could build a new design around it and…. a lot of research later… we found a funny little gif about how a key opens a lock. With that in mind, we started designing the new Logo thinking that its letters would be both parts of the lock, and only after the key was entered you could fully see and understand the whole world. Well, I think we really hit the jackpot there!

The new design concept allowed us to be really inventive and, at the same time that it fit like a glove with the product.

But… with great jobs come great challenges and building the very best mockups was not very easy until our fellows’ senior designers intervened. That´s the beauty of teamwork! Even if you are a rookie like us, with a little help from your fellow design ninjas, you cannot only learn LOADS of cool stuff, but you can also make your work 200 times better.

After a while we began to apply our mockups starting with the landing page, using always the black and white and sometimes the blue for highlights for a simple but strong vibe. However, we still were under the impression that our mockups and the actual website did not have the same feel, so we started to apply different color sections in several pages and to pay more attention to which details could we improve.

The tools

Going for the spirit of the true Whitesmithian, we let go of most paid programs to welcome the wonderful world of open source. With that being said, the mockups were created in Sketch and the web developing was done in both Sublime (used by Mariana) and Brackets (used by Filipa). Just in case you are really curious about how everything went down, we programmed with sass, gulp and a little bit of django (besides the regular HTML5 and CSS3) in order to be able to make the most out of the knowledge that our designer senseis taught us over the summer.

Final Thoughts

In the end, we felt like we have accomplished something important! It wasn’t just a school work, it had a purpose for many possible users. I guess you could say we are quite happy with the final result, taking into consideration not only how hard we worked and the final result, but also how much we managed to learn and evolve due to this project.

Don’t forget to try Hawkpost and share it with all your friends, colleagues, and clients!