Timeline:
6 Weeks
Role:
Graphic and UX/UI Designer
Confluence | Chatgpt | CSS | HTML
Case Summary
Problem
Many employees within Bandwidth utilize Confluence to promote internal programs and for documentation. However, Confluence has many design limitations that restrict content organization and interactions.
Product
Confluence, made by Atlassian, is a team collaboration software and online workspace intended for creating, sharing, and organizing information, documents, and project details all in one platform.
Imapct
A couple of days after publishing the different internal pages I worked on, the individual page analytics displayed an average of 72% unique viewer engagement.
User Needs
Employees need to quickly find and understand information so they can spend less time searching and more time acting.
Employees need clear and organized content layouts so documentation feels approachable and not overwhelming.
Employees need consistent design patterns and visuals so the Confluence pages feel professional and familiar.
Design Challenge
How can Bandwidth’s Confluence pages be designed to reduce cognitive load and improve visual clarity while aligning with the company’s design system and encouraging higher employee engagement?
Shifting from Creator to Curator
To increase the efficiency of my workflow, I decided to experiment with AI to assist in creating HTML skeletons for content, then add CSS to bring visual interest to the designs.
I began by experimenting with ChatGPT and testing the responses it generated. I refined prompts using my beginner-level CSS knowledge to give specific instructions. This approach enabled ChatGPT to handle repetitive work, allowing me to quickly iterate and experiment.
Shifting to a code-first approach helped me understand how to hand off typefaces to developers. I learned that platforms like Adobe Fonts and Google Fonts simplify this process by providing import links or code snippets that can be added to the HTML <head> or as CSS classes for styling.
But what if I can’t find the embed option for a font?
Well, that's where GitHub is a LIFESAVER!
GitHub is a cloud platform for hosting code repositories (storage spaces). I uploaded my .otf font file to a repository and used the RAW file link to reference it in my code. To make it work, I applied the @font-face CSS rule, which loads and enables custom fonts for use in styling.
Adding Animation into the Mix
After working with coding buttons and basic layouts, I began experimenting with animation. Bandwidth offers several internal programs promoting exercise, so to make onboarding clear, I added fade-in scroll animations that guide attention, helping users focus on one section at a time.
I designed interactive cards with hover effects and drop shadows to provide visual feedback and depth. Each card features a role and icon above, making content scannable and signaling interactivity to the user.
Learning to Code Builds Better Vibe Coders
At first, it feels counterintuitive; after all, vibe coding is meant to decrease manual coding time. I realized my reliance on prompting AI to fix code errors decreased when I spent time understanding each line of code. Researching specific commands, especially those related to animation, gave me the confidence to replicate the code without hesitation.