KANGEL DISCORD BOT
Discord bot developed by the Magic Smoke Community.
WEBSITE
DESIGN
OVERVIEW
ADG developed from scratch a website for the KANGEL Discord Bot, developed by the Magic Smoke Community. All KANGEL IP is owned by and used with permission from Why so serious, Inc.
SCOPE
UI DESIGN
USER EXPERIENCE
BRAND DESIGN
CHALLENGE
As a brand new Discord bot on the cusp of the AI revolution, the Magic Smoke Community needed a website that matched the aesthetic of their new chatbot. KANGEL is a bot that aims to connect with the user through Discord's chat, portraying itself with a playful personality reminiscent of East-Asian online celebrities.
PLANNING
We needed to design a simple, lightweight website, that would still manage to be an immersive experience to the universe of KANGEL.
This could be achieved in numerous ways, however we would need to begin by utilising custom assets for every aspect of the user's interaction with the website.
Featuring bright, eye-popping colours, we wanted something that would convey a feeling of a slightly chaotic nature, yet still display the sweet playful nature that the bot takes on as its personality.
Lastly we tweaked the footer to further match our new page colour scheme. Providing a natural break from the gradient background of the rest of the website, it displays a more advanced form of navigating the website, some social media links, and shows the logos from the parent brands of the joint venture: AHMESEN and LazerIndustries.
Main Landing Page for the KANGEL Website
IMPLEMENTATION
As with any site, there were numerous tweaks going from our initial mockup, as we figured out what works best for us. Our designers worked with our developers across every step of the process, ensuring that there would be no visual challenges from the final implementation of the redesign project.
OBJECTIVES
- Streamline Site Design:
We needed to develop a new site design that would reflect Lightwire's brand in its current position.
- Increase Customer Trust:
A clean, purpose conveying design that would develop customer confidence and trust.
- Simplify Sales Process:
Develop an automated system to process orders without human input.
- Reduce Support Tickets:
Develop a system that provides customers an experience with reduced friction.
One focus of ours was further optimising the landing page for a clean look. The hero was redone from the ground up, with new colours, a new custom background with abstract line artwork alongside an animated gradient, and redoing the interactive and informational elements entirely. Instead of cramming all of our talking points into the hero, we kept it simple showing our latest offer and lowest pricing, while letting the rest of the page do all the talking.
CRM DEVELOPMENT
Another focus of the site was to develop a fully automated deployments system. Previously, servers were configured-to-order, and time-to-deploy depended on the speed of technicians manually executing commands and implementing configurations. Lightwire needed a way to better scale and optimise for customer satisfaction, by automating as much of the process as possible, from Payment to Deployment.
Rather than develop an entirely new API or System to manage customer instances, we managed to integrate the CRM as part of the site's backend. This also provided us with the ability to streamline the display of information to the user, ensuring that all of their data was available in one place.
BILLING
Further diving into the CRM System, is the new billing system we developed. This component was somewhat tricky, as the products do not use a standard check-out system, as we are setting up subscriptions. Before allowing the user to create a purchase, we require them to add a Card on file, or otherwise we provide them with Account Credit if they pay using one of the alternative methods. In order to prevent unecessary errors or chargebacks, we setup our system to deploy a user's server instance before charging their card, and if it fails, the card will not be charged. Otherwise once the server has been successfully deployed, the user's card is then charged, and will continue to be charged on a recurring basis until they cancel. We had to setup our own cancellation method integrating with the Stripe API, that deletes the server instance, and then updates the Subscription object.
