Kino koszyk
Case
Design a new webpage integrating two existing sites for client.
Team
Designers:
Karin Johansson, Gabriella Algervik, Sally Dahlqvist, Pontus Johansson & Andreas Blomqvist
Developers:
Douglas Lindahl, Vali Al Osachi, Gustav Enoksson & Hampus Selldén
Karin Johansson, Gabriella Algervik, Sally Dahlqvist, Pontus Johansson & Andreas Blomqvist
Developers:
Douglas Lindahl, Vali Al Osachi, Gustav Enoksson & Hampus Selldén
Tools
Figma, Adobe Illustrator
Year
2023
Brief
The company Kino Koszyk consisted of two people, Bo and Joanna. They each had their own sites due to different areas of expertise but wanted the two pages integrated while still being divided in an efficient way. Joanna's main focus was on photography and books, and she had her own limited company that was a part of Kino Koszyk.
How might we create a clear information page that breathes photography, commitment, personal, culture, simplicity, "Independent photographers and documentary filmmakers with extensive experience and focus on Poland"..
And how might we create a new and intriguing website that is comprehensive for the company, yet still separated according to their respective areas, and easy to switch between?
How might we create a clear information page that breathes photography, commitment, personal, culture, simplicity, "Independent photographers and documentary filmmakers with extensive experience and focus on Poland"..
And how might we create a new and intriguing website that is comprehensive for the company, yet still separated according to their respective areas, and easy to switch between?
Finished product
1
Briefing & Meeting
The client came and talked about their company, what they do, their goals, and what they needed help with. After that, we sat in our teams and brainstormed ideas for the new interface and how to combine the sites.
We then set up a meeting with the client and our team to understand the look they wanted for the new page. After the meeting, we designers sat down again and brainstormed as much as we could.
We then set up a meeting with the client and our team to understand the look they wanted for the new page. After the meeting, we designers sat down again and brainstormed as much as we could.
2
Moodboards & Grayboxes
Each of us drew a simple graybox of how we imagined the two sites coming together. We also made moodboards to capture the overall feel of the site.
The client wanted a dark, mysterious, and movie-like site since dramatic documentary were their over all main focus and what they had been awarded for.
Next, we started making the actual grayboxes. We also made a sitemap of the site to see how the pages would connect and how many there would be.
The client wanted a dark, mysterious, and movie-like site since dramatic documentary were their over all main focus and what they had been awarded for.
Next, we started making the actual grayboxes. We also made a sitemap of the site to see how the pages would connect and how many there would be.
3
Design choices & Palette
The keywords we had from the client was ”cinematic, rustic and timeless”. Based on that, we chose to keep the theme dark and make the design in darkmode with a deep red to capture cinematic aspect. Since the content of the books, movies and what the photos represented all had a strong and heavy message, we chose the keep it black and white to visually match the feeling. For the timeless feeling, we took a lot of inspiration from magazines with big clean headings. The font we chose fot the headings was ”Playfair Display” and for a easy-to-read paragraph we went with ”Lato”.
The were very fond with their existing logo for Kino koszyk and wanted to keep that but they wanted it vectorized. To make Joannas page match the Kino page we also decided to create a logo for her that matched the Kino logo.
The were very fond with their existing logo for Kino koszyk and wanted to keep that but they wanted it vectorized. To make Joannas page match the Kino page we also decided to create a logo for her that matched the Kino logo.
4
Designsystem & Prototype
Next, we started creating the designsystem and successively build up the prototype. We used the atomic design system idea while creating our components and through all variables make it easy to build and switch out content through out the page. At this stage, it was especially me and Andreas that sat down and started working on the different components and the others were gathering all the content and started to build up the page with the components. Gabriella also created the heading videos from short clips we got from the client.
5
Handover and client presentation.
All this work was done during one week so after that week when we were more or less done, we sat down with the developers in our team to do the handover and then it was time for them to start coding. Throughout the process we had multiple meetings along the way to follow the process and keeping a good teamwork between us as designers and the developers.
Lastly, we showed the webpage and our ideas to the client. They liked what we did and thought we captured the overall feeling they wanted throughout the page.
Lastly, we showed the webpage and our ideas to the client. They liked what we did and thought we captured the overall feeling they wanted throughout the page.
