Design Process

💡 Ideate

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. 

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.

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.

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.

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.

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.