My Work

Hackerbay

Creating a brand identity that communicates Hackerbay's unique values and designing a responsive website that generates business leads at scale.



Client
Hackerbay
Period
2016 - 2017
Type
User Experience Design, Visual Design, Brand Identity

The Challenge

Hackerbay is a silicon-valley startup which turns the agency model upside-down by providing free visual prototypes for peoples ideas. Hackerbay draws upon the knowledge and skills of an extended network of 'Hackers' - self-taught, technological experts driven by the endless need to learn, build and improve.

The Goal

Building a brand identity and a responsive website that communicates Hackerbay's unique culture and value proposition to generate business leads and become a trusted advisor to clients seeking innovation and digital expertise.

My Role

As the head of product design at Hackerbay, I was responsible for the user experience and visual development of the brand and the website. Together with the founders I defined requirements for the website, conducted user interviews, created wireframes and high-fidelity prototypes and introduced user-centered and agile processes in design and product development across the company.

Content element of hackerbay.com

The Brand

Hackerbay, being a startup backed by silicon-valley investor NFX, needed a brand itentity telling a compelling story about Hackers. Hackers as being self-taught, tech-thusiastic people who try to find find a way and not people stealing data.

Using techniques like free association and brand value maps, I have worked with the founders towards defining Hackerbay's brand values.

A lean process for product development

In order to enable a rapid development of the website, I introduced the Lean UX approach. This approach is in particular suitable, when design and development activities happen in short cycles or even simultaneously.

The goal is to obtain feedback as early as possible and make quick decisions. Lean UX focuses on outcomes rather than deliverables, and tries to find solutions for business problems, by defining and testing hypotheses.

In a multi-disciplinary team consisting of the CTO, the CMO, a developer and myself, we used tools like the value proposition canvas, created personas and defined business goals.

Lean UX focuses on outcomes rather than output

Sketching & Learning

After defining deriving user's goals, hypotheses and scenarios which clearly state how hypotheses can be validated, I started building quick wireframes on a whiteboard and comparing them with solutions of our competitors. The focus here was to learn, how competitors enable their users to fulfill certain tasks and reach goals and how they are communicating value.

Analysing competitors and their positioning

Prototypes enable early testing

In order to be able to receive feedback as early as possible, I created several design prototypes in high-fidelity (however not spending more than two days on the design) that should help testing the hypotheses which we have defined in the Lean UX workshop.

Exploring multiple directions for the visual language

I used InVision, to create interactive prototypes which could be commented by the team and the users I have been testing with. This enabled me to gather a different kind of feedback additionally to observing users navigating through the prototype.

InVision enables teams to collaborate and communicate on design and prototyping

Integrated brand & web development 

The challenge of developing a brand identity simultaneously with a website was big, but the structure of the Lean UX approach helped us to not loose track and focus on what's important: meeting business goals, while fulfilling the needs of our users and ensuring technical feasibility.

A styleguide helps developers, designers and marketing to keep visual communication consistent

Through multiple rapid cycles of designing and testing, we arrived at a point when the tests showed that the prototypes validated our hypotheses and the brand communicated clear values to our users. After a process of divergence, we decided on typography, colors and imagery. I created a universal styleguide for the brand Hackerbay and the development of the website, which was detailed enough to give clear guidance to the developer and the marketing team, and still simple enough so that it didn't take days to build it.

Visual design elements

The brand Hackerbay should radiate a feeling making the impossible possible, of speed, of freedom and of a unconventional new approach. I used typography, imagery and other graphical design elements to underline those attributes.

I used animated lines constructing a kind-of grid on the website to communicate speed and agility - and the ability to quickly react to rapidly changing environment.

Animated lines communicating speed and agility

Aspirational images should reflect the spirit of Hackers and silicon-valley - making the impossible possible. At the same time, I ensured the functional UI elements look and feel the way modern SaaS tools do, but infusing them with the Hackerbay brand by using the monospace font 'Space Mono' by Colophon Foundry.

A clean interface for Hackerbay's clients
KnowDrugs v1.0 on iOS