top of page
Overview

dyno bot

optimizing user interactions by redesigning and refining the Discord bot's functions

role

product design

user research

interaction

led visual design direction

tools

figma 

photoshop

illustrator

duration

ongoing since June 2023

team

Dyno team

dyno-portfolio1.jpg

overview

Dyno is a popular Discord bot, serving over 9.4 million servers with customizable moderation features and an intuitive web dashboard. As Dyno shifts its product goals, the focus is on redesigning user experiences and visual interfaces. The aim is to develop new features, improve service quality for existing users, and attract new audiences. This project highlights my role as the sole Product Designer in enhancing Dyno's user experience and visual design.

gradientbg.png

As the Product Designer for Dyno, I led the complete UI redesign, creating concepts, visual mockups, and detailed specifications. My goals were to develop community engagement features, simplify user interfaces, improve onboarding, and enhance Dyno Premium's value with new features. Designed to scale revenue, my work supported Dyno's growth. I collaborated closely with engineers to implement these designs.

 

This project is ongoing, and the content on this page does not reflect the final launched product. I've chosen to highlight select problems and solutions here, and am happy to share more details upon request.

context & objective

dyno-portfolio2.png
dave1.png
Dashboard Redesign

I led the visual redesign and UX restructuring of Dyno’s desktop and mobile dashboard, addressing usability issues and outdated aesthetics. By developing and implementing a comprehensive style guide, I revamped the side navigation menu, module sections, and home dashboard, significantly enhancing the user experience and modernizing the interface.

problem #1

redesigning the dashboard

I redesigned the navigation menu, making it more intuitive with color-coded features, improved text hierarchy, and updated modern design aesthetics.

navigation menu redesign

Screenshot 2024-05-25 at 12.14.14 AM.png

Before

After

Screenshot 2024-05-25 at 12.56.54 AM.png

Before

Home Default New Users.jpg

After

I revamped the home dashboard into a hub-like home base by reorganizing elements and page structure, creating a more intuitive interface with balanced visual elements to reduce text heaviness.

new home dashboard

New Pricing System

problem #2

developing monetization

I revised the existing checkout process by incorporating anticipated add-on purchases and creating easy-to-understand steps. This transformation turned simple popup screens into a more appealing, trustworthy, and professional experience. Additionally, I developed future web pages for a forthcoming
e-commerce platform to support Dyno's growth.

I created a checkout process with clear, simple steps and visual cues to guide users effectively. The new design also better assists the onboarding experience by streamlining server setup for each monthly premium plan purchase.

updated checkout process

Step 1: Select a Plan

Payment Step One 1440.jpg
Payment Step One 375.jpg

Step 2: Select Payment Method

Payment Step Two 1440.jpg

Step 3: Review Order

Payment Step Three 1440.jpg

Step 4: Order Confirmed

Under the 'Shop' section of Dyno's website, I developed a new e-commerce platform concept for the product, creating entirely new screens to support future expansion, though this section is still in development.

expanding with e-commerce

Shop 1440 - Dark.jpg
Shop 375 - Darkhome.jpg
Shop Single Product 1440 - unavailable premium.jpg

In progress screens of the main Shop and Product Detail pages.

problem #3

improving onboarding

Onboarding Improvement

I streamlined the onboarding process for several tasks, including signing up, adding a server to integrate Dyno, and starting a Premium Plan. Additionally, I added comprehensive guidance elements, such as a 'Getting Started' banner on the home dashboard, to significantly improve the initial user experience and help new users navigate the platform more effectively.

Below are several screens that represent the process for new users trying to get started with the product for the first time. 

new user onboarding

Step 1: Login with Discord

onboardingmock1.png
discordxdyno.png
dave and whumpus.png

Step 2: Connect with Dyno bot

dashboard-mock_edited.png

Users are taken through a series of pop-up screens in order to complete setup.

Step 3: Select Server

addserver-mock.png
server card.png

Users will select the server to add the bot in

Step 4: Server Added Sucessfully

dashboard-gettingstarted.png

Users are introduced to the dashboard, and have the option to receive guidance on further steps

More Designs

more designs

In this section, there are additional designs that further illustrate Dyno's product capabilities and aesthetic. These examples provide a clearer picture of the enhancements made and highlight the breadth of my contributions to the project's visual and user experience improvements.

Pricing Pages

Home Pages

Homepage 1440 - Dark.jpg
Homepage 375 - Dark.jpg

Current draft of
Dyno's upcoming website
(subject to change and not representative of the final product)

Home Page 1920 - previous dark.jpg

Previous draft of Dyno's upcoming website
(subject to change and not representative of the final product). This draft was created prior to a strategic shift in the company's business vision, which led to a new website design to better align with the updated direction.

Search for Public Servers

server-mock.png
server member filter.png

Dashboard Pages

Home Dashboard Page

Server Settings.jpg

Dashboard Server Settings Page

Module Pages

The following are samples of the Module pages and their respective pop-ups, where users can customize the various features Dyno offers. Modules are distinct features or tools within Dyno that provide specific functionalities for server management and moderation.

Auto Message 1.jpg
New Auto Message - with Embed.png
Welcome 1.jpg
Welcome 4.jpg
Twitch.jpg
New Twitch Subscription.png

similar projects

bottom of page