Conference Application - Connecting attendees by interest - To illustrate the features that help connect conference attendees based on their interests
Project overview

LetChatWith is a mobile-first application that helps to connect conference attendees by interest. We've created a design from the initial idea of 2 primary roles Organizers and Attendees, to the marketing website.

Tasks
  • Gather requirements, translate them to a user flow, show the relationship between different parts of the app
  • Analyze similar apps in other niches, and take the best practices
  • Create mobile wireframes and build clickable prototype
  • Build design system in Figma, create clear guidelines
  • Create designs for two user roles using mobile first approach
  • Design logo that shares the idea of communication
  • Create design for marketing website
  • Design set of custom illustrations for the app and marketing website
  • Build the marketing website via Webflow
Tools
FlowMapp
FlowMapp
Figma
Figma
Webflow
Webflow
Solutions
Outcome
  • Responsive app designs for two user roles, organized by user role, device, and features
  • Clickable Figma prototype that allows to go through most of the user flows
  • Design system that includes all the components. its states, and clear guidelines
  • Branding materials including set of custom illustrations, and animated logo
  • Fully responsive cross browser marketing website
  • Set of product images for potential customers pitches

Solutions

User flow

At the initial stages had several meetings with the client to gather requirements and grasp the idea. Then we participated in a bunch of meetings with potential users to define their needs. Base on that info we've built user flow and visualized how different parts of the app and roles are going to be related.

User flow - App structure - To depict the structure of the app and how various components relate to each other
User flow - App structure - To depict the structure of the app and how various components relate to each other

User flow

At the initial stages had several meetings with the client to gather requirements and grasp the idea. Then we participated in a bunch of meetings with potential users to define their needs. Base on that info we've built user flow and visualized how different parts of the app and roles are going to be related.

User flow

At the initial stages had several meetings with the client to gather requirements and grasp the idea. Then we participated in a bunch of meetings with potential users to define their needs. Base on that info we've built user flow and visualized how different parts of the app and roles are going to be related.

User flow - App structure - To depict the structure of the app and how various components relate to each other

User flow

At the initial stages had several meetings with the client to gather requirements and grasp the idea. Then we participated in a bunch of meetings with potential users to define their needs. Base on that info we've built user flow and visualized how different parts of the app and roles are going to be related.

User flow - App structure - To depict the structure of the app and how various components relate to each other

User flow

At the initial stages had several meetings with the client to gather requirements and grasp the idea. Then we participated in a bunch of meetings with potential users to define their needs. Base on that info we've built user flow and visualized how different parts of the app and roles are going to be related.

User flow - App structure - To depict the structure of the app and how various components relate to each other

Similar apps

We've analyzed approaches of similar apps in other niches to borrow best practices and adapt them to our niche considering our end users' pain points and needs.

Similar apps - Analyzing similar apps - To highlight the process of borrowing best practices from other niches
Similar apps - Analyzing similar apps - To highlight the process of borrowing best practices from other niches

Similar apps

We've analyzed approaches of similar apps in other niches to borrow best practices and adapt them to our niche considering our end users' pain points and needs.

Similar apps

We've analyzed approaches of similar apps in other niches to borrow best practices and adapt them to our niche considering our end users' pain points and needs.

Similar apps - Analyzing similar apps - To highlight the process of borrowing best practices from other niches

Similar apps

We've analyzed approaches of similar apps in other niches to borrow best practices and adapt them to our niche considering our end users' pain points and needs.

Similar apps - Analyzing similar apps - To highlight the process of borrowing best practices from other niches

Similar apps

We've analyzed approaches of similar apps in other niches to borrow best practices and adapt them to our niche considering our end users' pain points and needs.

Similar apps - Analyzing similar apps - To highlight the process of borrowing best practices from other niches

Clickable wireframes

Based on the user flow, we've created wireframes of the main app screens and made them clickable for the attendee role. It helped us to validate the idea and ask for a feedback.

Clickable wireframes - Attendee experience simulation - To represent the simulation of the attendee experience through clickable wireframes
Clickable wireframes - Attendee experience simulation - To represent the simulation of the attendee experience through clickable wireframes

Clickable wireframes

Based on the user flow, we've created wireframes of the main app screens and made them clickable for the attendee role. It helped us to validate the idea and ask for a feedback.

Clickable wireframes

Based on the user flow, we've created wireframes of the main app screens and made them clickable for the attendee role. It helped us to validate the idea and ask for a feedback.

Clickable wireframes - Attendee experience simulation - To represent the simulation of the attendee experience through clickable wireframes

Clickable wireframes

Based on the user flow, we've created wireframes of the main app screens and made them clickable for the attendee role. It helped us to validate the idea and ask for a feedback.

Clickable wireframes - Attendee experience simulation - To represent the simulation of the attendee experience through clickable wireframes

Clickable wireframes

Based on the user flow, we've created wireframes of the main app screens and made them clickable for the attendee role. It helped us to validate the idea and ask for a feedback.

Clickable wireframes - Attendee experience simulation - To represent the simulation of the attendee experience through clickable wireframes

Design system

We've started with the foundations and basic components, during the design process we were growing the system with new components and modules as well as documenting things for other team mates.

Design system - Initial foundations and basic components - To illustrate the starting point of the design system with foundational elements
Design system - Initial foundations and basic components - To illustrate the starting point of the design system with foundational elements

Design system

We've started with the foundations and basic components, during the design process we were growing the system with new components and modules as well as documenting things for other team mates.

Design system

We've started with the foundations and basic components, during the design process we were growing the system with new components and modules as well as documenting things for other team mates.

Design system - Initial foundations and basic components - To illustrate the starting point of the design system with foundational elements

Design system

We've started with the foundations and basic components, during the design process we were growing the system with new components and modules as well as documenting things for other team mates.

Design system - Initial foundations and basic components - To illustrate the starting point of the design system with foundational elements

Design system

We've started with the foundations and basic components, during the design process we were growing the system with new components and modules as well as documenting things for other team mates.

Design system - Initial foundations and basic components - To illustrate the starting point of the design system with foundational elements

Role: Attendee

We've started from the attendee user role and created mobile screens. After several user testing sessions through clickable Figma prototype we've got approval and expanded the design to tablet and desktop. All the screens were split by features and device.

Role: Attendee - High-fidelity prototypes - To showcase the creation of high-fidelity prototypes for accurate user testing
Role: Attendee - High-fidelity prototypes - To showcase the creation of high-fidelity prototypes for accurate user testing

Role: Attendee

We've started from the attendee user role and created mobile screens. After several user testing sessions through clickable Figma prototype we've got approval and expanded the design to tablet and desktop. All the screens were split by features and device.

Role: Attendee

We've started from the attendee user role and created mobile screens. After several user testing sessions through clickable Figma prototype we've got approval and expanded the design to tablet and desktop. All the screens were split by features and device.

Role: Attendee - High-fidelity prototypes - To showcase the creation of high-fidelity prototypes for accurate user testing

Role: Attendee

We've started from the attendee user role and created mobile screens. After several user testing sessions through clickable Figma prototype we've got approval and expanded the design to tablet and desktop. All the screens were split by features and device.

Role: Attendee - High-fidelity prototypes - To showcase the creation of high-fidelity prototypes for accurate user testing
Role: Attendee - Mobile prototype testing - To illustrate the initial user testing sessions focused on the mobile prototypeRole: Attendee - Comprehensive multi-device design - To depict the comprehensive design approach covering mobile, tablet, and desktop

Role: Attendee

We've started from the attendee user role and created mobile screens. After several user testing sessions through clickable Figma prototype we've got approval and expanded the design to tablet and desktop. All the screens were split by features and device.

Role: Attendee - High-fidelity prototypes - To showcase the creation of high-fidelity prototypes for accurate user testing
Role: Attendee - Mobile prototype testing - To illustrate the initial user testing sessions focused on the mobile prototypeRole: Attendee - Comprehensive multi-device design - To depict the comprehensive design approach covering mobile, tablet, and desktop

Logo design

During the UI phase, we've also developed a logo that represents communication between people. We used simple shapes of conversation bubbles and avatars or heads.

Logo Design - Simple shapes - To highlight the use of simple shapes like conversation bubbles and avatars or heads in the logo design
Logo Design - Simple shapes - To highlight the use of simple shapes like conversation bubbles and avatars or heads in the logo design

Logo design

During the UI phase, we've also developed a logo that represents communication between people. We used simple shapes of conversation bubbles and avatars or heads.

Logo design

During the UI phase, we've also developed a logo that represents communication between people. We used simple shapes of conversation bubbles and avatars or heads.

Logo Design - Simple shapes - To highlight the use of simple shapes like conversation bubbles and avatars or heads in the logo design

Logo design

During the UI phase, we've also developed a logo that represents communication between people. We used simple shapes of conversation bubbles and avatars or heads.

Logo Design - Simple shapes - To highlight the use of simple shapes like conversation bubbles and avatars or heads in the logo design

Logo design

During the UI phase, we've also developed a logo that represents communication between people. We used simple shapes of conversation bubbles and avatars or heads.

Logo Design - Simple shapes - To highlight the use of simple shapes like conversation bubbles and avatars or heads in the logo design

Role: Organizer

At the next stage of the design process, we focused on the Organizer role. We've designed an experience where the user can create his own conference upload his logo and colors, select available interests & connection types, and then analyze his event using the dashboard.

Role: Organizer - Customizable conference setup - To represent the customizable setup process for organizers
Role: Organizer - Customizable conference setup - To represent the customizable setup process for organizers

Role: Organizer

At the next stage of the design process, we focused on the Organizer role. We've designed an experience where the user can create his own conference upload his logo and colors, select available interests & connection types, and then analyze his event using the dashboard.

Role: Organizer

At the next stage of the design process, we focused on the Organizer role. We've designed an experience where the user can create his own conference upload his logo and colors, select available interests & connection types, and then analyze his event using the dashboard.

Role: Organizer - Customizable conference setup - To represent the customizable setup process for organizers
Role: Organizer - Step-by-step conference setup - To illustrate the step-by-step process designed for setting up a conference

Role: Organizer

At the next stage of the design process, we focused on the Organizer role. We've designed an experience where the user can create his own conference upload his logo and colors, select available interests & connection types, and then analyze his event using the dashboard.

Role: Organizer - Customizable conference setup - To represent the customizable setup process for organizersRole: Organizer - Step-by-step conference setup - To illustrate the step-by-step process designed for setting up a conferenceRole: Organizer - Iconography Consistency - Consistency in iconography is crucial for a seamless user experience. We maintained a uniform style across all custom icons, ensuring they are easily recognizable and contribute to a harmonious design language

Role: Organizer

At the next stage of the design process, we focused on the Organizer role. We've designed an experience where the user can create his own conference upload his logo and colors, select available interests & connection types, and then analyze his event using the dashboard.

Role: Organizer - Customizable conference setup - To represent the customizable setup process for organizersRole: Organizer - Step-by-step conference setup - To illustrate the step-by-step process designed for setting up a conferenceRole: Organizer - Iconography Consistency - Consistency in iconography is crucial for a seamless user experience. We maintained a uniform style across all custom icons, ensuring they are easily recognizable and contribute to a harmonious design language

Custom illustrations

To better explain how the app works and add a more solid look and feel we've created a set of custom illustrations that later were used in the app and marketing website pages.

Custom illustrations

To better explain how the app works and add a more solid look and feel we've created a set of custom illustrations that later were used in the app and marketing website pages.

Custom illustrations

To better explain how the app works and add a more solid look and feel we've created a set of custom illustrations that later were used in the app and marketing website pages.

Custom Illustrations - Integration in app - To illustrate the use of custom illustrations within the app to improve user understanding and engagement

Custom illustrations

To better explain how the app works and add a more solid look and feel we've created a set of custom illustrations that later were used in the app and marketing website pages.

Custom Illustrations - Integration in app - To illustrate the use of custom illustrations within the app to improve user understanding and engagementCustom Illustrations - Visual appeal and engagement - To represent the increased visual appeal and user engagement achieved through the use of custom illustrations

Custom illustrations

To better explain how the app works and add a more solid look and feel we've created a set of custom illustrations that later were used in the app and marketing website pages.

Custom Illustrations - Integration in app - To illustrate the use of custom illustrations within the app to improve user understanding and engagementCustom Illustrations - Visual appeal and engagement - To represent the increased visual appeal and user engagement achieved through the use of custom illustrations

Marketing website

After we created the product design and handed it off to the dev team, we focused on the marketing website that later we built via Webflow.

Marketing Website - Brand consistency - To represent the consistent application of brand elements from the product design to the marketing website
Marketing Website - Brand consistency - To represent the consistent application of brand elements from the product design to the marketing website

Marketing website

After we created the product design and handed it off to the dev team, we focused on the marketing website that later we built via Webflow.

Marketing website

After we created the product design and handed it off to the dev team, we focused on the marketing website that later we built via Webflow.

Marketing Website - Brand consistency - To represent the consistent application of brand elements from the product design to the marketing website

Marketing website

After we created the product design and handed it off to the dev team, we focused on the marketing website that later we built via Webflow.

Marketing Website - Brand consistency - To represent the consistent application of brand elements from the product design to the marketing website

Marketing website

After we created the product design and handed it off to the dev team, we focused on the marketing website that later we built via Webflow.

Marketing Website - Brand consistency - To represent the consistent application of brand elements from the product design to the marketing website
No items found.

Outcome

  • Responsive app designs for two user roles, organized by user role, device, and features
  • Clickable Figma prototype that allows to go through most of the user flows
  • Design system that includes all the components. its states, and clear guidelines
  • Branding materials including set of custom illustrations, and animated logo
  • Fully responsive cross browser marketing website
  • Set of product images for potential customers pitches
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