Labels

Application Design I - Weekly Journal

Jump Link:

Lectures

Week 3 (9.10.2023)

Today's objective is to learn the definition of usability and its key principles, understanding how to create designs that are user-friendly and intuitive. In addition, we were introduced to Adobe XD, which is a powerful tool for user interface and user experience design.

Lecture Notes

Usability: Designing Products for User Satisfaction

  • Usability - how effective, efficiently and successfully a particular user can utilize a product or design in a certain situation
  • Second level of UX Design
  • Users able to find them easily
  • Achieve objective without relying on expert knowledge
  • High usability - guides users through its easiest route to achieve its goal
Key Principles
  • Consistency - ensures your website looks coherent and works harmoniously, such as headers, footers, sidebars and navigation bars. Consistent navigation system Page layout, menu structure. fonts, typography, branding in web design. Key to be recognized and learned by users. For example, the interface design below shows consistent colour scheme, typography and menu.

Figure 1.1 Consistency

  • Simplicity - user interfaces should be simple for users, minimize the number of steps involved in a process. For example, users can easily know what to do next due to the simple user interfaces
  • Visibility - colour, the more visible the elements, the more easily for users to access and know what is the next step. For example, the use of vibrant colour to encourage users to "add to cart" or "check out".
Figure 1.2 Simplicity and Visibility

  • Feedback - communicates the results of any interaction. To give user a signal that they have succeeded or failed at performing a task

Figure 1.3 Feedback

  • Error Prevention - alerting a user when they're making an error
Figure 1.4 Error Prevention


Common Usability Pitfalls and How to Avoid Them
  1. Complex Interfaces
  2. Confusing Navigation
  3. Poor Feedback
  4. Inadequate error handling
Group activity
  • Due date: 23rd October 2023
  • Group member: Lam Rou Xuan, Wu Yeye, Kang Wei Kee, Sun Xinran, Jiang Haohan, Chai Yan Ning
  • Research - identify common problems that Taylor's students encounter when using the wayfinding system
  • Ideation - brainstorm ideas for your kiosk design
  • Prototyping - create a prototype of the kiosk
  • Testing - test your prototype with potential users

Task

According to the sample given, identify the layout of the menu and replicate it by using Adobe XD

Figure 1.5 Sample

Figure 1.6 UI layout

< back


Week 4 (16.10.2023)

Today, we'll delve into the principles that make user interfaces work well. These rules help us create designs that are easy to use and look great.

Lecture Notes

User Interface Design Principles 

  • User Interface - The techniques that designers use to create user interfaces in software or computerised devices with a focus on aesthetics or style
  • Graphical user interfaces
  • Voice-controlled user interfaces. Example: Siri
  • Gesture-based interfaces. Example: VR games by moving their bodies 
Principle behind good UI
  1. Clarity - users understand why they would use it. Clear and straightforward. Example: Strava
  2. Flexibility - giving flexibility for different customer intents, people can choose the method that work best for them. Example: dark theme or light theme
  3. Efficiency - measures the speed and how quick the users can accomplish the tasks
  4. Invisibility - automatic tutorial when first downloading an app. Example: Smart guide in Adobe
  5. Instant Feedback - tells people how they can - and should - interact with what’s on the screen. Example: location, current status, future status.
  6. User control - allows users to exit a flow or undo their action.

Figure 2.1 Strava UI Design

Figure 2.2 Dark or Light Theme

User Interface visual elements - Line, shape, colour, form, texture, space

Figure 2.3 Visual Elements

< back


Week 4 (20.10.2023)

Today, our class is embarking on an exciting field trip to Rex KL, all thanks to the generous sponsorship from Mr. Yusri. Rex KL is a distinctive center for art and culture, and the highlight of our visit is the 3D spatial visual art gallery. Our main objective for this trip is to explore and understand the workings of this extraordinary spatial art gallery. We're looking forward to witnessing the mesmerizing displays and gaining insights into how it operates. The exhibition featured three themes: "Foreign Nature," "Annihilation," and "Yume." The show lasted for an hour, and it was absolutely captivating, leaving me in a state of awe and wonder.

Foreign Nature

by Julius Horsthuis & Ben Lukas Boysen

Foreign Nature is an enchanting journey into the realm of mathematical landscapes that reveal nature's intricate beauty through captivating fractals. Utilising computer-generated fractals, which are the visual representation of mathematical formulas, Julius Horsthus crafts immersive encounters where self-similar shapes and patterns emerge regardless of zooming in or out. This exhibition blends digital art, mathematics, and exploration, inviting visitors to discover the hidden geometries of the universe. As you traverse these surreal dimensions where mathematical wonders and artistic expression harmonise, be prepared to be fully immersed beyond your senses. Ben Lukas Boysen's specially composed soundtrack heightens this sensory journey that's said to evoke altered states of consciousness, akin to psychonautic experiences. 

Figure 3.1 Foreign Nature

Figure 3.2 Foreign Nature

Figure 3.3 Foreign Nature


Yume

by Fahmi Hosnan & Ashish Khilnani

More than just an exhibition, Yume transforms Japanese history's most cherished masterpieces into an immersive art experience. Through projection and motion, this digital art evolution envelopes you in a breathtaking tapestry of caretully chosen artworks sourced from the public domain. From Kawase Hasui's delicate "Ikegami Honmonji no to" to the iconic "The Great Wave off Kanagawa" by Katsushika Hokusai, the delightiul symphony of treasures takes you through fleeting moments and cultural wonders. Yume also meticulously weaves snow-covered landscapes, like "Heian Jingu no Yuki," and ventures into historical vignettes with SHUNSEN's "Hanayagi Jusuke." The exhibition's devotion to detail uncovers a fresh perspective on timeless creations, seamlessly uniting technology and artistry.

Figure 3.4 Yume

Figure 3.5 Yume

Figure 3.6 Yume


Annihilation

by Colas Fiszman & Jonas Margraf

Experience an enthralling dance performance within a dystopian realm as Annihilation seamlessly blends dance, video, lasers, and electronic music to explore the intricate connections between humanity, technological advancement, and nature. The dancer's captivating movements are projected in real-time using cutting-edge motion capture technology. Meanwhile, intricate 3D laser scans from Belgian and Malaysian places compose mesmerising digital landscapes. Enhanced by Jonas Margrat's 360 spatial soundtrack for a multidimensional auditory adventure, this amalgamation of human expressions and vibrant visuals weaves a digital art narrative, illuminating the dire repercussions of technology's ceaseless advancement.

Figure 3.7 Annihilation

Figure 3.8 Annihilation

Figure 3.9 Annihilation

Following the captivating presentation, we had the chance to engage in a conversation with Mr. Sebastian, who is in charge of the entire exhibition. This allowed us to gain a deeper understanding of various aspects, including the tools and software utilized, the duration of the design process, the team size involved, and the challenges encountered in bringing the exhibition to life. Through our conversation, I've gathered valuable insights and information, and these notes represent what I've learned during our discussion.

Notes

Main Software: Adobe Illustrator, Adobe Photoshop, Maya, Touchdesigner

1. Adobe Illustrator: vector graphics software used for creating and editing illustrations, logos, and other graphics. It's popular among graphic designers for its precision and scalability.

2. Adobe Photoshop: powerful image editing and manipulation software widely used for tasks such as photo retouching, graphic design, and digital art creation.

3. Maya: 3D animation and modeling software often used in the film and gaming industries. It allows artists to create 3D models, animations, and visual effects.

4. TouchDesigner: node-based visual programming language and interactive media software. It's favored by artists and developers for creating real-time interactive installations, immersive experiences, and generative art.

Figure 3.10 Maya

Figure 3.11 Touchdesigner

Device used: Laser projector, PC, Sensor, Audio, Motion Capture Suit

Figure 3.12 Motion Capture Suit

The wearable motion capture suit records the wearer's body movements and operates via a WiFi connection. Its price is set at RM 90,000.

Figure 3.13 Video Rack

Figure 3.14 Audio Rack

The audio rack is network-connected and designed to deliver specialized audio that envelops the entire hall and immerses the listener's ears in a unique sound experience. Each cable connects to one projector. A laser projector has a continuous operational lifespan of 3.5 years and is priced equivalent to that of a Myvi car.

Figure 3.15 PC

A single high-performance PC, equipped with at least an RTX 4090 Graphic Card, has the capability to manage and control up to six projectors simultaneously. In the event of a PC failure, the show will not be interrupted; it will simply require a PC restart, after which the show can seamlessly continue.

Challenge:

The task at hand involves the integration of multiple projectors within a system to ensure that the frames they produce are perfectly synchronized. This requires the implementation of software that can monitor and predict frame changes, and the synchronization of frames must be so precise that a one-frame delay is imperceptible to the human eye. Additionally, both the engineering and content creation aspects of this endeavor play a crucial role. The engineering aspect pertains to the design of how the entire show operates, and content creation demands a six-month effort involving two individuals. Lastly, the operation incurs an electricity cost of 20,000 ringgit for every month!

Figure 3.16 Discussion

In conclusion, I'm delighted because I've gained a wealth of new knowledge related to spatial design, and this has boosted my confidence and deepened my interest as I look forward to my future endeavors. It's been a truly memorable and enriching experience for me! :)

Figure 3.17 Group Photo

< back


Week 5 (23.10.2023)

In today's class, we kicked off with a group presentation centered on the school app kiosk. My role was to create the wireframe using Figma and put the finishing touches on the presentation slides using Canva. Despite encountering some technical issues during the presentation, we managed to provide a comprehensive explanation of the information.

Figure 4.1 Slides

We had a quick lesson on creating user interfaces, and then we got to visit the Vortex XR lab to learn about how VR functions.

Lecture Notes

Documentation involved 6 steps, which are:

  1. Overview - project summary, problem (HCW), solution (SWOT) and definition (Role/Duration)
  2. Discovery - market research, user research, user personas and key findings
  3. Design - sketch, wireframe, usability prototyping, key findings
  4. Prototype - final design, prototype, documentation
  5. Handover - engineer, developer, video prototype
  6. Improvement - next steps, long term plan
To the drawing board:
  1. What problem is it solving and how does it solve it?
  2. Who do you think are the users and target audience of the app?
  3. Have you heard any interesting news about the app recently?
  4. You use the app yourself, how was your experience been?
  5. Who are the app's competitors?
  6. What is the app's value proposition?
  7. What features and user flows are present in the app?
  8. How does the feature you picked impact the company?
  9. What is the target audience for this feature?
  10. Does this feature help in user acquisition, user retention, user engagement, etc?

The Vortex XR lab is situated in Block E on the ground level. It's dedicated to virtual reality (VR) applications, and we had the opportunity to experiment with various VR setups. These included VR sets for gaming, 3D drawing, and exploring virtual environments. While I found them intriguing, I did experience dizziness. Nevertheless, the visit left me feeling inspired and provided me with a deeper comprehension of how VR technology functions.

Figure 4.2 Vortex XR Lab

Figure 4.3 VR gaming

Figure 4.4 3D Drawing

Figure 4.5 Virtual Environment

< back


Week 6 (30.10.2023)

Today, we received a brief overview of our upcoming project, which requires us to create a user interface within our metaverse. Below is the brief focus of our upcoming assignments:

Assignment 2 (20%) + Final (40%)

  • Individual or Groups
  • Theme: based on Spatial Design 1
  • Dateline: Week 14
Focus Assignment 2:
  • User Research
  • Wireframe (sketch: digital/traditional)
  • Mark: Consultation/Work in Progress
Focus Final:
  • UI (prototype)
  • Functionality
  • Report
  • Presentation: Week 14/15


We also learned that before creating a good user interface, it's important to first figure out the user's journey map. This map helps us understand what the user will do next, which is essential for designing prototypes.

Lecture Notes

User Journey Map

  • The user selects a room and enters their check-in and check-out dates.
  • The user enters their personal information, such as name, email address, and payment information.
  • The user confirms the booking and receives a confirmation message.

Figure 6.1 Customer/User Journey Map

Figure 6.2 Example of Customer Journey Map

Parts of the customer journey (example)

Awareness - Consideration - Conversion - Retention - Brand loyalty

What is the customer doing?
  • Researching local gyms
  • Reading reviews
  • Comparing membership options

What is the customer thinking?

  • "I wish I knew someone who could recommend this gym."

Where and how could the customer encounter your brand?
  • Online reviews
  • Social media pages
  • Paid ads
What touchpoint opportunities are missing?
  • Success stories on social media
< back


Week 7 (6.11.2023)

In today's lecture, we learned about the significance of user personas in the process of UX design. User personas are a crucial step in understanding the needs of individuals who will be using our website, and they help us enhance the overall user experience. This involves conducting interviews with potential users to gather insights and requirements, which in turn guide our design decisions.

Lecture Notes

User Personas: What are they and why they matter in UX design

  • fictional character that represents your target audience
  • interview to get information to develop UX
  • gather findings and use them to define a realistic character that likely use your product
  • build new experience are not the same as buyer personas or marketing personas
  • not representative
  • benefit: know your audience better, make informed decisions, add a human touch, improve accuracy of your product, design a better flow
Figure 7.1 User Persona


How to create user persona:
  1. Conduct qualitative and quantitative user research. Ex: Qualitative: user interview, focus groups, contextual interviews, usability tests. Quantitative: rating (1-5 stars)
  2. Organize your research. 
  3. Decide on a number of personas
  4. Describe your personas
  5. Visualize your user personas
  6. Integrate user personas
Final Project: 
  • Create user persona 
  • Maximum 10 minimum 6 people
  • What should include: Goals, frustration, about, social profile, rating, favourite brands
  • Must in design style

During today's lecture, we were also introduced to the basics of Photoshop. This session covered the foundational principles and tools within the program, providing a fundamental understanding of this graphic design software.

Photoshop tutorial:
  • Most important is layer
  • Online resolution: 72 dpi, print: 150-300 dpi
  • Online: RGB, print: CMYK (cyan, magenta, yellow, key)
  • Setting is important!

Figure 7.2 Web Design Size
  • auto generate blank space - select empty space, choose "generate fill", type prompt if you want
  • filter image - go to "image", select "adjustment"
  • save as photoshop and jpeg format
Figure 7.4 Generative Fills

< back


Week 9 (20.11.2023)

Today is our first consultation week, which we should be starting our final project. Renee and I started this project by constructing a Google Form for our user persona. During today's consultation, I received valuable feedback on the user persona survey, which can enhance the survey form, making it more effective in gathering direct and meaningful data for our UI design.

Adjustments to make:

  1. Create more multiple choice questions - allow user to tick and ease their job
  2. Question should be more specific
  3. Decrease long-answered questions
  4. Decrease the number of questions - allow user to finish the survey in shorter period and prevent them from losing interest
  5. Do the survey at National Art Gallery - to get in touch with people who have passion in art from different backgrounds, age and status

Below is our modified google form after today's consultation:

After making adjustments to our Google Form, we started the distribution of the form to individuals passionate about art around us and also reached out to art enthusiasts on social media. Our objective is to gather valuable insights that will help us create a UI design that resonates well with our target audience.

< back


Week 10 (27.11.2023)

Today we had online consultation with our lecturer. We had shown our drafts of our art gallery website, which consists of landing page, booking page, gallery and artwork page and also directory. Our organization of the UI design was okay. We were told to create our own logo and also make a same website in desktop format. In order to monitor the progress of this final project, I have created another page which is specifically for this assignment. This page will include all the details and contents of this project.

Below is the link:

Application Design I - Assignment (szeching0119.blogspot.com)

< back


Week 11 (4.12.2023)

Today's consultation, we presented our wireframe made using Figma to our lecturer to give valuable feedback since the last week's sketches were not really organized. We got quite a satisfied comment upon on our wireframe, however some adjustments should be implemented to make our prototype more organized and user-friendly. 

Adjustments on wireframe

  • Make the art gallery to free-entry, instead of buying tickets to enter it
  • Remove the ticket for art gallery in booking page
  • Remove "continue as guest" in log in/sign up page
  • Use interesting and vibrant colour on our logo
Modified wireframe
Figure 11.1 Replace "Buy ticket" with "Enter"

Figure 11.2 Removed "Continue as guest"

Figure 11.3 Removed ticket for art gallery

< back


Week 12 (12.12.2023)

Today, following the Honor ceremony, we had a brief consultation with our lecturer to review our completed work. Our UI design is generally satisfactory, but there are some adjustments that we need to make.

Adjustments on UI design

  1. Add profile page
  2. Separate the upper panel by adding a line or change another colour
  3. The colour of the logo should be darker and easily be seen
Modified UI design 
Figure 12.1 Profile page

Figure 12.2 Line added for header


Figure 12.3 Modified logo


Clarification on report
  1. Objectives: what is the point of making this user interface?
  2. Problem statement: what kind of problem would you like to solve by making this ui?
  3. Future implementation: example, live chat, interactive video and etc.
  4. Conclusion: what do you learn?
< back


Week 13 (18.12.2023)

Today is our last meeting with our lecturer. We asked him to check our report to make sure it's correct. Luckily, our report and user interface design are on the right track. We're happy that there are no last-minute changes needed because we've been updating the lecturer every week on our progress.

I have completed a page for brainstorming and design phase for the user interface. The website link is Application Design I - Assignment (szeching0119.blogspot.com)

< back


Week 13 (24.12.2023)

Today, we presented our metaverse to the lecturer, Mr. Yusri, Mr. Max, and Mr. Zeon. We put in a lot of preparation to stay within the 15-minute time limit, as per the rules. However, in order to meet the time constraint, we had to reduce some points, resulting in a presentation that lacked a bit of information. Nevertheless, we received valuable feedback from our lecturer to enhance and refine our metaverse further.

Feedback on Presentation

  • Our explanation is not detailed enough
  • There are a few information which is not clarified

Feedback on UI design

  • The "purchase successful" page should be added with more design and code
Feedback on Metaverse
  • Our metaverse is not creative enough, common building structure
  • Our gallery is not informative enough
In general, we received positive feedback for our minimalist presentation slides. Although we feel somewhat disappointed with our performance, we're determined to make improvements and enhancements to elevate it. We are grateful for the valuable feedback provided to us!

< back
















Labels:

Comments

Post a Comment

Popular Posts