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.
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.
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.
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.
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.
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.
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.
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.
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.
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.