Labels

Application Design - Final Project: High - Fi App Design

 16.12.2024 - 06.01.2025(week13 - week16)

 Name: Itani Karen / Student ID: 0377243 / Course: Bachelor of Design in Creative Media

Application Design

Final Project - High Fidelity App Design Prototype



INSTRUCTIONS



Final Project  -  High Fidelity App Design Prototype

-Week 13

 After doing three low fidelity app's usability testings, I started to make High fidelity version. First, I changed all page's color and inserted all images. As far icons and buttons, I created these components and added into UI kit page.  
(color, typography, icons and components)

(facility icons)

Afterwards, amended design and animation based on user's opinion.

Here are improvement list and screenshots of figma

Ticket Purchasing

  • Delete  “Contact Person Information” part in the payment page


(Before)

(After)

  • Introduce accordion menu into ticket detail explanation


(Before)

(After)

Checking wait time

  • Make facility name bigger


(Before)

(After)

  • Adjust all animation and make it move correctly

(Demonstration pull-down component)

  • Add all categories into category switch tab



(pull-down component)

  • Introduce attraction summary into the facility detail pop-up

(Before)

(After)


Priority pass

  • Separate selecting facility type feature and scanning park ticket feature

(Before)

(After)

  • Adjust selecting facility type animation


(amended radio button animation)

  • Adding a text “Return time” to each component of choosing facility page

(before)

(After)

  • Arrange the way to show a list, and separate facilities whether the pass is available or not

(Before)

(After)

(Overall App Design)

-Week 14

Usability Testing


 In week14, I recruited 3 participants and conducted High Fidelity Usability Testing again. I didn't change scenario from Low Fidelity Usability Testing, but amended each flow with the change of design and prototype. 

Here are 3 scenarios and questions

<Scenario 1: Purchase Park ticket>

 Imagine you are planning to visit the Tokyo Disney Resort with your family. Please purchase park tickets with this app.


<Process>

・Open Ticket shop screen

  　tap "Buy tickets" icon and move to ticket shop

・Choose ticket's detail

  1. Select number of persons, park, date and ticket type in order

  2. confirm total price and tap "Add to cart"

・Cart

  1. confirm ticket's detail and tap check box, and it will turn green

  2. Tap proceed to Payment

・Payment

  1. check user information. If there is a problem, tap edit and revise information.

  2. Then, select payment method, and type information

  3. Read agreement and tap check box

  4. Tap "Confirm Booking/ Purchase" after checking price and ticket's detail

・Purchase Completion

  1. Once you tap "Confirm Booking/ Purchase", the transaction will start. If successful, an illustration and the word "Transaction Successful" will be displayed.

  2. Tap "Back to Home" to finish purchasing

・Check Ticket's information and display

  1. Go to "Group" in the Home

  2. Tap square frame

  3. The tickets and members will be displayed


Question1

How easy is the flow of purchasing tickets with this App?  How did you feel about choosing the ticket detail page which combined the select number of persons page and the select ticket type page?


-In this time, the color and all images were added, so she said it became easier to understand the important points. Also, she likes short loading time, therefore she said it was good that they combined some information pages.


Question2

How do you feel about checking the ticket detail process?  How comfortable is the color scheme and accordion component?


-She preferred accordion type to the general one, because she opens the tab consciously and pays attention to the detailed information naturally. 


Question3

Please rate overall experience and describe the reason.

-9.5

She suggested removing the number user information section, and make it just show a check mark after each section is filled.



<Scenario2: Checking wait time>

Imagine you’re thinking that you want to enjoy attractions and restaurants efficiently in the park, and want to check wait time quickly with this App. Please Search Haunted Mansion and Queen of Heart Banquet Hall. 


<Process>

Open Disneyland Map

  • Tap Map icon at the bottom of the Home, and open Map

  • Select Tokyo Disneyland

Search Haunted Mansion

  • Search the facility using texts above the wait time as a clue

  • Tap wait time to check attraction detail　easily, and a pop-up will be shown

  • Jump to more detail page by tapping the pop-up

  • Tap Map icon to see detail location

  • Tap unequal mark to return the digital map

Switch Tab into Restaurant

  • Tap Attraction Tab

  • Select Restaurant

  • Tap the tab again to minimize

Search Queen of Heart Banquet Hall

  • Search the facility using texts above the wait time as a clue

  • Tap wait time to check attraction detail　easily, and a pop-up will be shown

  • Jump to more detail page by tapping the pop-up

  • Tap Map icon to see detail location

  • Tap unequal mark to return the digital map


Question1

How easy is it to find the waiting time for a selected attraction? How did you feel about the flow of checking details of the facility and location

-She said it was good, because it can be used quickly and can search the attraction's atmosphere. She also mentioned she will use a detailed location feature, because it is useful to know the appearance of the building.


Question2

How did you feel about the size of the facility name, is it comfortable to read


-She felt comfortable when using the new version and she said the text is more readable than the previous version.


Question3

Please rate overall experience and describe the reason

-10




<Scenario3: Getting priority passes>

Imagine you are planning to experience “Splash Mountain” which is a popular attraction in Tokyo Disneyland. Please get Disney premier access to shrink normal wait time with Tokyo Disney Resort App.


<Process>

Move to getting priority pass screen

  • Tap Disney premier access which is below “My plan” or from entertainment list


Select facility type 

  • Select “Attraction” button 

  • Tap next


and tickets which will be used to get passes

  • Confirm all tickets that you will use are selected(If it is needed, you can scan additional tickets)

  • Tap next


Select facility and confirm return time

  • Check attraction name and return time 

  • Tap a tab that you want to get priority pass


Issue priority passes

  • Confirm attraction name and park tickets information again

  • Select payment method and type payment information

  • Tap “Ok”

  • Check total price and tap “Confirm Purchase”


Check obtained passes

  • After transaction, tap “Back to Home”

  • Scroll home page and find the plan at below of the icons





Question1

 How easy is the flow of purchasing priority passes?  How did you feel about choosing the attraction for the Disney Premier Pass?

- She didn’t get lost in the flow. However, she suggested showing explanations of each type of priority pass, because this feature is too unique for beginners who use this app or go to the Tokyo Disney Resort.


Question2

How comfortable is the separated choosing facility type page and scanning ticket page?


-She said this time is easier than previous, because she can select choices one by one , following the flow, and she wasn't confused.


Question3

 Were you able to clearly understand the time slot and conditions for the pass? How did you feel the changed time and list display?


-She was satisfied with the new attraction list, because understand the situations whether can issue priority pass or not at a glance, and it became easy to understand what the time is. 


Question4

Please rate overall experience and describe the reason

9.0


Here is a document which includes summary and improvement list.

-Week 15

  In the consultation class, Mr.Zeon suggested to expand pop-up's blank space, because the text is difficult to read, and he told to narrow features at the home bar. So, I changed the background size again first.

(Before)

(After)
  Then, I edited home bar features, removed Entertainment, Restaurant and Goods shop icon, and added information icon instead of these list.

(Before)

(After)

  In the information section, added category switching Tab like Map page. 


 Afterwards, I kicked in modifying based on improvements raised by respondents during usability testing.

Improvement List

  • Removing the number of the user information section 




  • Add pop-ups that explain each priority passes in the home

　Changed to display text about each priority path when tapping DPI or standby pass. If you want to move priority pass purchase section, tap inequality sign.

REFLECTIONS

   For the final project, I truly enjoyed adding colors and images to complete the design. One challenging aspect was creating list icons, as there were so many to make. I had to design versions for both Tokyo Disneyland and Tokyo DisneySea, which required a lot of effort. However, once I integrated them into the prototype, the design instantly became more vibrant, and I felt a strong sense of accomplishment.

　Furthermore, in the second usability testing, when we had use the prototype that had improved the points pointed out last time, I was happy to receive good feedback saying that the improvement areas had improved. At the same time, I was able to learn about new potential problems by having them pointed by respondents.
Labels:

Comments

Post a Comment

Popular Posts