Design Exploration | An Exploration Project

Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media

Design Exploration

Week 1 — Week 15

Design Exploration: A Self-Developed Website 

Participating in the Design Exploration module has been an incredibly exciting, tiring, but ultimately memorable experience. From the initial hurdle of deciding on a project topic to finalizing the design and diving deep into the technical coding development, this journey has required an immense amount of effort and hard work. I am writing this blog to document how those initial "sweats" and brainstorming sessions evolved into a functional digital solution, capturing every step of my progress and the personal growth I’ve gained along the way.






These are the jump links to each part of this portfolio


Instructions

Mr Asrizal, my lecturer for the Design Exploration module for this September 2025 semester, gives us a heads-up on the upcoming tasks and requirements.


    Work Process

    Weeks 1 – 4: Finding Purpose in Digital Inequality

    Early in the project, I faced a crossroads. I originally considered a motion design project to showcase animation skills, but my upcoming industrial training shifted my focus toward UI/UX design. I wanted to build something that solved a real-world problem while aligning with UNSDG 10: Reduced Inequalities.


    I noticed a recurring issue: emoji misinterpretation across cultures and generations. My research confirmed that while this "communication gap" is well-known, it is rarely addressed through design. I decided to develop a website to tackle this "knowledge inequality." My content planning centered on four key features:

    • Emoji Encyclopedia: Bridging the gap between official and interpreted meanings.

    • Custom Emoji Maker: Empowering users to create personalized expressions.

    • Global Map: Visualizing how meanings shift across borders.

    • Interactive Poll: Encouraging users to pause and reflect on their own interpretations.

    Concept Wireframe Sketch


    Weeks 5 – 10: From Lo-Fi Sketches to Hi-Fi Systems

    With the roadmap set, I began sketching wireframes in Procreate, focusing on user flow and planned interactions. Transitioning to Figma, I moved rapidly through the lo-fi stage to establish a systematic layout.

    Lo-fi prototype

    The hi-fi phase was the most intensive. I explored numerous design variations, refining color palettes and compositions to ensure the visual language felt modern and accessible. To ensure a seamless transition to the development phase, I spent the final week of this sprint exporting all SVGs and image assets, organizing them to ensure a "clean" hand-off to my own coding environment.

    Layout Refinement & Navigation Logic

    Moving beyond the initial lo-fi wireframes, I spent significant time refining layout measurements, such as the margins and padding of each element on the website. There has been a lot of exploration on the arrangement of the content, where each design variations improve the content readability and structures it better until the final version. By focusing on precise content placement, I aimed to improve the overall flow of the site. It’s not just about aesthetics, but it’s about ensuring that the navigation is intuitive enough that the user never feels lost while exploring the complexities of emoji misinterpretation.

    From LoFi wireframe to HiFi prototype


    Asset Creation

    To bring more life to the website, I took inspiration from my friend's creative illustration of the mascot for my website. I also began expanding and developing necessary visuals that are required and fitting to the website content, instead of random illustrations that don't reflect the topic of each section on the page. To maintain a unified brand identity across all team outputs, I developed custom illustrations and SVGs tailored for the web. This included a flat, single-color world map for our global data visualization and specific components for the Emoji Maker. Using these custom assets ensures that the website feels like a cohesive part of the EMO: TION ecosystem rather than a standalone tool.

    Some of the illustrations created for the website


    Interactive Storytelling & UX Micro-interactions

    A website about communication should feel communicative, thus I've planned various interactions ranging from subtle header text reveals to specific hover states for on-screen elements. These aren't just for decoration or sorts, they are designed to keep users engaged, ensuring they learn by carrying out actions as they interact with the campaign’s content that I've prepared.

    Overall website scroll to reveal content animation

    There are many more individual animations on each section that I'm unable to display here on this blog, but you can get how the entire website looks from the video above!


    Weeks 11 – 15: The Reality of Code and Optimization

    The final stretch involved bringing the design to life using HTML, CSS, and JavaScript. I prioritized responsiveness; in today’s mobile-first world, a communication-themed website must be accessible across all devices to truly reduce inequality.

    Development was a complex balancing act. I leveraged AI to assist with functional logic, but I found that having a strong foundation in frontend coding was essential to oversee and manually adjust the code for accuracy. As the site grew, I hit a performance wall. To ensure a smooth experience, I implemented:

    • Performance Optimization: Removing redundant code and reducing asset file sizes.

    • Lazy Loading: Ensuring the page remains lightweight and responsive.

    • Architecture Split: I separated the "Emoji Maker" into its own page to isolate the heavy canvas rendering from the main site’s performance.

    Following feedback, I added fine details like tooltips and refined animations to ensure the site didn't feel "static" or bland. These small touches transformed the site from a flat document into an engaging, interactive journey.

    Some of the website progress :)


    "This is crazy."




    Our Deliverables

    Presentation Video






    Project Management Document



    Figma Design File



    My reflections

    Spending weeks debugging and refining code was an exhausting but incredibly fruitful experience. This project taught me that UI/UX development is far more demanding than it appears on the surface. The thought process required to make a design functional—even with AI assistance—requires significant mental effort and strategic planning.

    While it may not be the "perfect" visual design, EMO:TION is my most memorable project to date. It represents the moment I moved beyond just "making things look good" and started building tools that function with purpose and professional rigor.





    Comments

    Post a Comment

    Popular posts from this blog

    Information Design | Exercises

    Image
    Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media GCD 60504 | Information Design Week 1 — Week 2 Exercise 1: Quantifiable Information To give us a brief idea of how information can be quantified and categorised into separate sections, the first exercise we receive gives us students the chance to simulate quantifying raw data and visualize data for easier interpretation and analysis. JUMPLINKS These are the jump links to each part of this portfolio Lectures Instructions Exercise Work Process My reflections Lectures Week 1: Type of Infographics In the first week, I was introduced to the various types of infographics. The lecture made me realize there is so much infographic content, that I've always s...
    Read more

    Information Design | Project 1

    Image
    Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media GCD 60504 | Information Design Week 3 — Week 5 Project 1 : Animated Infographic Poster After learning about the information design by further applying the L.A.T.C.H principles into the second assignment, I started on developing an infographic that presents a series of different processes as visuals. This assignment allows us to tackle on existing infographic posters, which can be revamped and enhanced to provide a better comprehension of the content. GIF via Giphy ...
    Read more

    Application Design II Task 1

    Image
    Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media MMD 60204 | Application Design II Week 1 — Week 4 Task 1:  App Design 1 Self-Evaluation and Reflection In contradiction with a statement, design itself is not truly perfect. Thus, I launched another self-evaluation on my previous application design on SPayGlobal, an e-wallet app that provides monetary services in Sarawak state for the residents. In this first task, I explored the many design details I lacked previously and made adjustments to each of the mistakes to provide a more intuitive and user-centric design. App Redesign on Figma JUMPLINKS These are the jump links to each part of this portfolio ...
    Read more