29.08.2023 - 03.10.2023 / Week 1 - Week 6Yung Siew Weng / 0339847
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1 / Self Evaluation & Reflection
Application Design II - Task 1 : App Design I Self Evaluation & Reflection
INSTRUCTION
We, as the students, are required to perform a self-evaluation and reflection based on their mobile application design 1 final project. This project is aimed to document the issues, problems, difficulties and propose solutions to improve the mobile app design. Mobile App design is an iterative process and this task will expose to students the constant improvements one can make to their app. Students are required to submit the documentation in Google Doc for ease of commenting and feedback by the module coordinator.
EXPLORATION
#App Design I's Final Outcome
During the last semester in April 2023, I undertook a project to propose and redesign a mobile app for MBO Cinemas. This project involved the complete process, from initial proposal to creating a high-fidelity prototype using Figma. The primary goal of this project was to enhance the app's interface, making it more consistent and adopting a modern minimalist design approach. Additionally, I focused on detailing the user journey flow to ensure a seamless and enjoyable user experience.
One notable improvement except from the design approach was the inclusion of features related to "concessions" in the redesigned app. In the current version of the MBO Cinemas application, there were no features or options for ordering concessions online. This meant that users had to physically go to the cinema and wait in line to purchase concessions at the venue. By introducing online concession purchasing, the redesigned app aimed to enhance convenience and streamline the overall moviegoing experience for users. The full development of the high fidelity prototype for the redesigned version was documented under Application Design I / Final Task : High- Fidelity Prototype.
Fig 1.1 MBO Cinemas Redesign Version Walkthrough, App Design I
Fig 1.2 MBO Cinemas Redesign Version, Figma Preview, App Design I
During Week 1, Mr. Razif had reviewed all our App Design I's outcome and given some feedbacks instead.
#Feedback @ Week 1 / 29.08.2023
1. It was suggested that including pictures of the theatres to give users a visual idea of what the theatres looks like.
2. Increase the font size for certain elements to achieve a better balance and clarity in the design.
#Self Evaluation & Reflection
1. Log In Page
Fig 1.3 Log In page #Improvements
#Font Style & Border
The main issue I identified on the login page was the lack of clarity regarding the "top side" border. Although I had initially designed drop shadows for these elements, they appeared somewhat difficult to discern, and the contrast was lacking when reviewing the page. In response, I made several adjustments, including modifying the drop shadow and changing the color of the indicator when clicking the form box. These alterations have resulted in improved contrast and clarity, making it easier for users to distinguish between clicked and unchecked elements.
#Clarification and Indicator
Another issue I encountered and subsequently reevaluated was the use of a "verification tick" in the password form box. I found this to be potentially confusing and thought it might raise cybersecurity concerns. As a result, I decided to discard the idea of the verification tick and retained the eye icon in the password form box instead.
Fig 1.4 Log In page #Improvements
#Lengthy Text and Small Icon
Continuing from there, I opted to enlarge the icon and select a more distinct font colour. Additionally, I observed that the text in the previous design felt somewhat excessive and overwhelming. As a solution, I decided to shorten some of the text elements:
- "Sign up here" became "Sign Up."
- "Other sign-in options" was simplified to "or."
- "18 years of age or older" was condensed to "18+."
2. Home Page
Fig 1.5 Home Page #Improvements
Fig 1.5 are the overall presentation of "now showing" and "coming soon" page. The detailed improvements were documented below [Fig 1.6] :
Fig 1.6 Home Page #Improvements
#Search Bar
Upon revisiting my home page design, I noticed that the search bar didn't convey a clear visual cue that it was, indeed, a search bar. To address this, I made several improvements. I adjusted the stroke line and modified the font style. Additionally, I added depth to the drop shadow to avoid the issue of a "top view mismatched drop shadow" to provide a more visually distinct and enhanced search bar that is immediately recognisable to users.
#Genre Filter Scroll Bar
It can be seen that the previous font size used of the genre filter was somewhat small. In fact, during user usability testing of the high-fidelity prototype, I received feedback highlighting this issue, with users expressing difficulty in reading that specific part. To address this concern, I decide to increase the font size, adjust the font style and add depth to the drop shadow to improve the legibility and overall user experience when user "interact" with the scroll bar.
#Alignment of Text & Button
I observed that the button appeared somewhat detached from the text, giving it an unnecessary and "extra" feel. To avoid this "extra", I opted to align them in the same line.
Fig 1.7 Home Page #Improvements
#User Flow
I realised that the button on the home page should serve as a quick action. To achieve this, I modified the flow so that when users press the "plus button," it now directs them to the #showtime page. However, if users still choose to press the album, it will lead them to the #movie info page to offer a more intuitive interaction.
3. Movie Page
Fig 1.8 Movie page #Improvements
#Font Size
For the movie page, minimal changes were made, but primarily involving adjustments to the font sizes.
4. Movie Details Page
Fig 1.9 Movie Detail page #Improvements
#Font Size, Spacing, Drop Shadow
Based on the figure above, when reviewing the previous design, several issues were identified. These included small text size, tight spacing for the names of the cast and crew, a dull colour scheme for certain text elements, and an unusual drop shadow for the genre filter. The new design incorporates larger text, adjusted drop shadow effects, and updated font styles.
#Improper position of Film Classification Icon
It's worth noting that during the evaluation of the design, I felt that the film classification icon was seems to be as an basic icon like the "time icon" in my overall application, but in fact, in a movie industry, film classification was much important in the movie's market in Malaysia. So, I made changes to reposition the film classification icon, placing it alongside the movie title to ensure greater visibility and clarity.
#Name of Cast and Crew
Additionally, it came to my attention that there was an inconsistency in the design, particularly regards to the names of crew and cast members. Some had single lines, while others had 2. To address this and ensure a consistent and user-friendly layout design, I decided to use two lines for all crew and cast names. This change aims to prevent spacing issues, especially when dealing with lengthy names, which could lead to user frustration towards the spacing.
5. Showtime Page
Fig 1.10 Showtime page Before Vs. After
#Adjustment of the "location button"
To be honest, when I was designing this page during the previous semester, I dedicated a considerable amount of time to fine-tune the "location button." Regardless of my efforts, the previous design always seemed a bit perplexing. In fact, when I evaluate again about the old design, it failed to convey a clear understanding of what it represented. It was evident that users unfamiliar with "Atria Shopping Gallery" might be curious about the functionality. However, the newly amended version has brought significant clarity to this element. It now explicitly communicates the message that "your current cinema branch is Atria Shopping Gallery."
#Image Reference on Special Theatre
In response to the feedback from Week 1 regarding image references, I have made additional adjustments to the "showtime page." Now, when a user clicks on the "KECIL" icon, it will lead them to a pop-up screen with a darker backdrop to create a stronger contrast with the content. This enhancement aims to improve the user experience and provide a more visually distinct presentation of the content.
6. Movie Ticket Type
Fig 1.12 Movie Ticket Type page #Improvements
#Visual Cue
When critically evaluating my own work, I noticed that the initial visual cues were too light and small, potentially making it challenging for users to notice them. Additionally, the teal green border box appeared too dark within the overall page, which could hinder readability. To address these issues, I made the decision to reverse the colors of the visual cues and text. This change is intended to create a more visually appealing and user-friendly design, making it easier for users to read and engage with the content.
6. Check Out Page
Fig 1.13 Check Out page #Improvements
#Loyalty Program Visual Cue
Upon reviewing the dropdown icon and the visual cue "1", I found that they were visually distracting. To address this, I dedicated time to redesign them for a more refined and appropriate appearance. After experimenting with various visual concepts, I ultimately settled on the idea of using a #form box associated with voucher redemption to provide a more cohesive and visually pleasing user experience.
Fig 1.14 Check Out page #Improvements
#Voucher Coupon Border
Upon reflection, I realised that when the "All Star Rewards" section appeared, it was somewhat challenging to determine which elements constituted the foreground and background. To mitigate any potential confusion, I incorporated a darker backdrop for the page that serves as a "pop-out screen." Additionally, in pursuit of improved usability for the application, I applied the drop shadow effect for the voucher coupons and increased the size of the "close button".
#Final Outcome
Fig 1.15 Figma Board Site, Figma
Fig 1.16 Figma Journey Site, Figma
Figma Link : Self Evaluation & Reflection Final Outcome - Figma
FEEDBACK
Week 1 / 29.08.2023 @ App Design I Outcome's Review
It was suggested that including pictures of the theatres to give users a visual idea of what the theatres looks like as well as increase the font size for certain elements to achieve a better balance and clarity in the design.
REFLECTION
Reflecting on the overall outcome of this project, it's clear that the journey was a challenges. Initially, I found it difficult to identify areas that needed improvement or revision, as I was somewhat content with the initial design or maybe there was a temptation to procrastinate, with the thought of redoing a substantial amount of work appearing daunting. However, I soon realised the importance of being critical about my own work. Taking on different perspectives and viewing the project through a more differ lens revealed numerous areas that could be enhanced to create a more user-friendly design. This shift in mindset was essential in elevating the quality of the project.
Reflecting on the overall outcome, the design process has been an iterative journey of continuous improvement and refinement. Several key insights and changes have emerged during the course of development, leading to a more user-centric and visually appealing interface. One notable aspect of the design evolution has been a focus on enhancing visual cues and user guidance. Feedback from usability testing and self-evaluation revealed areas where the user experience could be refined. For instance, text size adjustments, improved color contrast, and the strategic use of drop shadows have been instrumental in making the interface more intuitive and visually engaging.
Overall, despite these challenges, the process of revising and refining the project ultimately led to a more polished and user-centric outcome as "there are no perfect in the world of design". Constant improvement and a commitment to delivering the best possible user experience are paramount! :D
Comments
Post a Comment