UI/UX Design

Destination Shanghai is a fully custom-built WordPress website created to serve as a dynamic travel guide for visitors interested in exploring Shanghai. Designed and developed collaboratively, the project leverages a custom theme architecture to deliver modularity, performance, and full design flexibility.

My Role in the Project:

• Collaborated on theme development using PHP and WordPress template hierarchy
• Implemented front-end layout and styling using semantic HTML5 and CSS3
• Integrated JavaScript for interactivity (e.g., smooth scrolling, responsive navigation)
• Ensured cross-browser responsiveness and accessibility compliance

Key Features:

• Custom WordPress Theme: No third-party templates used—designed and coded from scratch to match exact UI/UX requirements.
• Attractions Directory: Modular layout showcasing Shanghai’s highlights (e.g., The Bund, Yu Garden, Disneyland), each with imagery and dynamic “Read More” links.
• Media Integration: Video highlights and visitor testimonials add authenticity and engagement.
• Scalable Design: Easily extendable structure for additional destinations or localized content.

Technical Stack:

• WordPress (PHP templating)
• HTML5, CSS3, JavaScript (vanilla)
• Responsive grid system and reusable component blocks

Stargaz is a mobile app created to help users plan, track, and enjoy stargazing experiences. This group project was part of our UX Design course, where we focused on creating a smooth and engaging user experience supported by a strong visual identity.

As a team, we developed detailed personas to better understand our target users and guide our design decisions. We also created a moodboard to explore the visual direction of the app. The branding reflects a dreamy, cosmic atmosphere with a purple-toned color palette, soft gradients, and calming visuals that match the peaceful nature of stargazing.

My main contribution to this project was designing the Events section of the app, which includes the Event Calendar, Upcoming Events, Reminders, Schedule, and Past Events pages. These screens allow users to easily view upcoming events, set reminders, manage their schedules, and look back at past experiences. I focused on consistency, accessibility, and simplicity to make the experience enjoyable for all users.

This project allowed me to apply core UX principles such as user research, visual storytelling, and interface design in a collaborative setting.

As part of a collaborative team project in our college program, we undertook a comprehensive rebranding and website development initiative for SkyMap Aviation, a distinguished flight training institution in Canada. Our objective was to modernize their digital presence and enhance user experience (UX) through strategic design and development.​

Our Approach Included:

Brand Identity Development:

We crafted a new logo that encapsulates SkyMap Aviation’s mission and values, ensuring it resonates with their target audience.​

User Experience (UX) Design:

Through the creation of mood boards and user personas, we gained insights into user needs and preferences, which informed the design of wireframes and prototypes. This process allowed us to structure the website intuitively, enhancing navigation and accessibility.​

Website Development:

Utilizing WordPress and Elementor, we developed a responsive and visually appealing website. The platform’s flexibility enabled us to implement custom designs and functionalities that align with SkyMap Aviation’s brand identity and cater to user needs effectively.​

Key Features of the Website:

• Responsive Design: Ensured optimal viewing experiences across various devices, including desktops, tablets, and smartphones.​

• Intuitive Navigation: Structured the site to allow users to find information effortlessly, enhancing overall usability.​

• Engaging Visuals: Incorporated high-quality images and graphics that reflect the dynamic nature of aviation training.​

• Clear Calls to Action: Designed elements that guide users towards desired actions, such as enrolling in courses or contacting the institution for more information.​

This project not only refined SkyMap Aviation’s brand image but also significantly improved their online user engagement through thoughtful design and development.