Yzabel Olavides | Portfolio
HQZen Culture Page

HQZen Culture Page

Researched, designed, and developed a culture page that brings HQZen's software development team and values to life.


Client

BPOSeats

Timeline

July - August 2023

Role

UI/UX DesignerFrontend Developer

Tools

FigmaVue.jsHTML5Sass

Context

As HQZen grew as BPOSeats' flagship SaaS product, the need to communicate who they are became more pressing.

Their website had no dedicated space for culture, values, or the people behind the product, making it harder to attract the right talent, build trust with clients, and establish a distinct brand identity. The goal was to design and develop a culture page that filled that gap, authentically.

Outcome

As a web design intern, I took this project from research all the way through to a live, deployed page, handling UX research, UI design, and frontend implementation. The result was a fully built culture page that showcases HQZen's team, work principles, and company environment through a minimal, brand-aligned layout that feels native to their existing product experience.


KEY STAGES

The project followed a modified design thinking process, with an added Implementation phase to take designs all the way to a live, deployed page.

Empathize

I started with desk research to understand why culture pages matter, how they shape employer branding, attract talent, and set expectations for both candidates and clients. Additionally, I also framed the problem into a How Might We question, to help in further ideation.

"How might we effectively communicate the company’s software development team’s culture that attracts both talent and clients?"

From there, my co-intern and I ran a user survey targeting both internal team members and external audiences. With 21 respondents and a tight timeline, the sample was small but actionable, and it surfaced clear patterns in what different audiences expected to find on a culture page.

Define and Design

Survey responses shaped a user persona and empathy map, which guided both content decisions and layout priorities.



From there, I built out the information architecture, mapped the page sections, and moved quickly from low-fidelity sketches to high-fidelity mockups in Figma, incorporating HQZen's existing design system throughout.


Responsiveness was factored in from the start, with mockups designed across desktop, tablet, and mobile breakpoints. Designs were then coded and deployed live via GitHub Pages.

Final Design

The final design balances storytelling with structure, featuring employee highlights, workspace visuals, and the team's work principles. A minimal layout lets HQZen's brand colors and typography carry the tone, making the page feel like a natural extension of the product.


Learnings

Looking back, these were some learnings that now shaped how I think about design:


Scope decisions pragmatically

Working with a limited timeline and a small research pool taught me to move forward with what I had, rather than wait for perfect conditions.

Iteration, iteration, iteration...

Layout decisions rarely land on the first try. This project pushed me to keep exploring arrangements until the structure actually served the content.

Creating down-to-earth designs

Wearing both the designer and developer hat meant I had to stay honest with myself. If I couldn't build it well, it wasn't a good design.

Next Work

Trained in tech,