APPLICATION DESIGN I/PROJECT 3: APP DESIGN PROTOTYPE

-
04.11.2024 - 18.11.2024 / Week 6 - Week 8
Marsya Arisa Binti Mahmud / 0359684
Application Design I / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 3: Lo-Fi App Design Prototype
INSTRUCTIONS

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

APP DESIGN PROTOTYPE

Mood Board
Figure 1.1: Mood Board

Figma
The low fidelity app was developed on Figma. I first listed out the pages that was stated in my MVP features and began exploring with the layout and color theme. This is the outcome:

Figure 1.2: Low Fidelity Layout

Interactions
Because it is a basic representation of the app, I only incorporated the main navigation buttons to be interactive for testers to be able to explore the main features. 

Figure 1.2: Navigation Flow

Usability Testing 
After completing the low fidelity prototype, I gathered 3 participants for usability testing to observe their interactions with the app. This helps me configure if the app runs smoothly and keep note of the pain points or any improvements that need to be altered for my high fidelity prototype. 


Usability Testing Analysis
Referring to the video, I gathered the participants' feedback for further analysis: 

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

FINAL SUBMISSION

Low Fidelity Prototype on Figma Link: https://www.figma.com/proto/ADFTd8F6kGD1adUK0bemUR/Superfan?node-id=0-1&t=V1FghW8YCkckD0Ig-1

Dev Link: https://www.figma.com/design/ADFTd8F6kGD1adUK0bemUR/Superfan%3A-Low-Fidelity?node-id=0-1&m=dev&t=Lsyq8z3QiU3fVAII-1

Video Walkthrough



REFLECTION
Conducting usability testing for the Superfan app redesign was a valuable and enlightening experience. Through observing participants interact with the low-fidelity prototype, I gained practical insights into how users navigate the app and the challenges they face. The feedback helped me identify critical areas of improvement, such as enhancing navigation flow and addressing minor usability issues. It also emphasized the importance of balancing functionality with user expectations. Analyzing the recorded sessions helped my ability to  assess design effectiveness and apply user-centric principles. This task has deepened my understanding of iterative design processes and the role of usability testing in creating meaningful user experiences.

Popular posts from this blog

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

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

VIDEO & SOUND PRODUCTION/EXERCISES

-
Image
22/04/2024 - 22/07/2024  /  Week 1 - Week 14 Marsya Arisa Binti Mahmud / 0359684 Video & Sound Production / Bachelor of Design (Hons) in Creative Media / Taylor's University Exercises Table of Contents Instructions Lectures Quiz Results Exercises Reflection INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1KhRUdfMzssK5DMkuq4BZAI9Cot0Dzw-N/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES WEEK 1 (22/04/2024) Document Exercise 1 & 2 Watch stop motion short, share 3 of your favourites on Final Project Watch Everything, Everywhere, All At Once (before week 3) <iframe src="https://drive.google.com/file/d/1lISgNct0JTYqZLdJK2qvQGvv6bvXgLUc/preview" width="640" height="480" allow="autoplay"></iframe> WEEK 2 (29/04/24) Shoot a series of framing shots Shots are landscape and 5 seconds per shot Edit with caption (mention shot size) <iframe src="h...
Read more