Distrikt

Distrikt is a small Helsinki based full-solution digital agency, where I worked as a UX developer and designer. We decided to renew our brand, and update our marketing site, to better showcase our talent. Our old brand design was outdated and didn't really differentiate us in the competitor space at all. In this in-house project i worked as the developer.

An agency that couldn't show what it was capable of.

Project goals were quite straightforward. Get more sales through marketing page that would attract more customers by clarifying our offering, showcasing our talent better and distinguishing ourselves better from the competitor space. The brand image would be refreshed, and marketing goals would be set. Effort would be made so that people could contact us through the website easier. Site would also have to be technically updated to a JAM-stack project.

Distrikt site color palette

Co-creation, competitor analysis, motion-led storytelling.

We had bi-weekly design meetings where we went through the intiial wires and brand image, through iteration and competitor analysis, brand image was clarified and presented to the stakeholders, who made the final decision from short list of brand designs. Actual wireframing and layout work was done on Sketch, Framer and Zeplin. to gather our Our two designers prepared me with a lot of assets, mobile first, and I started to update our page. We decided to use Framer motion library, so the animations could be as close to the ones designers had prepared as possible. Our process of co-creation included a design spec which contained layout in zeplin for mobile and desktop, micro-interactions for component and other parameters for the components, which i would then code and pass back to the designers to check and approve.

We used framer motion library to create stylish motion

Work was pretty fast and straightforward, and very enjoyable. I used react with next.js framework and typescript, with Prismic as our CMS. This gave us possibility to create Slices of content that could be used in multiple pages and minimize the amount of hard coded layouts and repetition. We use Typescript for content types, made static build and prerender the pages so they could be SEO-optimized the best. All components are functional and try to follow modern best practices. For component styles we used CSS modules with sass and styled components if necessary.

The end product is a good looking, technically modern website that reflects the brand and feeling that Distrikt wants to portray. A marketing campaign has been launched after the site was ready to showcase the new image and look in social media. Some paid traffic is being driven to the page and it has proven efficient. The overall feedback from the site has been good, and even if there always is more work to be done, I learned a lot about front-end development through this project. Main learnings was deeper understanding of framer motion library, and framer tool in general.