Padio

Graphic design, branding, UI/UX

A clickable visual prototype for Padio, an imaginary community podcast website, made with Zoe Wells.

The prompt for the Creative Jam, saying 'Your challenge is to design a third-party desktop app or website that serves as a single-stop resource for any media related to a topic and encourages users to find new interests, events, and communities.' Handwritten notes brainstorming for the prompt

CREATIVE JAM PROMPT & INITIAL BRAINSTORMING FOR CONCEPT

About the Project

Padio (combining pod and radio) is a imagined podcast platform for connecting podcast creators and their communities. This idea was inspired by the prompt (pictured above) from the Twitch and Adobe Creative Jam. This prototype was made by Zoe Wells and me.

I made the logo in Illustrator and came up with the visual branding while Zoe worked on user experience design and wireframes. Together we worked on creating an interactive prototype in Adobe XD.

Padio branding brainstorm in Illustrator Final Padio logo on white and dark background

PADIO BRANDING BRAINSTORM AND FINAL LOGO BY ME

Branding Decisions

Padio is about forming communities, so we wanted the visual branding to reflect that. We chose teal and orange as the main colors because they are bold yet friendly. In Illustrator, we made a logo using rectangular shapes to make the letter P to keep the logo simple and organized. The geometric branding is also meant to look like a patio space, after the platform's name, as patios are a place for people to hang out and enjoy each other's company.

For the font, we chose Europa for its circular shapes. The rounded letters are soft and inviting, and it contrasts well with the many rectangular elements in Padio's design. Also, the typeface is very clean and simple which matches the rest of our branding.

This part of the project was mainly done by me.

Handdrawn wireframe of the different pages by Zoe A clearner wireframe by Zoe

WIREFRAMES BY ZOE

UI/UX

For the user interface, we knew organization would be important because of the variety of content on Padio. We used fixed navigation bars on the top and right for the essentials, such as home page, searching, personal profile, and followed podcasts. We also have a fixed bottom player if there is a podcast being played. The rest of the content is organized into clearly defined scrollable sections, such as podcast episodes, clips, playlists, and comments.

Zoe came up with most of the UI/UX design, and we both laid it out in Adobe XD.

Gif showing the drop down menus when hovering over certain buttons Gif showing how the color of buttons changes for hover state

DROP DOWN MENU HOVER ANIMATION AND BUTTON HOVER ANIMATION BY ME

Interactive Elements

Most of the buttons in the prototype are animated. When a user hovers over them, a drop down menu will appear or the colors will change.

The button interactions were all done by me.