Application Design 1 - Final Project / High-Fi App Design Prototype

Posted by

26/9/2024 - 5/12/2024 (Week 13 - Week 16)
Shawn Wong Kai Hen / 0375372
Application Design 1 / Bachelor of Design (Hons) in Creative Media
Final Project:  High-Fi Prototype


 OVERALL WORKS 



  INSTRUCTIONS  

 REQUIREMENTS 

1. Visual Design Concept
Create a cohesive visual design strategy that reflects your application's branding. This strategy should define the color palette, typography, and imagery to establish the application's aesthetic. Ensure these elements work together to communicate the intended tone and enhance the user experience.

2. Wireframes
Design wireframes for the mobile application screens using Figma. These wireframes should clearly outline the layout, content structure, navigation flow, and interactive components, providing a detailed blueprint for the app's user interface.

3. Usability Testing
Perform usability testing on your low-fidelity prototype to evaluate the user flow and overall experience. Recruit individuals such as friends, family members, or classmates to interact with your prototype and share their feedback. Be sure to document their insights and suggestions, and use this information to refine and improve your design.

4. Deliverables
Prepare a digital submission featuring your low-fidelity prototype, wireframes, and visual design concept. Include a concise overview of the usability testing outcomes, highlighting key feedback and the changes implemented to enhance your design. Ensure this document is well-organized and uploaded to your e-portfolio as part of your project showcase.


Week 15 / UI Kit

1. UI Kits
Here is the UI kit for the application. You can interact with the elements here, or click the provided link to access it on Figma for a more detailed and immersive view.

Fig. 1.1 UI Kit, Week 15 (23/12/24)


2. Design Progress
Before proceeding with the final high-fidelity design, I first decided to study the Dadi Cinema logo and its color choices. I aimed to understand the reasoning behind their logo design and how the colors align with the brand’s identity. I then compiled a list of all the colors used in the logo to ensure consistency in the design and to create a cohesive visual experience.

Fig. 1.1 Logo Study, Week 15 (2/1/25)

Next, I began conducting reference research, similar to the process used during the low-fidelity design phase. Gathering inspiration from platforms like Pinterest, Behance, and Mobbin, as suggested by Mr. Zeon, helped me brainstorm ideas and identify design trends. This research was crucial in shaping the visual direction for the high-fidelity design and ensuring that the app aligns with user expectations and industry standards.

Fig. 1.2 Research Reference, Week 15 (2/1/25)

After completing the research and studying the references, I began testing various color schemes for the app to determine which would be most suitable. The original app used white as the primary color, but I decided to explore different options to enhance the overall design. My goal was to create a more visually appealing experience that would capture the user's attention while maintaining a cohesive and user-friendly aesthetic.

Fig. 1.3 Color Testing, Week 15 (3/1/25)

Here is my progress with adding color to the design. Initially, I intended to avoid using black for the icons, but I struggled to find a suitable color that complemented the background. Due to time constraints, I opted to keep the icons black, as it wasn't detrimental to the design. However, I acknowledge that it doesn't fully meet my initial vision and requirements for the aesthetic.

Fig. 1.4 Welcome, Week 15 (3/1/25)

Here we are at the final step. I have begun adding images and making necessary adjustments after applying the color scheme across all pages. This phase involves refining the visual elements to ensure the design is cohesive and engaging, ensuring a polished and user-friendly interface.

Fig. 1.4 Adding Image, Week 16 (4/1/25)

Here is the overall design with the applied color scheme and images. For a more detailed and enhanced view, please visit my Figma file.

Fig. 1.5 Overall View, Week 16 (4/1/25)


Week 16 / Interview

3. Usability Testing
Moving to the next phase, which is usability testing, similar to the previous task, I have already created three scenarios/tasks with detailed descriptions that require users to perform specific actions within the application.

View My High-Fi Interview Here - Recording Documents

Usability Testing Feedback

Fig. 2.1 User Feedback - PDF
Improvement After Interview
After receiving feedback and comments from the user testing, I focused on improving the final design based on the insights provided. Several areas were identified for enhancement, and I addressed each one accordingly.

Fig. 2.2 Improvement after feedback

For the left side, I added a background behind the timer to ensure it doesn't overlap with other elements, improving visibility. On the right, I changed the "love" icon to a red color to make it more prominent and immediately draw the user's attention to its function. For the notification, instead of changing the icon's color, I added a red dot to indicate the presence of new notifications, providing a clear visual cue for the user.
5. Final Outcomes

Demonstrating Video / High-FI 



Explanations Presentation Video / High-FI 




Figma View - Work File



Figma View - Prototype



 REFLECTION 

Experience
For Project 3, I centered my efforts on developing a low-fidelity prototype while conducting an extensive research study to validate and refine my design concepts. By creating a basic, interactive prototype, I was able to rapidly test my ideas with actual users, gathering valuable feedback on how they engaged with the interface. Through a combination of user testing, observation, and follow-up interviews, I was able to evaluate the intuitiveness of my design and uncover any usability challenges. This iterative process empowered me to improve the app’s features based on real user insights, rather than relying on assumptions or theoretical scenarios.

Developing the low-fidelity prototype allowed me to prioritize the core functionality and user flow without getting bogged down by intricate design elements. This stripped-back version of the app served as a useful tool for testing key interactions and tasks, allowing me to assess the effectiveness of my design choices. By working closely with users, I was able to identify specific areas where the design could be improved or adjusted, ultimately creating a more seamless and intuitive user experience.

Findings
This project emphasized the vital role of iteration and real-world testing in the design process. Utilizing a low-fidelity prototype enabled me to rapidly test different versions and confirm my assumptions regarding the app’s usability. The research study underscored how essential user feedback is in uncovering pain points and refining the design. Even in the initial prototyping stages, making minor changes—such as reorganizing buttons or simplifying navigation—had a significant impact on enhancing the overall user experience. These small refinements proved that thoughtful adjustments, based on user insights, can drive meaningful improvements in design.

Observations
Through the research study and prototype testing, several key themes emerged. First, users prioritized simplicity and clarity, expressing frustration when navigation was ambiguous or complicated. Common pain points included unnecessary steps for completing basic tasks and a lack of feedback after actions were taken. Conversely, users appreciated features that were easy to access and delivered immediate value, such as quick access to essential tools and well-defined call-to-action buttons.

The user testing highlighted areas where the app’s elements could be refined to reduce cognitive load. For instance, many users struggled with navigating between screens, pointing to a need for smoother transitions and clearer signposting. Additionally, feedback revealed that some interactions felt rigid, suggesting that the design should be more adaptable and flexible to suit users’ needs better.


Comments

Post a Comment