Design Exploration

4 April 2026

CHONG CHENG TAO (0371072)
Design Exploration | Bachelor of Design in Creative Media | Taylor's University

List


LECTURES

Week 2 

Playful! Y'all always forget it. 

As we live in a visual information culture. Visuals are powerful persuasive medium to provide most of our information about the world. 

Visuals are: 
  1. Everything that can be seen AND 
  2. Everything produced or created by humans that can be seen
Provocation visuals disrupt the usual unconscious thought process. There are four emotions that often portrayed in provocation visuals: 
  1. Shock
  2. Shame
  3. Fear
  4. Anger
BUT as an designer, people perception on provocation visuals can be influenced due to 
  1. Cultural Sensitivity
  2. Polarization and Division
  3. Economic Instability
  4. Social Justice Movements
HOW ABOUT Playfullness? We can achieve it by: 
  1. Provide the right fucntions
  2. Offer usability & reliability
  3. Engage users with feedbacks and interactions
How can be experience playfulness before actully build it? We can try iterative design. 

Iterative Design

Week 4

Visual elements can be used as good and bad thing. Visual is often used to maintain favorable social circumstances. 

For our project, we are encouraged to research about the visual that have been circled around before. \

Narrative drives how the visual would be. 

INSTRUCTIONS
This is the Module Information Booklet for this module: 

  1. ENTRY 1: Potential idea so far
  2. ENTRY 2: My final, confirmed idea
  3. ENTRY 3: Project planning over 7 weeks
  4. ENTRY 4: Deliverable status so far
  5. ENTRY 5: Final output status

ENTRY 1: Potential idea so far

Project Direction

My idea would be surround Atelophobia, an anxiety disorder of fear of being flawed. People who suffered atelophobia often tied their self identity with their  performance in working, relationship and behavior. 

It is often confused with perfectionism. Perfectionism is a person striving for excellence, whereas atelophobia is a person viewing the possibility of an error as a threat. 

Perfectionism v.s. Atelophobia

Some of the key indicators of Atelophobia: 
  • Intense self-criticism
  • Low self-esteem
  • Anger or irritability
  • Obsessive worry about past of future
  • Panic attack
  • Shortness of breath

Theme exploration

In this project, I would explore micro-exposure therapy (MET). MET is a type of therapy that involve very small, brief and frequent "experiments" to face fears and break anxiety habits. ''

MET should be small, light weight and can be done anytime, anywhere. It often involve removing tiny and unconscious rituals used to feel safe. 

In the context of Atelophobia, the aim is to let user reappreciate “accident” as a type of “beauty/art”, involving a gradual, systematic approach to facing situations where mistakes are normal.


Technical exploration

On the technical aspect, I would be exploring:
  1. Creative Coding
  2. Vibe Coding/AI assitant coding
In this current era, I think its a big waste if a designer don't utilize the capabilities of AI.

In the past, due to limited technical ability, the prototype created by a designer often feel "vague". At best, we can make the visual look great, walkthrough the app flow; but sometimes we were unable the key MVP that the product truly intended to convey. 

For this project, I want to explore how vibe coding (code with the assistance of AI) in enhancing the effectiveness of product development. I still believe in expertise, an experienced developer ensured a solid and reliable product. However, designers should also be involved in this process. 

What is used: Antigravity, Google AI Studio, Github


What is the expected outcome? 

Ateles, a web application that provide micro-exposure therapy approach for Atelophobia community. 

The word Ateles is a term origin from Greek atelēs, meaning "incomplete" or "imperfect". However, in this application, Ateles represent a type of beauty & aesthetic. 

Yes, flaw and mistake can be beautiful. The aim is to let user reappreciate “accident” as a type of “beauty/art”.

This approach is inspired by some self-help strategies in Atelophobia community: 
  1. Cognitive reframing
    • The patient gradually overcome Atelophobia by having the mindset of “Planning to fuck it up”. By deciding to do a task poorly on purpose, you succeed in your goal (failing intentionally), which somehow hacks the brain’s fear response. Besides, it includes replacing the shame of “Not knowing” to “Wanting to learn new things is great!”. 
  2. Exposure therapy
    • This method is about exposing yourself to the situation that you don’t want to be in. Over time, it helps in decreasing the emotional trigger of imperfection. 

Wireframe

ENTRY 2: My final, confirmed idea 

MVP 

"Ateles: A tiny ritual. "

Designed for thoese who are terrified of little flaw and mistake. Ateles has prepared a tiny ritual for you, allowing you to transform flaw into beauty with your touch. The goal isn't to presue perfection, but discover the beauty emerged from imperfection. 

Here are the key MVP for Ateles:
  1. Draw your "Ego": Begin with putting effort into a canvas.
  2. The Release: A physical SHAKE or DRAG, transforming your "ego" into raw flaws. 
  3. Create Ateles: Appreciate the flawed beauty. 
  4. Save Ateles: Ateles will stay with you forever, recording every step of your ritual journey. 
Unique Selling Point: 
  • No undo, no redo: We don't erase the flaw, mess and mistake; you must move through it.
  • No "perfection" trap: You are limited to a few SHAKE/DRAG; embrace it.  

A basic user flow for Ateles: 

Basic user flow

Idea refinement thoughout the weeks: 


Idea refinement

Tech Stacks: 

Tech Stacks


Play with the MVP prototype HERE: 

Ateles_MVP Prototype

TASK 1: Presentation Slides

ENTRY 3: Project planning over 7 weeks

Following are the project planning for the next 7 weeks. 


Timeline planing


ENTRY 4: Deliverable Status So Far

User Testing

5 user testing is conducted.

The testing objectives and goal are:
  1. To validate Micro-Exposure Therapy (MET).
  2. To assess whether transforming broken visuals into Ateles visuals successfully alter user’s perception on “flaw” and “mistake”.
  3. To evaluate the usability and responsiveness of UI and p5.js physics on different device. 
Following are the 5 users: 
    Testing users

    Analysis summarize


    UI Update: Navigation Bar

    • Navigate to “Gallery” and “Ateles” pages
    Navbar

    • Navigation bar turn into button in different Ateles phrase
    • Minimize & prevent button blasting.
    Navbar to Button

    Feature Update: 

    Brush Setting
    • Move settings are implements in drawing.
    • Stroke type, fill mode, size, opacity etc.
    Brush settings

    Brush testing

    Onboarding
    • 3 steps:
      1. Draw your ego
      2. Shake or Drag
      3. Create your Ateles
      Onboarding screen


      Backend Implementation
      • Using Supabase, an open-source, backend-as-a-service (BaaS).
      • Authentication: Allow user to create account, user ID, username and password.
      • Database table: Store user usage history in Ateles, including Ateles visual, journal text, created time etc.
      Database table

      MILESTONES 2: Project Deliverable Status

      FEEDBACK

      REFLECTIONS

      Comments

      Post a Comment