Developer communities platform

Developer Communities Platform - Supporting developer growth - To represent how DevRel City supports the growth and development of its users by providing valuable resources and connections
Project overview

DevRel City is insights and insider access to curated resources for building thriving developer communities.

Our aim was to create a platform for developers where they could easily build connections, have access to conferences, meetups, and podcasts gathered in one place.

Tasks
  • Establish a strong brand identity that resonates with the target audience
  • Design a multistep sign-up flow with the ability to purchase access to the platform
  • Create a dashboard with ability to customize the view that displays all upcoming events, community members, podcasts
  • Design pages for all entities such as members, conferences, podcasts, and meetups, consider necessary filters, searching, and sorting features
  • Prepare all pages for mobile devices using best practices of responsiveness and adaptiveness
  • Create a marketing website design representing the core features, pricing, and benefits of usage
  • Build a design system that covers the application and marketing website for consistent and ongoing product growth
Tools
Figma
Figma
Adobe Illustrator
Adobe Illustrator
Solutions
Outcome

We have designed a platform for developers where they can easily build connections, have access to conferences, meetups, and podcasts gathered in one place. Covering the full path from brand development to the platform and its marketing website design we thoroughly provided a proper hand-off and development support.

Solutions

Branding

Developing the brand identity was the first step in our design process. With a standout logo and brand elements that capture the core idea of the platform, we shaped the basis for all the next stages.

Branding - Logo variations - To highlight the development of logo variations for different use cases, ensuring flexibility and adaptability
Branding - Logo variations - To highlight the development of logo variations for different use cases, ensuring flexibility and adaptability

Branding

Developing the brand identity was the first step in our design process. With a standout logo and brand elements that capture the core idea of the platform, we shaped the basis for all the next stages.

Branding

Developing the brand identity was the first step in our design process. With a standout logo and brand elements that capture the core idea of the platform, we shaped the basis for all the next stages.

Branding - Logo variations - To highlight the development of logo variations for different use cases, ensuring flexibility and adaptability

Branding

Developing the brand identity was the first step in our design process. With a standout logo and brand elements that capture the core idea of the platform, we shaped the basis for all the next stages.

Branding - Logo variations - To highlight the development of logo variations for different use cases, ensuring flexibility and adaptability

Branding

Developing the brand identity was the first step in our design process. With a standout logo and brand elements that capture the core idea of the platform, we shaped the basis for all the next stages.

Branding - Logo variations - To highlight the development of logo variations for different use cases, ensuring flexibility and adaptability

Sign up flow

We created a multi-step sign-up form with the ability to choose the preferred technologies and based on that purchase the platform access.

Sign Up Flow - Multi-step form design - To showcase the design of the multi-step sign-up form, guiding users through a seamless registration process
Sign Up Flow - Multi-step form design - To showcase the design of the multi-step sign-up form, guiding users through a seamless registration process

Sign up flow

We created a multi-step sign-up form with the ability to choose the preferred technologies and based on that purchase the platform access.

Sign up flow

We created a multi-step sign-up form with the ability to choose the preferred technologies and based on that purchase the platform access.

Sign Up Flow - Multi-step form design - To showcase the design of the multi-step sign-up form, guiding users through a seamless registration process

Sign up flow

We created a multi-step sign-up form with the ability to choose the preferred technologies and based on that purchase the platform access.

Sign Up Flow - Multi-step form design - To showcase the design of the multi-step sign-up form, guiding users through a seamless registration process

Sign up flow

We created a multi-step sign-up form with the ability to choose the preferred technologies and based on that purchase the platform access.

Sign Up Flow - Multi-step form design - To showcase the design of the multi-step sign-up form, guiding users through a seamless registration process

Platform

We have designed a dashboard and dedicated pages for all the podcasts, conferences, community members, and meetups. These allow users to stay updated on events that they are interested in and build connections with community members.

Platform - Comprehensive dashboard - To showcase the design of a comprehensive dashboard that provides an overview of podcasts, conferences, community members, and meetups
Platform - Comprehensive dashboard - To showcase the design of a comprehensive dashboard that provides an overview of podcasts, conferences, community members, and meetups

Platform

We have designed a dashboard and dedicated pages for all the podcasts, conferences, community members, and meetups. These allow users to stay updated on events that they are interested in and build connections with community members.

Platform

We have designed a dashboard and dedicated pages for all the podcasts, conferences, community members, and meetups. These allow users to stay updated on events that they are interested in and build connections with community members.

Platform - Comprehensive dashboard - To showcase the design of a comprehensive dashboard that provides an overview of podcasts, conferences, community members, and meetups
Platform - Community member connections - To highlight the community member pages designed to help users build connections and network with others

Platform

We have designed a dashboard and dedicated pages for all the podcasts, conferences, community members, and meetups. These allow users to stay updated on events that they are interested in and build connections with community members.

Platform - Comprehensive dashboard - To showcase the design of a comprehensive dashboard that provides an overview of podcasts, conferences, community members, and meetupsPlatform - Community member connections - To highlight the community member pages designed to help users build connections and network with othersPlatform - Conference tracking - To depict the conference pages where users can find details about upcoming and past conferences they are interested inDedicated podcast pages - To illustrate the dedicated pages for podcasts, allowing users to explore and stay updated on their favorite episodes

Platform

We have designed a dashboard and dedicated pages for all the podcasts, conferences, community members, and meetups. These allow users to stay updated on events that they are interested in and build connections with community members.

Platform - Comprehensive dashboard - To showcase the design of a comprehensive dashboard that provides an overview of podcasts, conferences, community members, and meetupsPlatform - Community member connections - To highlight the community member pages designed to help users build connections and network with othersPlatform - Conference tracking - To depict the conference pages where users can find details about upcoming and past conferences they are interested inDedicated podcast pages - To illustrate the dedicated pages for podcasts, allowing users to explore and stay updated on their favorite episodes

Marketing site

We built a website showcasing its key features, pricing, and benefits of usage, aligning with the previously developed platform’s branding elements.

Marketing Site - User-friendly layout - To represent the user-friendly layout that makes it easy for visitors to navigate and find information
Marketing Site - User-friendly layout - To represent the user-friendly layout that makes it easy for visitors to navigate and find information

Marketing site

We built a website showcasing its key features, pricing, and benefits of usage, aligning with the previously developed platform’s branding elements.

Marketing site

We built a website showcasing its key features, pricing, and benefits of usage, aligning with the previously developed platform’s branding elements.

Marketing Site - User-friendly layout - To represent the user-friendly layout that makes it easy for visitors to navigate and find information
Marketing Site - Pricing plans - To illustrate the detailed pricing plans available on the website, helping users understand their options

Marketing site

We built a website showcasing its key features, pricing, and benefits of usage, aligning with the previously developed platform’s branding elements.

Marketing Site - User-friendly layout - To represent the user-friendly layout that makes it easy for visitors to navigate and find informationMarketing Site - Pricing plans - To illustrate the detailed pricing plans available on the website, helping users understand their options

Marketing site

We built a website showcasing its key features, pricing, and benefits of usage, aligning with the previously developed platform’s branding elements.

Marketing Site - User-friendly layout - To represent the user-friendly layout that makes it easy for visitors to navigate and find informationMarketing Site - Pricing plans - To illustrate the detailed pricing plans available on the website, helping users understand their options

Design system

In order to provide a unified and consistent look across platforms, we
built a design system that includes foundations, different component states, custom illustrations.

Design System - Unified and consistent look - To showcase the design system built to ensure a unified and consistent look across all platforms
Design System - Unified and consistent look - To showcase the design system built to ensure a unified and consistent look across all platforms

Design system

In order to provide a unified and consistent look across platforms, we
built a design system that includes foundations, different component states, custom illustrations.

Design system

In order to provide a unified and consistent look across platforms, we
built a design system that includes foundations, different component states, custom illustrations.

Design System - Unified and consistent look - To showcase the design system built to ensure a unified and consistent look across all platforms

Design system

In order to provide a unified and consistent look across platforms, we
built a design system that includes foundations, different component states, custom illustrations.

Design System - Unified and consistent look - To showcase the design system built to ensure a unified and consistent look across all platforms

Design system

In order to provide a unified and consistent look across platforms, we
built a design system that includes foundations, different component states, custom illustrations.

Design System - Unified and consistent look - To showcase the design system built to ensure a unified and consistent look across all platforms

Responsiveness & adaptiveness

As a must, we also took care about mobile and other devices' usage to improve user experience and accessibility.

Responsiveness & Adaptiveness - Cross-device compatibility - To depict the compatibility of the platform across various devices, maintaining consistency in design and functionality
Responsiveness & Adaptiveness - Cross-device compatibility - To depict the compatibility of the platform across various devices, maintaining consistency in design and functionality

Responsiveness & adaptiveness

As a must, we also took care about mobile and other devices' usage to improve user experience and accessibility.

Responsiveness & adaptiveness

As a must, we also took care about mobile and other devices' usage to improve user experience and accessibility.

Responsiveness & Adaptiveness - Cross-device compatibility - To depict the compatibility of the platform across various devices, maintaining consistency in design and functionality
Responsiveness & Adaptiveness - Adaptive layout - To highlight the adaptive layout that adjusts fluidly to different screen sizes and orientations

Responsiveness & adaptiveness

As a must, we also took care about mobile and other devices' usage to improve user experience and accessibility.

Responsiveness & Adaptiveness - Cross-device compatibility - To depict the compatibility of the platform across various devices, maintaining consistency in design and functionalityResponsiveness & Adaptiveness - Adaptive layout - To highlight the adaptive layout that adjusts fluidly to different screen sizes and orientationsResponsiveness & Adaptiveness - Tablet-friendly design - To illustrate the design adjustments made for tablet devices, ensuring a seamless and intuitive experienceResponsiveness & Adaptiveness - Mobile optimization - To showcase how the platform has been optimized for mobile devices to enhance user experience and accessibility

Responsiveness & adaptiveness

As a must, we also took care about mobile and other devices' usage to improve user experience and accessibility.

Responsiveness & Adaptiveness - Cross-device compatibility - To depict the compatibility of the platform across various devices, maintaining consistency in design and functionalityResponsiveness & Adaptiveness - Adaptive layout - To highlight the adaptive layout that adjusts fluidly to different screen sizes and orientationsResponsiveness & Adaptiveness - Tablet-friendly design - To illustrate the design adjustments made for tablet devices, ensuring a seamless and intuitive experienceResponsiveness & Adaptiveness - Mobile optimization - To showcase how the platform has been optimized for mobile devices to enhance user experience and accessibility
No items found.

Outcome

We have designed a platform for developers where they can easily build connections, have access to conferences, meetups, and podcasts gathered in one place. Covering the full path from brand development to the platform and its marketing website design we thoroughly provided a proper hand-off and development support.

Linkedin

I've worked with WebFolks for years and their work always exceeds my expectations! I highly recommend them for everything from UI/UX to illustration and concepts.

Linkedin
Tracy Lee
CEO at This Dot Labs

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline