29.06.2023 - 26.07.2023 / Week 13 - Week 17Yung Siew Weng / 0339847
Application Design I /
Bachelor of Design (Hons) in Creative Media
Final Task / High Fidelity Prototype
FINAL TASK
MODULE INFORMATION
Application Design I - Final Task : High Fidelity Prototype
INSTRUCTION
In this task, we are required to create a high-fidelity prototype for our mobile application. This prototype should showcase the final visual design, interactions, and functionality of the proposed application. The high-fidelity prototype will serve as a realistic representation of the proposed application, allowing users to experience and provide feedback on the final design. It should demonstrate a polished and refined user interface that aligns with the branding and usability principles established throughout the design process.
#Requirements for the task:
- Visual Design
- Interactions and Transitions
- Functionality and Navigation
- Content Integration
- Usability Testing
EXPLORATION
After the low fidelity prototype that explored in Task 3 : Low Fidelity Prototype, I proceed with the feedbacks that given from the user usability test participants.
The main issue that suggested to amend :
➜ Font Size
➜ Payment "detail" popped up
➜ Visibility of available seat
As my low-fidelity development was doing in a "reverse" style so for the visual design and colour schemes including the icons I had ensured a sense of consistency of icons in between. However, the fact of the small font size, I had also figured that I am not having consistent in my font size. So, with this opportunity, I was able to amend it.
Then, I went back to the current application to check the latest information for the content integration. And, OMG! MBO had changed their preloading page and the page was same as mine (black first then transition to teal green) OPPS, is this something "consistent" HAHA, I had predicted their thought ?xD
Fig 1.1 Previous Vs. Current Onboading
Onboarding towards Sign in Page :
When I further explored my low-fi, I figured that the facts of it was "bumping", I reframe the alignment of each frame and the comparison of low-fi and high fidelity outcome are shown below. And, after some exploration, I felt that the password security that designed in low-fi "******" is not so clearly indicated as well as not centre aligned; so I proceed with ······ (round dot) to ensure the overall consistency within "round border".
Fig 1.2 Low-fi Vs. High Fidelity, Sign in Page
Continued then, I proceed my journey to the movie page, as having the ideation to enlarge all the font size, I did some exploration from the movie page first instead :
At first, I was quite curious about the "film clarification" that used in the cinema; some is round and some is hexagon. I asked my best friend, ChatGPT again. And, get the answer of Round icon is refer to the traditional film in rectangular screen; but, for Hexagon, is used to describe a unique screen format used by certain premium cinemas. //Luckily I got check with this, it might affect the realistic of the overall contents.//
Fig 1.3 Answer of Round & Hexagon Icon, ChatGPT
Then, I proceed with the design stuff :
#Issue : After enlarge the font and the elements, the alignment issue occurred. Thinking aligned middle or bottom would be a better engagement.
Fig 1.4 Exploration on alignment, movie page
After some further exploration and thought, I think that if the movie title got 2 lines, it would be a big issue for the both middle and bottom alignment that I had planned to. So, I decided to proceed with the #3 option : Movie Title at top while the movie duration, genre and description at the bottom.
Continued then, as from my low-fi, I had designed a "buy" button for each movie to navigate to the movie description page, but after some thinking and feeling the overall details and descriptions had make the page become like a rubbish bin, occupied and overwhelming.
Fig 1.5 No button Vs. With Button
And, I did some research again, mostly excluded from Dadi Cinemas, the overall cinemas application design was not using the "buy" button as their call to action included MBO itself. And, I recalled back the user usability test, the button really very limited the user to control in single hand [a bit difficult compared to full button]. So, I proceed the idea with making the full text including the movie cover as a "button" so that the user are freely to access the movie description in a single touch.
As I having the intention to add on the "movie rating" on the movie page, I added the movie rating based on IMDb (Internet Movie Database). To make the layout to be more interesting and intractable, as Mr. Shamsul had mentioned about I need to prepared at least 3 movie for user to choose on, I feeling if 3, the user would not able to experience the scroll bar; so I proceed with both 4 movie for both "Now Showing" and "Coming Soon". //The movie are now in theatres, and coming soon at 28/7, based on MBO Cinemas current application.// Also, in order to create varieties, I selected the movie with different genre and film classification to showcase that there are lots of "movie class" in my app design.
The Movie that chosen was :
#Now Showing // Movie title + Film classification type//
➜ Barbie, 13
➜ Oppenheimer, 16
➜ The White storm 3 : Heaven or Hell, 16 (To showcase two lines title design ]
➜ Elemental, P12
#Coming Soon
➜ Hati Suhita, 13
➜ Haunted Mansion, P12
➜ Lost In The Stars, 16
➜ Talk To Me, 18
Fig 1.6 Final Movie Page, Now Showing and Coming Soon
Also, to be mentioned, as my low-fi having the "favourite" saved button on the right of the movie title but after inserting the real title and considered about the different length size of the movie title which would make the overall application to be very distracted and not organised. I changed the icon position to the "right" to the "movie cover".
Fig 1.7 The "favourite" icon
Continued then, after having the base idea of how "big" the font should look like to enhance the "clear" of the overall application, I proceed to the main page [home]. Initially, in my low-fidelity having the carousel components, so I search high and low for some HIGH RESOLUTION images from MBO cinemas Facebook and website. //OMG.. MBO images online was very limited and low resolution, which I never expected on this before. 😅//.
Fig 1.8 Carousel Component build up
Also, as I having the feel of the search filter [genre] was very boring and not interesting and attractive at all. I tend to add some "emoji" behind the text to make the overall feeling to be "active" instead of static. I also experimented some font size within to create the best outcome of the visual design look.
Fig 1.9 Filter Genre w/ emoji
As I figured that the navigation bar would be some sort of not "aligned" within a same size, I reconstructed the navigation bar and as well as enlarge the font from 9 px to 10 px to enhance the overall "visual".
Fig 1.10 Navigation Bar Exploration
As the home page was the page that need user to glance through in a very "speedy" way, so the cover of the movie should be slightly bigger than in the movie page itself. As movie page is a page to navigate the user to a more "detailed" movie description page and so on, but for the home page, it seemed to have only the tile, rating and icon, so the movie cover shall slightly bigger, from my design direction concept.
Fig 1.11 Final Home Page Vs. Movie Page "Cover" Size
Fig 1.12 Final Home Page, Now Showing and Coming Soon
Then, continued to the next movie section, "Movie description". As I having 8 movie option, I did some research, from IMDb and MBO cinemas current application, to get the information of the cast and crew as well as the featured reviews of the movie itself.
Fig 1.13 Saved Album [Images]
And, when I inserted the elements and images into the prototype, it seems that the white round border was very distracted the images itself, and did not present the idea of "minimalist" but a bit "extra", so I proceed with the decision to take it off.
Fig 1.14 Button, Border Vs. No Border
In order to create the sense of user really can watch the trailer through the prototype, I research some online source on how to embed the YouTube video into Figma; at last, I found one but it does not having the ability to rotate the video, so I used the most "basic" way to make the idea to came true.
Fig 1.15 Link To YouTube Video [Trailer]
#Solution:
Place the text [URL Link] in Figma & press the "link" icon;
In order to make a transparency type, adjust the opacity to Zero.
Then, I continued my progress to insert all the details for the other 7 chosen movie.
Fig 1.16 Final Movie Description, 8 movie type
To be mentioned, as "coming soon" movie is not available for booking, so I changed the button from "showtimes" to "showtimes not available" and a slightly light colour.
Fig 1.17 Coming Soon and Now Showing button
Continued to the movie showtime, previously in low-fi, my ideation is to create the slider for user to choose in different cinema branches. But, after some exploration, I figured that there are lesser MBO Cinemas now in the market; so I thought having a navigation bar on the top for user to change different cinema locations will be more approachable.
Fig 1.18 Low-Fi Vs. Current, Movie Showtimes
Next, it's the seat selection whereas from the Low-Fi usability test, there are user mentioned that the visibility of the seat selection need to be ensured and to focused on. So, excluded from I enlarged the overall text and graphics, I used light grey and black to differentiate the "available" and "unavailable". So, from my concept was when the first glance was only the black background will be more visible, in fact, that should be the one that available for booking.
Fig 1.19 Low-Fi vs. Hi-Fi Version [Seat Selection]
Since Mr. Shamsul had mentioned lots of when we conducted a user usability test, we shall not "help" the user on how they shall selected the options. And, which I experienced in low-fi, the option of D6, D7, D8 seat, all of the 5 users mostly having a different first selection of the seats. So, to make the user usability experience to be more smooth and not "directed", I created 6 probabilities that the user may choose from. //As having this intention, so I just proceed with a scenario that the user had a "instructed" movie to navigate with, which is the Elemental. The reason of choosing Elemental instead from the other movie was, due to the fact Elemental is P12 (movie that suitable for 12 years old below), and I had the flow on giving the "children discount" in fact, and when the user goes through Scenario 1, they should be able to recognise the layout of movie such as Barbie and Oppenheimer as it was arranged in front.
Fig 1.20 6 Probabilities flow
#Probability 1 : D8, D7, D6
#Probability 2 : D7, D6, D8
#Probability 3 : D6, D7, D8
#Probability 4 : D8, D6, D7
#Probability 5 : D7, D8, D6
#Probability 6 : D6, D8, D7
Continued, it's the F&B and the Add On flow of the movie selection, for this particular session, I did not made a big changes within, but just enlarge the overall font size as well as organise the "payment detail". Based on the user feedback from the Low-Fi, it was difficult for user to view the payment detail as I designed in a bit "unclear" position, and they had given a suggestion on "consider displaying payment information in a clear and concise manner, either within the main interface or through a dedicated screen or pop-up". So, I decided to amend some of the flow, separate the order summary with the add on page :
Fig 1.21 Low-Fi Vs. High-Fi [Payment Detail]
And after some minor adjustment and enlarge the overall font size, I had done my High-Fidelity Prototype! OH YEAH! HIGH-FIVE 🖐️
Fig 1.22 Final Outcome, High-Fidelity Prototype
And it's the part that I probably like the most! "Lining and Connecting". This process was satisfied and healing as this is the time I could really saw my outcome came into reality. In fact, every line means to a "hope", a "hope" to the final! 🥴✌🏻
Fig 1.22 High-Fidelity with User Flow Interaction
//"Can You See Rainbow there?"//
Fig 1.23 High Fidelity, Figma
Fig 1.24 Final High Fidelity Prototype, Figma Preview
Fig 1.25 Final High Fidelity Prototype Walkthrough
Then, I continued with the journey to design the Scenario. For this moment, as I figured that when I doing Low-Fi I did not prepare well on the questions which I tend to ask about the user, maybe not so well-prepared. So, this time, after having the experience, I designed 3 scenario. And, add on some "integration" and more "clear information" into it. I compiled the both Designed Scenario & Questions of the Usability Test under the PDF below for a better glance :
Fig 1.26 Designed Scenario & Questions PDF [Usability Test]
Before I recruited participants to test my application, as previous experience in Low-Fi was when I explained the Scenario, the screen will be automatically move [as my first page is "after delay effect", so I created three frame, one for each frame as a "brief" button before the user start the Scenario and it was better to catch user intention [maybe?]. Also, to make the idea that the users are really open the application, I took a screenshot from my device and place it as an image, then interact it as a button.
Fig 1.27 Navigate Screen
Fig 1.28 Usability Test Result Compilation
And, I documented the "deliverables" into a visual presentation slide which including the full compilation of High fidelity prototype (overview & walkthrough) as well as user usability testing (video recording & brief summary) under the visual presentation slide below :
Fig 1.29 Presentation Slide Compilation
REFLECTION
Throughout the experience of creating a high-fidelity prototype, it seemed to be very rushed due to some other assignments delayed progress. And yet, it made me just start my high on the second last day. OK. It's very terrifying. YEAP. For this particular task, I had no sleep for two days, but chill, I am still under pressure as I knew that I should proceed and do so. The main extension given by Mr. Shamsul is the availability to make the details be details (although I am still late). But, I wished to produce quality work without just having the intention to submit an assignment.
Prior to developing into high-fidelity, I felt that I had done things the reverse way in Low-fidelity, which should make my overall progress faster, but when I really jumped into the sea of high-fidelity, I figured that it was not just adding images and text. While changing the dummy text to the real text as well as the overall colour schemes, I felt a sense of accomplishment and satisfaction although I took me lots of time to settle them down. In my situation, I think that the most challenging part was to do 5 user usability test within a night. I am incredibly grateful to all my dear friends for their quick support and willingness to meet up at 10:30 PM to participate as users for my high-fidelity prototype and I am like the optician, asking "is this clear? is that clear?" Nevertheless, their valuable input really played a significant role in the success of the usability testing, and their willingness to be there for me during late hours meant a lot. I truly appreciate their support and contribution to the project. And, finally it's a wrap for this semester! High-FIVE! 🖐️
Comments
Post a Comment