As Chief Design Officer at Openhost, I spearheaded the design team, merging leadership with hands-on involvement in the front-end deployment of our SaaS product. I focused on maintaining high-quality standards while also pioneering a modern workflow for our front-end development.

Key responsibilities

• Oversee Frontend Deployments: Direct all front-end deployments for our custom SaaS CMS tailored for media outlets, ensuring smooth rollouts and enhanced user experiences.
• Quality Assurance: Conduct thorough QA assessments for every front-end development, upholding high-quality standards and fostering best practices.
• Agile Task Management: Organize and prioritize design and front-end tasks for each sprint within our agile workflow, facilitating collaboration and efficiency.
• Documentation of Best Practices: Develop and maintain comprehensive documentation of design best practices and internal processes within the Atlassian ecosystem, optimizing speed and minimizing errors.
• Coaching Frontend Standards: Mentor team members on effective front-end best practices, emphasizing modern HTML, CSS, JavaScript, mobile-first development, and accessibility among others.
• Framework Development: Create a new methodology for the front end of our Wordpress-like CMS, introducing a component-focused approach, WCAG compliance, linting, testing and powerful theming capabilities via an intuitive GUI linked to design tokens.
• Figma Design System: Design a cohesive Figma design system for our revamped initial theme prototype, accompanied by detailed documentation to promote seamless teamwork and efficient processes.
• User Flow Creation: Develop user flows in Figma that addressed complex UX features for the admin side of our CMS, including user roles, permissions, and administrative tools among others.

Key takeaways

The main problem

Before I joined the team, there was no clear methodology for writing or organizing frontend code. Each theme's CSS was contained in a single file exceeding 10,000 lines. This resulted in specificity conflicts, duplicate code, modifications that caused design inconsistencies, and as a result, a ton of time spent in tracking down and fixing bugs.

My solution

Develop a design system in Figma that outlines a foundational theme, including essential components for creating additional themes based on it. Set up guidelines and processes in Confluence (Atlassian) to support this effort. Finally, implement the initial codebase for the foundational theme using HTML, CSS, and JavaScript, guided by the defined components and packages.

The outcome

A reliable frontend environment that enables comfortable development and allows for confident deployments. This environment helps isolate issues and follow well-documented processes.

More examples available on demand.