Builder Brother's Pizza Website
Coded an interactive website for a mock business from scratch using HTML & CSS.
Role
UX/UI Designer
Industry
Website Design
Duration
3-4 weeks
Stage 1. Usability Scope
Began by analyzing the core experience and structure of an iconic childhood Roblox game of mine called "Work at a Pizza Place" to understand its key interactions, user flow, and appeal. Identified opportunities to translate the game’s open-ended, role-based gameplay into a clear and engaging website structure. Focus areas included simplifying navigation, organizing content intuitively, and maintaining the playful tone of the original experience.
Stage 2. Design Strategy
Come up with a four-page site architecture: Home, Products, Location/Delivery, and Origins. These are all relevant webpages and ensure a logical and user-friendly flow. Prioritized a balance between interactive storytelling and usability, aiming to preserve the nostalgic, game-inspired identity while making the experience accessible and easy to navigate. Established a visual direction that reflects the brand’s playful and recognizable aesthetic.
Stage 3. Prototype Development
Wireframing: Sketched initial layouts for all pages, mapping content hierarchy and user flow. Focused on creating a clear navigation system and consistent structure across pages.
High-Fidelity Prototyping:
High-Fidelity Prototyping: Developed polished mockups in Figma, utilizing auto layout to ensure responsive structure and alignment. Refined spacing, composition, and visual consistency across all screens.
User Interface Design: Built a cohesive visual system with a refined color palette, curated imagery, and clean typography. Designed interfaces that reflect the game’s personality while maintaining clarity and usability.
Stage 4. User Feedback & Refinement
Continuously reviewed layouts and interactions throughout the design process, iterating on spacing, hierarchy, and visual clarity. Adjusted design decisions to improve readability and ensure smooth navigation across all pages, resulting in a more cohesive and intuitive user experience.
Stage 5. Implementation & Launch Support
Developed the final website using HTML and CSS within netnet.studio. Applied transferable programming skills, like logical structuring, problem-solving, and debugging, from prior experience in Java and JavaScript to efficiently learn and implement front-end development principles. Successfully translated static designs into a fully functional, multi-page interactive site.
Outcomes
Delivered a fully interactive website that captures the charm and identity of the original game while maintaining strong usability principles.
This project strengthened my ability to bridge design and development, reinforcing core front-end skills and deepening my understanding of layout systems, responsive design, and user-centered thinking.
