Podcastuje.pl

My first commercial project with the Coding Tree team, consisting of a comprehensive UX&UI design, digital illustrations and branding for Jedrzej Paulus - a podcaster with many years of experience in the IT industry.

Introduction:

Client: Jedrzej Paulus | Podcastuje.pl
When: March 2020
Agency: Coding Tree
Role: UX design × UI design × Branding
Tools: Adobe Xd × Adobe Photoshop × Adobe Illustrator
Brief
In this project I worked in a team of three - two UX/UI designers (me and Jakub Wojton) and one senior UX/UI designer and Full Stack developer (Jozef Rzadkosz). We received guidelines for designing a completely new website for Jedrzej Paulus. Jedrzej is a podcaster with several years of experience in creating podcasts and editing audio. The main goal of the website was to attract customers who need help in creating their own, unique podcast and its technical processing. Jedrzej also wanted it to be a place where he could share his original Developer Wannabe podcast and inspiring articles from the IT industry with his audience.

The Podcastuje.pl website had to strengthen the basic business values of Jedrzej's activity: professional, fun and creative. The site also had to distinguish Jedrzej from other players on the market, emphasizing his universal package offer and unique media personality.
The main goals of this website were:

1. The ability to easily learn about the wide Podcastuje.pl offer.
2. Possibility of quick contact with Jedrzej in order to purchase a package of services or receive an advice.
3. Presentation of interesting content that Jedrzej creates on the web.
4. Get more people interested in podcasting.
User Research
Who are we really designing this site for? Jedrzej had already run his business on slightly different principles, but he was able to define who its audience was. After many conversations with him, we defined two key user personas that will be using Podcastuje.pl, each with specific needs and problems that needed to be addressed on the site.
Based on the two user personas we identified the main user needs we wanted to address in the website while also taking into consideration the needs of Jedrzej’s business. 
The primary needs we defined were:

1. Transparent presentation of the podcast offer, divided into packages, so that every customer can easily and quickly find something for themselves.
2. Service reviews to help make informed buying decisions and allow for user input.
3. Searchbar for even faster searching for specific information.
4. Very easy access to the contact form from each subpage.
5. Separate subpages for Jedrzej's individual podcast and blog activities.
6. Basic tips for aspiring podcasters right on the page to establish trust.
 Site Map
Based on the needs of users and the business needs of Podcastuje.pl, we created a site map to define the general structure of the website. This was to ensure that everything is well organized and that to make user experience more intuitive.
Wireframes
Having all the features of Podcastuje.pl website in mind, we started to craft ideas and create basic wireframes. Sketches evolved during many of our meetings with Jedrzej, discussions on the arrangement of components and the general structure of subpages. Below you can see the final sketches of the six pages for which I was responsible in the project.
Branding ideas
Once wireframes have been accepted by Jedrzej and tested by our other Coding Tree members, we started to think about the UI side of the project. First thing that we followed up was creating some elements of branding for Jedrzej - he wanted to start something brand new with fun and creative feeling. Firstly we came up with a logo that will reflect what he does and what his personality is. 

We did a big brainstorm with the entire Coding tree team and our colleague Kazimierz (real Paint master) came up with the idea of a microphone with a beard that would perfectly reflect the vibe of Jedrzej. It started with sketches and many different concepts created by Jozef Rzadkosz. I got involved in the final phase, adding some colors and a unique tone to the entire creation.
Having in mind the basic business values of Jedrzej's activity: professional, fun and creative I came up with the idea of creating a set of vector illustrations that we can use on Podcastuje.pl website and in various marketing materials for Jedrzej. The first one, which we used on the homepage and which Jedrzej uses as an avatar in his social media, was based on his photo, which gives Podcastuje.pl a very strong personal touch. Illustrations were made in Adobe Illustrator. 
UI concepts
For the next few weeks we focused on the visual aspect of the website and the detailed refinement of the entire UI concept. This is the time the wireframes started to live and shine!
1. Homepage

I decided to introduce the user to the world of Podcastuje.pl through a strong hero image with the likeness of Jedrzej, clear and short information about what he can offer and a primary and secondary call to action. To allow users to locate and find products easily, I have included a search icon in the navigation. 

The following sections present briefly everything that the user can find by exploring the entire website in more detail. We have a three-column division of Jedrzej's basic services, a carousel with short descriptions of podcast packages, two latest blog articles and four newest podcasts recorded by Jedrzej. I wanted to emphasize the importance of the client's relationship with the Podcastuje.pl brand, highlighting the rich experience of Jedrzej and his personality. I turned it on by putting a customer feedback section on the home page, also in carousel form. In the footer, I put contact information, links to social media, a contact form and a form to subscribe to the newsletter. We wanted access to convenient communication with Jedrzej at the bottom of each page.

The whole thing has a unique vibe thanks to design elements such as static and animated circles that are associated with sound.
2. About me 

On the About me page, I wanted to smuggle as much of Jedrzej's personality as possible and design everything as a story, not a boring text that nobody would want to read. I focused on an engaging introduction to the story in the form of speech bubbles with questions from the Jedrzej's audience. It's something that users can identify with and something that perfectly introduces the rest of the story.
The text provided by Jedrzej was placed in a white box that resembles a blog article that is easy and pleasant to read. There were also different sizes of fonts and colors to emphasize important parts of the history. Under the "article" I put a call to action which leads to the offer and continues the story itself - something like: "You already know who I am and how I got where I am. Now check what I can do for you" :)
 3. Offer

In order to be consistent throughout the website, the sub-page with the offer also includes a thematic illustration and a clear introduction of the user to the content that can be found below. I presented all podcast packages in the form of cards with a description and a contact button. I also created icons for the section with information about the form of settlement. At the end, there is information about three additional services that the customer can order, maintained in the form of a three-column division already known to users from the Homepage.
4. Blog & Podcasts

I kept these two pages in the same pattern: a consistent hero image and simple cards leading to specific articles. The titles and photos come from Jedrzej's previous blog - I wanted the design to adapt to his activities as much as possible - to be flexible in terms of the length of the titles and to look great with different photos.
Responsive Web Design
Once the desktop version of our design were tested by few users and accepted by Jedrzej, we create mobile versions for tablets and phones. Due to the limitations of mobile devices, we had to give up a few elements on the hover but on the other side we could create convenient buttons right next to the hamburger menu to allow users to quickly contact Jedrzej through their phones.
Summary
The Podcastuje.pl website has already been coded by Jozef Rzadkosz from Coding Tree and connected to Wordpress, so that Jedrzej could customize it freely. The site is still being tested and improved, but it already collects a lot of positive feedback from users. Jedrzej cannot chase away from orders :)

Working on this project was a great adventure. I learned to work in a team, talk to the client, combine business needs with the needs of users. It was not without stumbles and corrections, but the whole experience taught me more than ten times more time watching tutorials and reading guides.

By clicking on the button below you can see the page live and test it in action.

Other projects

Back to Top