A 3-week internal project where I was requested to create a design guideline PDF for the company’s Asset Team on constructing the Welcome Screens of our apps.

One of the Asset Team’s main responsibilities is building bespoke client-facing apps that can be utilized for specific use cases. However, due to time constraints, the welcome screen would be the last task on their list. With limited knowledge in HTML, the team would rely on ChatGPT to generate code for them, resulting in visually inconsistent sections. This led to multiple off-brand pages within the company’s product. King Moya reached out to the Product Head and specifically requested that I create a Welcome Screen Design Guideline PDF because of my hybrid UX/UI and Front-end Development background. The brand guidelines were several years outdated, and the company’s design system only contained basic components at the time.

Me

King Moya

Glenn Bugtog

Duration: 3 Weeks

Senior Designer

Front-end Developer

Once the Design Guideline PDF and HTML widget templates were done, the efficiency of the Asset Team increased due to clearer design parameters and easier access for custom design requests to me at the time.

The PDF outlines essential Do’s and Don’ts for foundational understanding and basic customizations. I choose to approach so as to lower the barrier for non-designers. This format also avoids abstract design principles and instead focuses on practical applications to their work.

Layout and typographic adjustments were documented for three primary desktop breakpoints: 1920px, 1440px, and 1280px. Mobile and tablet were explicitly out of scope because the legacy product was desktop-only.

Mid-project, my Manager proposed adding CSS guidance for the section widgets.

I built the templates directly into the legacy app because I already had a background in front-end web development. This saved us a lot of time because the templates were ready to use right from the get-go. When I handed over the templates to Glenn, he already used it within the same day.

I used the marketing site’s existing visual style as the reference point for the guidelines because there were no updated company-level brand guidelines. This connected the Welcome Screens to the most publicly visible expression of the brand at the time; creating visual coherence across touch points without requiring a formal brand system to exist first.

Formal research was not conducted. The primary discovery input was a kick-off meeting with King Moya. During the meeting, he walked through the existing Welcome Screens that were currently live in the app. Seeing the existing Welcome Screens made the problem really obvious; no two screens shared a consistent visual language(fonts, colors, layout structures, and information density). With no external benchmarks and no user interviews, the audit of existing screens served as both the research phase and the brief.

Anchoring the guidelines to the marketing site’s visual style gave the work immediate credibility without needing a formal brand system to exist first. Building the HTML widgets directly rather than writing instructions for non-developers to follow was the right call for the team's actual skill level and eliminated a layer of translation that would have introduced errors.

I’d scrap the PDF entirely and build a website from the start. The scope additions that came mid-project were signals that a static document wasn't the right medium. A web-based guideline would have accommodated all three deliverables natively, supported Glenn's copy-paste use case from day one, and remained easier to update as the brand evolved. I'd also use an AI writing assistance earlier in the drafting process. My instinct to over-document is real, and a tool that pushes back on verbosity earlier would have saved a revision cycle. Both lessons required the experience to surface. I wouldn't have known the medium was wrong until I saw what the work actually needed to become.