30.05.2023 - 29.06.2023 / Week 9 - Week 13
Yung Siew Weng / 0339847
Application Design I /
Bachelor of Design (Hons) in Creative Media
Task 3 / Low Fidelity Prototype
TASK 3
MODULE INFORMATION
Application Design I - Task 3 : Low Fidelity Prototype
INSTRUCTION
In this task, we are required to create a low-fidelity prototype for the selected mobile application. This prototype should include wireframes and a visual design concept that aligns with the branding of the application. The purpose of this task is to test and validate the user flow and user experience of the application before moving on to higher-fidelity prototypes. By creating a low-fidelity prototype, we can quickly iterate on our design and make necessary adjustments based on user feedback.
#Requirements for the task :
- Wireframes
- Visual Design Concept
- Usability Testing
- Deliverables
EXPLORATION
After completing the Task 2 : UI/UX document, I continued my development to create a low fidelity prototype for the MBO application. Due to the limitations of the existing templates for movie applications and ticket booking apps, I invested a considerable amount of time brainstorming ideas on how to redesign the application. In fact, I took a step back in my approach by creating outline templates before diving into the wireframe stage. My intention was to preserve some of the features and visual elements of the MBO application while incorporating a modern and minimalist layout design.
Throughout the several weeks, I was in the process of rebuild and refine the layout of the application in Adobe Illustrator, finding the best position and outcome for each page
Fig 1.1 Screenshot, Adobe Illustrator, Ideation Sketch (Week 11/ 13.06.2023)
During the week 11 class session, we had a feedback session to assess our progress on the task at hand. Meanwhile, I felt somewhat discouraged during this session as my progression was minimal. I was still in the ideation phase of the project, and the deadline was fast approaching. It was disheartening to realise that I had made little to no tangible progress at that point compared to my other peers that had in their journey on the prototype in Figma or Adobe XD. But, I still show my progression during the session and received some feedback. And, I had compiled the status of "sketch" under the PDF below.
Fig 1.2 Compilation, Ideation Sketch, Adobe Illustrator (Week 11/ 16.06.2023)
Feedback _ week 11 / 16.06.2023
You can try to do the sketch in Figma, which would be more beneficial for you.
After receiving the feedback and carefully reflecting on my situation of having overwhelming assignments and looming deadlines, I made the decision to pause my progression in Adobe Illustrator. Instead, I shifted my focus to creating an idea wireframe as a preliminary step before transfer to Figma.
Fig 1.3 Wireframe _ Updated Version (Week 11/ 18.06.2023)
Fig 1.4 Wireframe , PDF (Week 11/ 18.06.2023)
_ Updated Version
After having the wireframe done, I started to explore the functions and features in Figma. As a newbie of Figma application, it seemed to be very slow progress as the unfamiliar with the application itself. As I having the intention of first designing the overall layout, text position, colour scheme in order to speed up the visual design concept as well as a preparation for high fidelity prototype, I designed the elements with "colours". I did not screenshot the development of how I redesigned the application but some of the details amendment throughout the development.
At first, although the fact that I had designed a few pages in Adobe Illustrator before, I felt that there is the possibilities to make changes on it. I am thinking of the sequences for the "special event" and the "movie quick-cut".
After some think and thoughts, and I had investigate several cinema applications, I felt that it might be a reason on why the advertisement carousel was always on the top of the page, so I questioned my best friend, ChatGPT to solve my confusion.
Fig 1.5 Screenshot, Questioning (Week 12/ 19.06.2023)
Fig 1.6 Home Page, Development (Week 12/ 19.06.2023)
According to the answer given, it seems that there are some design thinking on the "position" of the advertisement carousel (special event) so I remain the idea of placing the "special event" on the top of the page. And, I believed that if I positioning the special event under the "now showing", it might be ignored by the user on what special event that MBO had, in fact this is kinda of social psychology.
Continue to the development on designing the movie synopsis page, I experimented with different layout designs to find the most suitable one that effectively presented all the main information. After considering various options, I ultimately chose the last version (right).
The reason for selecting this layout was that it provided a clear and guided direction for users to read and understand the movie synopsis. The layout likely had a well-structured organisation of content, having a balance. visual hierarchy that allow users to easily navigate through the information without feeling overwhelmed or confused.
Fig 1.8 Movie Synopsis, Development (Week 12/ 24.06.2023)
As I had indicated the step of "share to social media" in the user flow in the previous Task 2, I had the intention to screenshot the pop-out screen from the current MBO application and replicate a version into it in order to showcase the ideation of "share to social media" [But the screen with lots of icon, I choose to use the original image but covered the privacy details.
//A detail that I had noticed in current MBO application that it originally provided the "share booking" features; but in lots of cinema application such as Dadi Cinemas or TGV do not having this "sharing" features.//
For the movie ticket, instead of using the round border rectangle to indicate the "movie ticket", i felt to create something special. Since I had sketched a rough version in Adobe Illustrator that my intention movie ticket should look like [actually is random creation], i reused the outline and figured that it actually presented a quite well and satisfied outcome.
Fig 1.9 Ticket Outline Design Ideation (Week 12/ 24.06.2023)
//OS: OMG! I can copy and paste the elements from AI to Figma! SO, I did not need to reconstructed the movie ticket again.ðŸ˜//
As I continued to the barcode design thinking, I drew from my previous experiences of visiting cinemas like MBO, TGV, and Dadi Cinemas. One aspect that stood out to me was the use of multiple barcodes or QR codes in a virtual ticket, which could potentially lead to complications. From my past experience at TGV, I noticed that their virtual tickets featured two barcodes on the ticket page. Both barcodes were functional and served different purposes, allowing them to be scanned for both concession items and movie entry. In contrast, during my experience at Dadi Cinemas, I observed that they used separate barcodes for redeeming snacks or accessing the cinema. This meant that each barcode had a specific function and couldn't be used interchangeably. So, I think of if the cinema able to combine both concession and ticket details under one barcode or QR, why don't just create a barcode instead of making user to felt complicated //Actually it's from my self-experience which I felt confused when the TGV staff scan the barcode under movie ticket categories when I redeem my snacks.//
So, in order to decide barcode or QR code should be used in the redesigned version app, I inserted both and compare them.
Fig 1.10 Barcode vs. QR code (Week 12/ 24.06.2023)
At the end, I choose the barcode instead of QR code as the barcode having a more balanced visual hierarchy.
After completing the layout design of the application, I shifted my focus towards considering the interactions that could be implemented. In particular, I recalled Mr. Shamsul's suggestion about creating an interaction to signify when a user has made a payment. This got me thinking about the possibility of incorporating a simple animation to indicate the payment process or its completion.
Fig 1.11 Payment "Animation" (Week 12/ 24.06.2023)
Initially, I wished to create a new mascot for MBO application in order to create the animation. But, I figured that I can reused the "E" in the KECIL icon that having a "character design" of MBO. So, Instead of creating a new mascot, I decided to reuse the existing "E" character from the KECIL icon as it already had a well-designed and recognisable appearance, which would help strengthen the brand identity.
Fig 1.12 Navigation Icon, Visual Reference (Week 12/ 25.06.2023)
I felt that the navigation icon that i plug-in from Figma was not so "MBO". In fact, I had kept the popcorn packaging that I had purchase from the past visit to MBO cinemas which I had figured that there are lots of icons designed on the packaging. So, I used the icons as a reference and create a simple-lined outline and refined them into a better presentation.
Fig 1.13 Navigation Icon, Final Refinement (Week 12/ 25.06.2023)
I had tried out some possible outcome and finally ended up with the version in Fig 1.13. I choose to used the white outline version as I tend to use the "teal" colour that represent MBO application as the background colour of the navigation bar.
Fig 1.14 Icon Development (Week 12/ 25.06.2023)
In order to make the consistency between icons, I also did minor amendments towards the iconography.
Fig 1.15 Interactive Button, Hover Effect (Week 12/ 25.06.2023)
Then, according to the tutorial that given by Mr. Shamsul on "How to create button in Figma", I make the amendment from creating two different layout of button to a hover effect that can easier the overall process as well as lesser the frame that I needed in the application. In fact, I reused this components concept to the "add on / buy" and "favourite" button.
Then, I tend to make interaction on the carousel (special event). I searched from YouTube tutorial and finalised a method to create carousel in Figma.
Fig 1.16 Carousel, Outcome Showcase (Week 12/ 25.06.2023)
#Solution
1. Create a Image
2. Stake in Auto Layout (frame together)
3. Duplicate the frame, & change position
4. Create components & add interaction [On Drag > Smart Animate > Ease Out]
After inserting the interaction and finalised the full set of layout design, I select all [command + A] and change the colours to the B&W schemes in shortcut.
Fig 1.17 Convert to B&W schemes,
Low-Fi Prototype Outcome (Week 12/ 25.06.2023)
#Solution
Selection Colours > Select Selection Colours > Change the colours.
Continued after the converting, I start to create the interaction between the page and below are the user flow interaction lines [looks complex, messy but satisfied] ☺️
Fig 1.18 User Flow Interaction (Week 12/ 25.06.2023)
Fig 1.19 Low Fidelity, Figma (Week 13/ 26.06.2023)
Fig 1.20 Low Fidelity Prototype Figma Preview (Week 13/ 29.06.2023)
Fig 1.21 Low Fidelity Overview (Week 13/ 26.06.2023)
Then, I showed my Low-Fi Prototype outcome to Mr. Shamsul and requested for a feedback regarding on my current progress.
Feedback _ week 13 / 27.06.2023
Overall look of your low-fi is great! You'll do great, can't wait to see the final design.
After receiving the feedback from Mr. Shamsul, I continued my progress on creating 3 scenarios for the user usability testing.
Scenario/Flow 1: Logging into the application
Imagine you want to access the movie application. You open the app and are prompted to enter your login details, such as your username and password. By logging in, you gain full access to the application and can start exploring its features and functionalities.
Imagine you want to access the movie application. You open the app and are prompted to enter your login details, such as your username and password. By logging in, you gain full access to the application and can start exploring its features and functionalities.
Scenario/Flow 2: Booking Movie Tickets for a Family Outing
Now, You're planning a fun movie night for your family. You navigate through the app to find the movie you want to watch and choose a convenient showtime. As a parent, you need to book three tickets: one for yourself, one for your partner, and one for your child. You select specific seats, like D8, D7, and D6, to ensure that you all sit together. At the checkout page, you even have the option to add snacks to your order. At this point, you also make sure to redeem your All-Star rewards to maximise the benefits. Once everything is confirmed, you can easily share the virtual tickets with your partner for a hassle-free experience.
Scenario/Flow 3: Purchasing a Snack Combo and Sharing Details
In this scenario, you crave some delicious snacks from the concession stand. You browse the app's concession section and choose a snack combo that catches your eye. After selecting the desired items, you proceed to the checkout page to complete the purchase. At this point, you also make sure to redeem your All-Star rewards to maximise the benefits. Once the transaction is done, you have the option to share the details of your snack combo with your friend. This way, you can let them know what snacks you'll be enjoying together during the movie.
After having the scenario done, I recruited participants to participate in the user usability test. While the process took a bit time management skill, I planned to create my visual design concept in Figma instead while waiting for the participants //yea, I reversed the flow.//
Fig 1.22 Visual Design Concept, PDF (Week 13/ 28.06.2023)
Meanwhile, I had recruited 5 personas to participate in my usability test and received some feedbacks. Overall, the feedback from the 5 users regarding the low-fidelity prototype was positive. However, there were some specific points highlighted by the users based on their own perspectives.
Fig 1.23 Brief Summary, Usability Test (Week 13/ 29.06.2023)
#Font Size - 3 out of 5 users commented on the small font size used in the prototype. They suggested increasing the font size for better readability and user experience.
#Payment Details - 1 user mentioned the payment details was not effective because she would not specifically click on the "detail" button. She suggested having a more prominent display or a pop-up screen for payment information.
#Seat Selection - 1 user found the seat selection numbering unclear, especially in scenarios where a specific seat needed to be selected. He recommended clearer indicators or labels for seat selection
After receiving these valuable insights provided by the users, I took this into consideration to further refine the design in high fidelity prototype including :
Fig 1.24 What refinement can be done? (Week 13/ 29.06.2023)
- Increase the font size to improve readability, especially for important information and text elements. Ensure that the text is easily legible on different screen sizes and devices.
- Make the payment details more prominent and accessible to users. Consider displaying payment information in a clear and concise manner, either within the main interface or through a dedicated screen or pop-up.
- Address the limitation of the prototype by simulating a specific scenario where only three seats are available for selection.
- Improve the visibility of seat numbers by incorporating a contrast colour indicator.
And, I documented the "deliverables" into a visual presentation slide which including the full compilation of wireframe, visual design concept, low fidelity prototype (overview & walkthrough) as well as user usability testing (video recording, brief summary & refinement) under the visual presentation slide below :
Fig 1.25 Low Fidelity Prototype, Compilation (Week 13/ 29.06.2023)
FEEDBACK
Week 11 / 16.06.2023 @ Progression Check
You can try to do the sketch in Figma, which would be more beneficial for you.
Week 13 / 27.06.2023 @ Low-Fi Prototype
Overall look of your low-fi is great! You'll do great, can't wait to see the final design.
REFLECTION
Throughout the journey of creating the low-fidelity prototype, I faced challenges and felt overwhelmed due to the complexity of the chosen application. Unlike other apps, the movie ticket booking app required more pages and flows for each scenario. Additionally, I faced limitations in finding suitable templates or references that matched my expectations and design ideas. As a result, I had to invest more time and effort, causing stress and delays in the progress. However, amidst the challenges, there was also a sense of joy and satisfaction. I particularly enjoyed working with the interaction flows in Figma and felt a sense of accomplishment when I saw the lines connecting and creating a cohesive user experience. It was a rewarding experience that allowed me to appreciate the process of designing an app.
During the user usability testing, I realized the importance of being well-prepared before conducting the tests. The feedback and perspectives shared by the users provided valuable insights and allowed me to see things from a different point of view. It was a learning experience that reminded me of the saying, "Through others' perspectives, we gain something special and new." One important observation from the usability testing was regarding the font size. While I initially thought it was effective, I learned that due to the limitations of Figma and the difference in screen sizes between desktop and mobile devices, the font size appeared differently to users. This highlighted the importance of considering various viewing platforms and ensuring that elements are well-controlled and accessible. Overall, the user usability testing provided me with new knowledge and insights that will help me be better prepared for the next task: High-fidelity prototype. ✊💫
Comments
Post a Comment