APPLICATION DESIGN I/FINAL PROJECT: COMPLETED APP PROTOTYPE

-
18.11.2024 - 16.11.2024 / Week 8 - Week 14
Marsya Arisa Binti Mahmud / 0359684
Application Design I / Bachelor of Design (Hons) in Creative Media / Taylor's University
Final Project: Completed App Design Prototype
INSTRUCTIONS

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

COMPLETED APP DESIGN

Low Fidelity vs High Fidelity
For my high fidelity prototype, I incorporated more sections and interactions when developing the pages compared to my low fidelity prototype:
  • Text input
  • In depth interactive buttons (back button, play button for song preview, button variants)
  • Chat interface
  • Artist and friend search
  • Group creation
  • Friend profile
  • Friends list
  • Achievement page
  • Settings
User Testing
I  made a few alterations based on the issues I have observed when conducting the application usability with 3 participants:
  • Header for each section
  • Ratio and brightness of colors
  • More interactive buttons
  • Enhanced interactive button display
Button Variants

Figure 1.1: Button Variants


Figma Prototype

1. Login and Sign Up Page

Figure 1.2: Login and Sign Up Pages

2. Account Setup (For Sign Up)

Figure 1.3: Account Setup Pages

3. Homepage Sections

Figure 1.4: Homepage Sections

4. Artist Pages

Figure 1.4: Artist Pages

5. Weekly Vibes Recep

1.5: Weekly Vibe Page

6. Messaging Feature

1.6: Messaging Pages

7. Profiles, Settings and Achievements

1.7: Profiles, setting and achievement pages

Prototype Flowchart

1.8: Prototype flowchart on Figma

FINAL SUBMISSION

COMPLETED HIGH-FIDELITY PROTOTYPE ON FIGMA:

DEV LINK:
https://www.figma.com/design/J3BAqzrQkENd6MqfI7Jlbx/Superfan%3A-High-Fidelity?node-id=0-1&m=dev&t=I52wg1tANKACwxVf-1

REFLECTION
Completing the high-fidelity prototype for redesigning Superfan marked a significant milestone in my design journey. This project allowed me to bridge the gap between conceptual ideas and a fully functional interactive design. By refining elements such as color ratios, button interactivity, and layout consistency, I ensured that the final prototype offered a better quality user experience. The feedback from usability testing proved valuable insight, guiding me to make thoughtful adjustments that enhanced functionality and visual appeal. Overall, this task deepened my appreciation for the iterative design process and emphasized the critical role of user feedback in creating meaningful applications.

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