Wit in U Edu Hub & Co-working Space Official Website
Wit in U Edu Hub & Co-working Space Official Website
Timeline
Mar 2025 - May 2025
( 10 Weeks)
Role
UX/UI Designer
Graphic Designer
Deliverable
Responsive Website
Platform
Figma
Overview
Wit in U Edu Hub & Co-working Space Official Website is a commissioned project for a co-working space that offers work areas, meeting rooms, and studios, along with training courses and workshops tailored for learners and professionals. The goal of the website was to clearly present the space’s services and essential information, while aligning with the client’s branding and business objectives.
The website includes detailed service descriptions, booking information, upcoming events, and location access, all designed to reflect the brand’s identity and ensure an intuitive user experience for a wide range of visitors.
This project was completed in collaboration with a small freelance team:
◆ Jetsada Thitiwatniphat – UX/UI Designer
◆ Tanawat Deepo – Software Engineer
My Role as UX/UI Designer
In this project, my role as a UX/UI Designer involved gathering the client’s requirements, ideating based on their business goals, and designing the overall website structure. I created a high-fidelity prototype aligned with the company’s corporate identity (CI) to ensure brand consistency and visual clarity. Once the design was finalized, I prepared a developer handoff for the Software Engineer to implement the live website.
Design Process
🙋 Requirement
Client's Requirement
The client provided a clear outline of the essential pages and content they wanted included in the website. These requirements served as the foundation for the site structure and user flow.
1. Homepage – Overview of the brand, services, and general information about the space
2. Co-working Space – Details about available rooms, facilities, and rental rates
3. Training Courses – Information about current and upcoming courses, with a client-managed system for easy updates
4. Blog – A section for written and video content, also client-managed for regular publishing and updates
5. Contact – Location details featuring an embedded Google Map and a custom graphic map for easier navigation
6. Language – The entire website needed to be available in both Thai and English, allowing users to easily switch between languages
💡 Ideate
After receiving the client’s requirements, I began ideating the overall structure and flow of the website. I created an Information Architecture to organize content effectively, followed by a low-fidelity prototype to visualize the layout and key interactions.
These deliverables were included in the project proposal, which helped the client clearly understand the design direction and ultimately led to securing the commission.
Information Architecture
Based on the client’s requirements, I created an Information Architecture (IA) to define the overall structure of the website and how users would navigate between pages. This helped ensure that content was organized logically and aligned with both user expectations and business goals.
✍️ Low-Fidelity Prototype
Digital Wireframe & Low-Fidelity Prototype
After completing the Information Architecture, I used it as the foundation to create the digital wireframe and low-fidelity prototype. These early design visuals were included in the project proposal to help both the client and development team clearly understand the intended layout, content structure, and overall design direction. This step ensured alignment before moving into high-fidelity design and development.
🖥️ High-Fidelity Prototype
Mockups & High-Fidelity Prototype
After the commission was confirmed, I developed detailed mockups and a high-fidelity prototype based on the approved low-fidelity wireframes. The visual design was carefully aligned with the client’s corporate identity (CI), incorporating their brand color palette and 3D renderings of the co-working space to create a cohesive and realistic user experience.
This prototype served as the initial version of the live website, created before the physical space was completed. Once construction was finished, real photographs replaced the placeholder renders. The final website also allows the client to add dynamic content such as training courses, events, blog posts, and videos.
Design System
For this project, the client provided an existing brand color palette for Wit in U, consisting of Madder Red (#9A1D25), Yale Blue (#123274), and Carrot Orange (#F29100) as the primary colors. To complement and support these strong brand tones, I selected a set of secondary and supporting colors to enhance visual balance, improve readability, and ensure a cohesive user experience across the website.
The design system guided the development of UI components, typography, buttons, and backgrounds ensuring visual consistency while reflecting the brand’s identity.
◆ Colors
◆ Typography : DB Helvethaica X
◆ UI Components
◆ Graphic Design
In addition to UX/UI design, I created several custom graphic assets for the website in both Thai and English to support the site's bilingual functionality. These assets included a graphic map to help users easily locate the space, as well as visual pricing layouts for the co-working areas, meeting rooms, and studio. Each graphic was designed to align with the brand’s identity while ensuring clarity and accessibility for both language audiences.
💻 Coding
Handoff & Collaboration
After finalizing the high-fidelity prototype with clients, I prepared a complete design handoff for the software engineer, including UI components, layout specifications, color codes, and responsive behaviors. I used Figma to organize design assets and provide clear, inspectable details for development.
Throughout the implementation phase, I collaborated closely with the engineer to ensure the final website matched the design vision. I reviewed builds, provided feedback, and made adjustments where necessary to maintain visual consistency, responsiveness, and brand alignment across both Thai and English versions.
Key Takeaways
Wit in U Edu Hub & Co-working Space Official Website was my first commissioned project, completed with a small freelance team in my role as a UX/UI designer. I worked closely with both the client and the developer throughout the entire process to translate business requirements into a live, functional website.
Along the way, I encountered valuable challenges that helped me grow as a designer. Here are a few key lessons I’ll carry into future projects:
◆ Contract Scope – I learned the importance of having a well-defined contract to set clearer boundaries and prevent scope creep. However, the additional work allowed me to create a more complete case study for my portfolio.
◆ Mobile Design Considerations – Designing for smaller screens required a different layout approach and awareness of mobile gestures. I now prioritize responsive design earlier in the process.
◆ Developer Handoff – I realized the need for a clearer, more developer-friendly handoff process. In future projects, I’ll focus on organizing design assets and documentation in a way that makes implementation easier and more accurate.
◆ Typography Use – I used too many text styles in the initial design, which made the system unnecessarily complex. The engineer had to simplify it for easier coding. This showed me the importance of consistent, scalable typography systems, and I plan to study this area more deeply.