MAJOR PROJECT 1/TASK 3: CONCEPT PRESENTATION

-
12.03.2025 - 19.03.2025 / Week 6 - Week 7
Marsya Arisa Binti Mahmud / 0359684
Major Project 1 / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3: Concept Presentation
INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1JV8YXdnlMf16leE14z5HaP4G7qW0_kip/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 3: CONCEPT PRESENTATION

For Task 3, our expected deliverables are:

  • Storyboard/Sketches - Ga Wai
  • Design Resources for Ideation - Marsya & Tracy
  • Information Architecture (Card Sorting) - Marsya, Velicia & Tracy
  • User Work Flow - Velicia & Tracy
  • Design Guideline - Individual
  • Wireframe - Individual
Design Resources
Tracy and I explored various UI application designs to ideate the app we are developing. We created a mood board on FigJam so the rest of our group members have a direction when it comes to our design guidelines and wireframe/sketches.

Visual References on FigJam: https://www.figma.com/board/PJgg4RjLekXiZkRHQnqMTs/Group-6%3A-Major-Project-I?node-id=0-1&p=f&t=yaJHg9AqmcROT0EL-0

Information Architecture
Velicia made a list of features that will be included in the app whilst I categorized them to establish our navigation bar. 

Figure 1.1: First Draft Information Architecture

After discussing with my team, we decided that the app should only have a maximum of 6 navigation icons. I then narrowed down the features and reconstructed the chart to 5 sections, with 3 other features being accessible to all pages.

Figure 1.2: Final Information Architecture

Tracy continued this part by listing out the features and categories on UXTweak and distributed it for additional feedback from our target audience. 


Figure 1.3: UXTweak Insight

Design Guideline
Each group member is required to create a design guideline. This is what I have come up with, the brand color revolves around orange. This will play a part in developing the application later on. 

Figure 1.4: Design Guideline

Wireframe
We were given the option to create a wireframe or sketch out our application. This is to visualize and give structure to our application before developing the actual Lo-Fi Prototype. I created a wireframe that consists of 8 main features from the application:
  • Home
  • Pet Browsing
  • Pet Profile
  • Pet Care
  • Community & Forum
  • Offers & Deals
  • Live Chat
  • User Profile
Figure 1.5: Wireframe on Figma

Full Wireframe on Figma: https://www.figma.com/proto/VvB8xJBDUpNo2EUwpQzg8C/Animal-Adoption-%26-Pet-Care?node-id=0-1&t=9GfsUalG6S6JiHub-1

Final Project Slide

FEEDBACK

WEEK 6 - 13/03/2025
For information architecture, final outcome should be in card sorting method. Proceed with the rest of the project. 

WEEK 7 - 19/03/2025
Design guidelines need to be more specific, with clear labels and samples.

REFLECTION
For this project, I observed how structuring information effectively improves user experience, especially in app design. Through research and discussions, I found that simplifying navigation and refining the design guidelines made the interface more intuitive. Working on the information architecture and wireframes helped me understand how features should be categorized for better usability. Overall, this experience reinforced the importance of planning, feedback, and iteration in creating a functional and user-friendly design.

Popular posts from this blog

ADVANCED TYPOGRAPHY/TASK 2: KEY ARTWORK & COLLATERAL

-
Image
13/05/2024 - 03/06/2024  /  Week 4 - Week 7 Marsya Arisa Binti Mahmud / 0359684 Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 2: Key Artwork & Collateral LECTURES Lectures from Week 1 - Week 4 are documented in Task 1 WEEK 5 - PERCEPTION AND ORGANISATION (20/05/24) Perception Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organization . Contrast There are several methods in typography to create contrast: Contrast in Size: Provides a point to which the reader's attention is drawn. Bigger letters are seen first before smaller letters, normally the heading is bigger than the body text. Contrast in Structure: Structure means different letterforms of different kinds of typefaces. (sans serif and traditional serif, italic and blackletter) Contrast in Texture: By adding contrast of size, weight, form and structure. It gives contrast of texture to the page.  Cont...
Read more

ADVANCED TYPOGRAPHY/TASK 1: EXERCISE 1 & 2

-
Image
22/04/2024 - 13/05/2024  /  Week 1 - Week 4 Marsya Arisa Binti Mahmud / 0359684 Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1: Exercise 1 & 2 Table of Contents Lectures Typographic Systems: Exercise 1 Type & Play: Exercise 2 Feedback Reflection Further Reading LECTURES WEEK 1 - TYPOGRAPHIC SYSTEMS (22/04/24) There are 8 major variations with an infinite number of permutations: Axial Radial Dilational Random Grid Modular Transitional Bilateral Axial All elements are organised to the left or right of a single axis (axis can be bent)  Figure 1.1: Example of Axial (source: type365) Radial All elements are extended from a point of focus Dilational All elements expand from a central point in a circular fashion Random Elements appear to have no specific pattern or relationship Grid A system of vertical and horizontal divisions Figure 1.2: Examples of Radial, Dilational, Random and Grid Modular A series of non-objective el...
Read more

VIDEO & SOUND PRODUCTION/PROJECT 1: EXERCISE 1 & 2

-
Image
22/04/2024 - 22/07/2024   /  Week 2 - Week 6 Marsya Arisa Binti Mahmud / 0359684 Video & Sound Production / Bachelor of Design (Hons) in Creative Media / Taylor's University Project 1: Exercise 1 & 2 INSTRUCTIONS Sound for Visual Choose or record sound clips to be used to create sound effects to bring a video clip to life. The clips will be provided. Identify the visual components for the video clip that needs sound. Voice Editing: Audio Effects - Pitch Shifter - Semi Tones Volume: Dialogue (between -6dB & -12dB), Ambience (below -20dB) <iframe src="https://drive.google.com/file/d/1KhRUdfMzssK5DMkuq4BZAI9Cot0Dzw-N/preview" width="640" height="480" allow="autoplay"></iframe> PROCESS WORK For this exercise, we were instructed to create sound effects for the clip provided . We were also given the script to make it easier to break down each scene. Before beginning the process on Adobe Premiere, we had to properly plan our ...
Read more