Week08~Week14/13.06.2025~25.07.2025
YapGuangYou/0363730
UX Design/Bachelor of Design(Hons) in Creative Media
Task 4/Prototype and Concept Testing
Content
Progression
Week 09-10/Meeting to Decided Our Product&Find References and Inspiration
At the beginning of the project, we held a meeting to decide on the product or solution we wanted to work on, referring back to the insights and findings from our previous tasks. We began by listing out our problem statement and identifying the core issues we aimed to address. To help us prioritize effectively, we used the MoSCoW method (Must have, Should have, Could have, Won’t have), which was introduced during the lecture. This method helped us clarify what features or goals were essential, and what could be optional or postponed. It provided a clear framework for decision-making and ensured that our team stayed focused on what really matters in the early stages of ideation.
We decided to create an app designed to help Taylor’s University students plan their daily commuting routes more efficiently. The app will include multiple key features such as: Parking availability tracker Real-time campus and traffic map Smart scheduling system One of the main functions will allow users to compare travel time across different modes of transport—such as driving, public transport, or walking—so they can choose the most time-efficient option. Additionally, the scheduling system can be linked to the user’s Taylor’s class timetable, helping students plan their routes based on their actual class schedule. This app aims to reduce commuting stress and improve time management for students.
Week11/More Clarification and Task alignment
In Week 10, we conducted a usability exercise where we assigned a specific task to a user and observed how they interacted with our app concept. The goal of this test was to identify whether our product felt too cluttered or complicated, and to understand how intuitive it was for users to achieve their goals. Through this exercise, we realized that we were trying to include too many features and steps, which made the user journey unnecessarily long and confusing. As a result, we decided to simplify the user experience by focusing on a more straightforward approach. Our new guiding concept is: "Click and Go" — minimizing the number of steps users need to take, and keeping interactions smooth and purposeful. From there, we finalized the essential features we want to keep and clarified our next steps: we will be creating both Lo-fi and Hi-fi prototypes of the app. Additionally, based on Vincent’s suggestion, we agreed to include a short animation loading screen to enhance the user experience. I was assigned to handle the design and development of this loading screen.
Week12/Skeches and Art Direction
We held an online meeting to decide on the art direction for our app. As a team, we agreed to use red as the primary color, as it is bold, eye-catching, and aligns well with Taylor’s University’s identity. For the loading screen, we decided to include a duck as a visual mascot to represent our campus in a playful and recognizable way. We also plan to incorporate transport-related elements to clearly reflect the purpose of our app—helping students with commuting and route planning.
Week13/Fisrt Version of Loading Screen
I used Clip Studio Paint to create the animation. Since I haven’t tried animating before, I felt quite excited to explore something new. I chose Clip Studio because it’s a software that focuses on drawing and animation, and I saw this as a great opportunity to improve my skills with it. For the animation, I created a scene with a duck swimming calmly on a blue background, followed by a smaller duck trailing behind. This idea came from an earlier sketching phase where we discussed how people are often stuck in traffic, stressed and rushing, while ducks seem relaxed, just swimming around or playing. We really liked this contrast and decided to turn it into a visual metaphor: “Use our app, and you can become the duck.” It’s a fun way to show that our product helps make commuting smoother, simpler, and more relaxed.
So, it became quite obvious that the duck’s movement was a bit laggy, and the background didn’t blend well with the overall animation, which made the entire loading screen feel a bit off. To improve it, I started studying how other apps design their loading screens—especially how they handle motion, color balance, and visual flow. By analyzing professional examples, I hoped to gain insights on how to make the animation feel smoother and more polished, while still keeping our playful concept intact.
Week 14/Final Preparation and Final Presentation
After doing some research, I realized that the duck doesn't necessarily need to move actively—the sense of motion can be conveyed through other visual elements. So, I came up with a new idea: instead of animating the duck frame by frame, I placed a single duck in the center of the screen, and added graphic elements that represent water waves, creating the illusion that the duck is floating or moving naturally.
I also discovered that the previous version felt too long and laggy, mainly because I animated it frame by frame, which made the motion choppy. To improve that, I tried a new approach: using the same motion across three frames. This made the animation feel much smoother and more consistent.
One of my teammates suggested adding a title text at the bottom using the name of our app — "EZKommute". I really liked the idea. So, I used the SF Display font, which is commonly used in app design, and made the text red, so it would stand out clearly on both white and black backgrounds.
I also experimented with an 8-bit style font on my own. I felt it matched the playful visual style quite well. However, for the final version, I decided to go with SF Display as it looks more conventional and professional.
For the background itself, I kept it plain black and white this time instead of using a gradient, as it gives a more modern and polished loading screen feel.
Looking ahead, I plan to create different versions of the duck, including a minimalist one and a cute cartoon-style one. I also want to design alternative backgrounds, especially for users who prefer dark mode, to give them a more personalized experience.
Click Here to Ascess Loading Screens
Then we moved on to create our final presentation slides. We continued using the same slide deck we had been updating throughout the project to track our progress. Our final presentation was held online on Monday (21.07.2025).
Final Submission
Figjam Board:Click Me!
Prototype:Click Me!!
Final Presentation Slide:Click Me!!!
|
| Loading Screen Black 1 |
|
| Loading Screen Black 2 |
|
| Loading Screen White |
Feedback
Week11
We didn’t have much time left to work on the prototype, so our lecturer suggested that we focus on the most important feature of our app — the route planning function.
Week12
The animation didn’t look quite right — it might be better to try another software or use existing vector assets to improve the result.
Reflection
Communication really helped us stay on track throughout the project. Even when unexpected things happened, we were able to support each other and keep moving forward. I’m truly happy that we managed to complete this project together. Big thanks to Vincent and Anursar for everything, and also to our lecturer for the guidance and for always being open to our questions.
For a long-term group project like this, staying connected is the key—nothing is more important than that. That’s one of the biggest takeaways for me. I also learned to view every new task as an opportunity. For example, this was my first time creating an animation and designing an app—two things I never imagined I’d try. But I did it, and I think I did quite well. It was a personal breakthrough, and I’m proud of that.
Beyond that, I gained a lot of insight to improve my own specialization. What I’ve learned here is highly valuable for Entertainment Design—especially understanding the target audience, so the content I create can connect with them more deeply.
Another important lesson is to always keep thinking creatively. This is something I learned from another lecturer, Mr. Kannan. He encourages us to always think, explore wild ideas—even if they don’t fit the current project, they might be useful for the next one. That’s why I’ve started writing down every idea I have, so I won’t run out of inspiration when I need it. Thinking outside the box has really helped me a lot, and overall, this has been a fun and eye-opening journey.
Task 1:UX Design/UX Audit & Interview
Task 2:UX Design/User Personas and Empathy Map
Task 3:UX Design/User Journey Map and Ideations
No comments:
Post a Comment