FRAM Studio: Agency rebrand & site

Persona identification, visual identity, site design and animation prototyping for Digital dev studio FRAM

Overview

Code Union have an impressive client list, but their approach to product development isnt reflective of usual studios. Dedicated to working with interesting people doing interesting things but say No to way more projects than Yes. A visionary attitude interested in working on products where they see opportunity to scale and grow. A disruptive, confident, experienced and successful team - they needed a new visual identity to represent them.

The Problem

  • The purpose of the rebrand is not about selling to prospective clients, its about visualising their culture

  • Building on their brave and bold values, representing their values in an interesting way

  • They desire a super-slick, intriguingly unusual take on themselves - something to be proud of

  • The premium showcase of this will be their website, its more than a handbook

The Process

  • Personas: Developing a suite of personas to fully understand the depths of their users. Plotting value charts to ascertain who the identity of the site should speak loudest to

  • visual languages: Expansive exploration into visuals. Procrastinating down outlandish rabbit-holes to see what might appear. Final presentation of 30+ approaches with methodology and design thinking behind them

  • Logo variations: Defining a chosen direction, exploring the history of the design and extrapolating it with unique memorable iconic simplicity

  • Site design: A considerate, logical, detailed content structure displaced with surprising, unusual and arresting visual flare. Optimised for responsiveness yet littered with delightful animations and interactivity

  • Video Idents: The showcase section called for 5 short films to be storyboarded, shot and edited to truly demonstrate the depth of the products within the context of the new brand. 

  • Animation prototypes: to aid with the development process - animated prototypes using practical CodePen JS demonstrated all movements within the site, from micro hover states to full page experimental navigation transition concepts

  • Brand guides: to conclude a condensed brand documentation was generated to guide the development process and support future offline brand progression

The Product

Subverting the safe and corporate for the unexpected - the visual language of FRAM was born from detailed design research. Initial concepts developed from blueprints of ancient exploration vessels, early nordic rune-like typography and visionary folklore tales - FRAM had to embody moving forward and being brave.
The final aesthetic combines simple constructionist typographic lines and space with complex colour association and abstract depth.