In this case study, I break down the workflow I developed during a week-long design challenge at my previous company. I will walk through the entire process from start to finish, along with the key lessons I took away while working with the team.
Every week, there were two tracks for the design challenges. The first was handled by the brand team, who built a brand identity from a partners’ recipe. The experience design track ran separately, and I was the sole participant. While there was no internal competition, the pressure was high: I had to absorb all critique and turn around revisions by the next day.
My first step was always breaking down the brand foundation. The brand team’s framework required four core elements: value proposition, archetype, brand values and personality, and motif. That is where I focused during every brand handoff. Once I understood the brand identity, I moved straight into competitive analysis, mapping both direct and indirect competitors across shared industries and business models.
To visualize the landscape, I used a four-quadrant positioning map:
Plotting competitors’ homepages across these axes gave me an immediate read on the market. Banks, government platforms, and legacy B2B tools naturally clustered in the serious, enterprise quadrant. Consumer apps, digital wallets, and creator platforms leaned heavily into the playful, prosumer quadrant. When placing the challenge brand on the map, I looked for UX gaps and familiar design patterns. The goal was to align with the brand’s core motif while steering clear of generic category tropes so the product could stand out.
With positioning established, I moved directly to information architecture. The required deliverables were fixed for each challenge: a Homepage, a Blog feed, and a Blog Post template. These were selected intentionally to test layout variety–ensuring each page felt distinct while remaining grounded in a cohesive design system.
To structure the homepage architecture, I placed competitor sites side by side to catalog recurring section patterns. Most leaned heavily toward conversion-focused heroes, followed immediately by client logo marquees for social proof, and then direct value-prop or use-case modules within the first few scrolls. Analyzing these patterns helped me structure a layout that matched industry expectations without sacrificing brand personality.
This phase is usually the most critical step, as it establishes the entire foundation of the website.
Once I gathered inspiration based on the competitive mapping and information architecture, I searched for reference websites that aligned with the brand direction. The industry didn't need to match; the goal was purely to study visual aesthetics, layout structures, and messaging patterns.
After assembling the moodboard, I moved into the design system and style guide.
The first priority was auditing the handed-off brand colors for ADA compliance and contrast accessibility. Since these were strictly brand identity colors, they represented the primary accents on the site. My role was to expand them into a functional UI palette by generating neutral, tint (lightest), and shade (darkest) tokens to ensure readability across foreground and background pairings. If a core brand color failed contrast requirements, I proposed adjusted values to the brand team to find a solution that protected both visual identity and accessibility.
Another key focus was typographic scaling, which directly informed layout density, component sizing, and spacing. I used a hybrid scale combining Major Third and Minor Third ratios, creating balanced size contrast and a clear visual hierarchy.
To keep variables organized, I separated primitive values from semantic tokens:
In full-scale client design systems, these token layers are typically more granular. Given the tight timeline of a design challenge, I kept the architecture lean and pragmatic, avoiding unnecessary over-engineering.
With the typographic scale and spacing tokens defined, I moved directly into wireframing. Having precise layout margins allowed me to block out components and structural layouts aligned with the IA and the brand tone established during competitive mapping. For every layout, I designed mockups for both desktop and mobile viewports.
This was the day of the initial presentation, where I walked through the foundation established over the previous two days. It was also an opportunity to sync with the participating developer to clarify technical constraints and implementation details. Immediately after the call, I gathered critique from leadership and began turning around revisions.
Following the review, I moved into component design, translating the wireframe blocks into high-fidelity elements shaped by the brand system and competitive analysis. A few core rules guided this phase:
This is the day I transformed the approved wireframes and component library into full high-fidelity mockups. With the layout foundations and tokens already locked, assembling the final screens was efficient and focused on visual polish, real content integration, and responsive behavior across desktop and mobile breakpoints.
Alongside the mockups, I mapped out the CMS structure—specifically for the dynamic templates like the Blog feed and Blog Post pages.
The final phase focused on presenting the completed experience and delivering clean, build-ready files to the developer.
For the pitch, I walked leadership through the end-to-end user journey across the three core pages. Instead of merely showing screens, I framed the design decisions around the initial problem: how the layout addresses competitive gaps, upholds brand integrity, and prioritizes user conversion while meeting accessibility standards.
For the developer handoff, clarity and execution speed were critical: