How Can Being a Dedicated UI/UX Designer on The Team Make The Company Have a Well-Organized Schedule for Website Update Releases
Before, to get the design done, the marketing team needed to wait for the available schedule from the other team’s UI/UX Designer.
CLIENT:
ACCELBYTE.IO
ROLE:
UI/UX DESIGNER
PERIOD:
JUN 2022 - FEB 2025
About AccelByte
AccelByte is a massively scalable and extensible backend platform for live game services that helps creators focus on what matters most: making awesome games.
Founded in 2016, AccelByte was created by game industry veterans who have engineered online systems behind some of the largest live services games and platforms in the world, including Fortnite, Epic Online Store, Xbox Live, and EA Origin.
The Situation when I Joined in
I was the first dedicated UI/UX Designer to join the marketing team. This team managed the company website, online/offline events, and many other marketing channels. Before I came, the team consisted of Marketing Manager, Frontend Developer, Two Graphic Designers, and Event Manager.
Previously, whenever there is a need to improve the website design, it will be requested to the UI/UX Designer from the other team, and needs to follow their availability. Which makes it necessary to wait for a certain time before it can be done, and the team needs to compromise if the release date of the website updates gets delayed. The urgency to have a dedicated UI/UX Designer on the team getting higher because the number of website design works is increasing to follow the company's business goals. So, getting the website release schedule delayed is not a good option.
Big Works Right at The Start
At that time, the marketing team was in the process to redesign the website with the new product positioning, brand guideline, and design style guide. My Graphic Designer colleagues have initiated the process of creating the new design style guide based on the new product positioning and brand guideline, by establishing the typeface, icon set, and base color scheme that will be applied for the new website design.
AccelByte Web v4.0 (Before getting redesigned)
That makes the early process of website redesign easier. In the next few days, with the Graphic Designers, we completed the details of the design style guide by adding more detailed color styles for various purposes and created visual samples by applying the new style guide to the current website design. We presented it to our manager, and after some rounds of feedback, we got the approval.
Then here comes the challenges. Done with the style guide, I discussed with the Frontend Developer about the platform that will be used to develop the website. It’s Hubspot, a new tool for me. There will be some limitations in terms of design implementation from the platform itself, and the 3rd party add-ons will be used to create certain features (contact form, event registration, and job posting list). With that in mind, I actively discussed with the developer regarding my design, is it feasible to do or need to be adjusted.
Designing and Building the Base for Future Workflow
Next, after I got a whole brief & requirements from my manager for the redesign process, I started creating the high-fidelity design for the homepage, and a few important screens by using the approved style guide. Here is the general requirement for the new website design;
Change the overall looks of the website to be more tech company, instead of game company
So, in order to achieve that, I decided to apply these approach to the new design:
Incorporate more white space
Remove the sharp shape visual from the design and replace it by using rounded visuals
Use more white color throughout the design to give a clean look
I presented the sample of hi-fi design screens to my manager and other stakeholders and explained to them about my design decision. I got many valuable feedbacks from the first presentation. After several presentations and rounds of feedback passed, the sample screens got approved and I can start creating the rest of the website pages design.
Since I already got the main screen approved, I can start creating a design style guide in Figma that will be applied to the whole website page design. This design style guide (or you can call it design system) consists of:
Color styles
Text styles
Grid Styles (a grid system to divide the design screen into several columns)
Effects (Drop Shadow)
UI Components, from the smallest one (atomic level) like button, until the complex one (organism level) like the Footer section, navigation menu.
Color & Text Styles for the new AccelByte Website's Design Style Guide
Button components for the new AccelByte Website's Design Style Guide
Over time, when I create the other website pages, I added new styles and components to the design style guide regularly, if needed.
In around two months, I finished all the website pages and presented it to my Manager again to ask for feedback and approval. Since we already agreed on the overall looks based on the first few screens presented earlier, there is not much feedback for the rest of the pages. So, it’s time to deliver it to the Developer.
I was lucky, because I got such a reliable developer on the team. As I remembered, all of my designs can be developed. In around three months, after the review process on the staging server passed, we released the new website design to LIVE.
New AccelByte Website v5.0
Solutions Overview page of AccelByte Website
AIS page of AccelByte Website
ADT page of AccelByte Website
Professional Services page of AccelByte Website
Pricing page of AccelByte Website
Problems Solved with The New Workflow Established
With the new website design being LIVE in my first three months (way faster than the initial planning), and appreciated by many stakeholders in the company, I also established some new workflow whenever there is any website design work coming.
By Having me as a Dedicated UI/UX Designer in The Team, All Website Design Tasks Brief will be Shared to Me
Through Slack message or by creating a new Asana ticket. If it’s coming from Slack, I’ll create the Asana ticket to put all updates or discussions there. Once the design got approved, I’ll deliver it to the Developer, and will follow up the process until it goes LIVE and make sure it can follow the details of the design.Mass Design Component Updates in a Fast
With the design style guide created in Figma, whenever there is a need to update certain design components which appeared in many website pages (like navigation menu, footer, testimonial section, etc.), I can easily update the master component and publish it. Then I’ll show the design changes to the developer. Fast delivery in a high quality.Keep the Design Version History of Each Website Page in a Dedicated Figma File
By doing this, I can always track back the previous design version of each website page. Just in case, there will be old design components or information that will be reused again in the future.
By doing those workflows, in the next few months I got appreciated by the team.
Overall, during my time at AccelByte, my manager and team colleagues frequently shared that I can deliver the work in a fast and high quality, and also maintain good communication with every stakeholder so everyone is kept informed from the start of the task until it is finished.
There was no more waiting for the design to be worked on. And by that, it can fully support the company's business goals by providing the website updates with a well-organized release schedule.