Bakehouse Venture Builder - Company Website & Sitemap
Designing a clear story for a brand-new startup, from zero to a scalable site structure and UI.
1. Project Context
Why It Matters to Bakehouse Venture Builder?
Bakehouse needed a credible online presence to explain what we do to clients, investors, and potential hires.
The website became the single place to understand our services, approach, and work and a foundation we could reuse for future client sites.
My role & team
-
Sole UX/UI Designer (mentored by Head of Product)
-
With Head of Product and Front-End Developers
-
Duration: 4 months (2017)
-
Scope: Sitemap & IA · User flows · Wireframes · Visual design system (lite) · Dev handover
2. Snapshot
-
Company: Early-stage venture builder offering design & development services
-
Audience: Prospective clients, investors, and candidates
-
Challenge: No website, low brand clarity, time-poor stakeholders
-
Outcome: Approved sitemap and designs; homepage shipped; reusable patterns documented for future pages
3. Problem (Why)
We had no public story. Without a website, it was hard to win clients, attract talent, or pitch to investors. We needed a site that:
-
explains the business in plain language,
-
guides visitors to the right next step, and
-
can scale as our portfolio grows.
4. Goals (What success looked like)
-
Craft a sitemap that tells a clear narrative (who we are → what we do → how we work → our work → who’s behind it).
-
Design a clean, minimal UI where content does the talking.
-
Hand over developer-ready specs and assets.
5. Constraints (When/Who)
-
New startup: requirements emerging as we learned.
-
Lean team: I was the only designer; mentored by the Head of Product.
-
Timebox: ~4 months to get to an approved build and handoff.
6. My Role (Who)
-
Discovery workshops with founders
-
Information architecture & sitemap
-
User flows and page narrative
-
Wireframes & low-fi prototypes
-
Visual design and component patterns
-
Dev handoff via Zeplin (assets, specs)
7. Approach (How)
1) Discovery → “Tell the story first”
I ran short, focused workshops to understand the business model, services, pipeline, and proof points.
From this, we shaped the website as a story:
-
Introduction (what is Bakehouse?)
-
Mission & Vision
-
Services
-
Approach/Methodology (how we deliver)
-
Work/Case Studies
-
Team
-
Contact / Next steps
2) Information Architecture & Sitemap
I translated that story into a sitemap and content outline, sequencing sections to reduce bounce and guide action.
Each page had a primary job (e.g., Services = clarity and trust; Work = credibility; Team = confidence).
3) Wireframes & Content Flow
Low-fidelity wireframes mapped the reading order, emphasized scannable blocks, and placed calls-to-action where intent peaks.
We iterated quickly with stakeholders to lock structure before visuals.
4) Visual Design (minimal, content-first)
I created a lightweight design system: typography scale, spacing, grid, buttons, cards, and media blocks.
The UI is intentionally minimal so the message and work samples stand out across:
-
Landing: fast orientation + jump-off to key sections
-
About: culture, mission/vision, and “why Bakehouse”
-
Portfolio: image-led case entries with short summaries
5) Handoff & Build
I packaged specs in Zeplin (measurements, tokens, exports).
Development shipped the homepage first; remaining pages were queued behind client priorities.
(The site is now offline as the company has since closed.)
8. Outcome & Value, Reflection and Next
What changed (Outcomes & Value)
-
A clear narrative the team could align on (used in pitches and hiring).
-
A reusable IA + component set that accelerated future pages and client microsites.
-
Faster approvals: stakeholders could comment on structure before visuals, reducing churn later.
(No vanity metrics here; this was an early-stage build. Value was alignment, clarity, and speed of execution.)
What I learned (Reflection)
-
Clarity beats decoration. When content is king, minimal UI is a feature.
-
Start with the story. A good sitemap guides both users and stakeholders.
-
Iterate without fear. Feedback cycles felt scary at first; they made the product sharper.
If I had more time (Next)
-
Publish a live component library to speed new pages.
-
Add case study templates with consistent metadata (problem, role, impact).
-
Track simple engagement signals (CTA clicks, scroll depth) to refine the narrative.
Project Information
Credits
Design Tools
PRODUCT & DELIVERY
Sketch, Evernote, Photoshop, Illustration, Zeplin
Dhaz
DEVELOPMENT
Syahirah
