Baast's first campaign identity, from a single message to a cohesive system across website and social.
Role
My role covered page design, information structure, and content creation. I also created the hero film from research to production, helping shape both how the service was explained and how it first came across.
Problem
The service did not yet have its own clear place on the website. The page needed to feel trustworthy and tech-driven for the right audience, while still showing that Baast works in early-stage ideas, testing, and prototyping, not finished product delivery. It also had to work within the existing website system, so the build stayed efficient and the experience stayed familiar.
Goal
The goal was to make the offer easier to understand and easier to act on. To do that, I reused most of the existing CMS UI and added only what was needed to make the R&D focus clearer without breaking the brand system. The page structure was built to guide people from understanding the service to booking a call.
Design Approach
1.02 Designing within Constraints
The page had to live inside an existing CMS and website ecosystem, so I treated the current structure and existing CMS components as the base system for the wireframing stage. This approach preserved development efficiency and cross-site consistency in terms of user familiarity. For the final version, of the 16 modules considered, 7 were selected — 6 reused directly from the existing CMS and 1 newly designed — keeping development complexity low while delivering a focused, conversion-ready layout. The remaining 9 were dropped due to scope, timeline, or tone fit.
*Module names are my own working labels for wireframing reference, not the official CMS terminology.
1.03 Wireframing
Starting from the CMS module inventory, two wireframe directions were explored. Iteration 1 was simpler and visual-led with a shorter page length. Iteration 2 was more informative, adding a timeline, key metrics, testimonials, and a booking calendar. After reviewing both with a developer and manager, iteration 1 was selected — the added modules in iteration 2 were impractical within the CMS constraints and one-week timeline. The right page was not the most informative one, but the one that communicated clearly and delivered efficiently before the deadline.
Iteration 1
Iteration 2
Design Direction
2.01 Color
One of the challenge was to make the R&D sit under same umbrella branding system, but also design it as a distinctive service branch. I had to be same System, but different personality. I chose different primary color strategy to the other pages. In color system, case study pages used a white background. The R&D page switched to a black background to express a more experimental, lab-like identity. This created immediate contrast while staying within the same component framework.
Baast Case study page (white background)
Baast R&D page (Black background)
2.02 Layout and Flow
The page flow was shaped by the brief with one focal point: move the ICP from understanding to action with minimal friction. Every layout decision was made to serve that sequence: positioning, proof, process, trust, then CTA. The task as a designer is to interpret the brief into visual form and layout the best.
3. contents creation
3.01 Contents Positioning Map
Before designing any content, I created a 2x2 positioning map to audit Baast's existing work against two axes — Maturity and Distinction. Maturity measures how proven a piece of work is, from early concept to shipped product. Distinction measures how differentiated it is from the broader tech market. The Hero zone sits where both are high.
Each dot represents a piece of existing Baast work — the more vibrant the orange, the stronger its positioning. The audit revealed most existing work clustered toward Generic or Unclear. Only a focused selection reached the Strong quadrant, and those became the content foundation for the page.
Reflection
While working on the Prism case-study page, I kept noticing that strong visuals alone were not enough to carry the story. The harder part was deciding what people needed to understand first, and what could wait.
I learned to treat the layout less like a gallery and more like a reading sequence. The opening had to frame the project quickly. The next sections had to earn attention by showing outcome and direction before asking for more reading.
That process taught me that website design is not only about expression. It is also about controlling clarity. A good page does not just look structured. It helps the viewer understand the work with less effort.
