Labels

Application Design - Project3: Lo-Fi App Design

 01.12.2024 - 16.12.2024(week11 - week13)

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

Application Design

Project 3 - Lo-Fi App Design Prototype




LECTURES

-Week 11/ Usability Heuristics, User Interface Visual Elements, Usability Testing & UI Kit

 In this week, we learned about Usability Heuristics, User Interface Visual Elements, and Usability Testing & UI Kit. Also, we told finalize project 2 and start making low-fidelity prototype by using figma.

 Usability heuristics are general principles or guidelines that designers and usability experts follow to evaluate and improve the user-friendliness and overall usability of products, such as websites and applications.

 User Interface Visual Elements were essential components in application design such as line, shape, slider and so on, and Mr. Zeon provided us the references of elements respectively.

 Usability Testing is the opportunity to get evaluation a product or service with respective users, and The primary aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Also, UI Kit is a collection of User Interface elements, and it allows designers to avoid creating every design component. 


INSTRUCTIONS




Project3  -  Lo-Fi App Design Prototype

-Week 11

 Before, starting app design, I sketched app design roughly to make prototype smoother.


 Then I kicked in making Low-fidelity prototype of "Tokyo Disney Resort App", and I making it as referring to previous sketch and the Architecture information map. At the same time, I created UI kit of my app by  gathering color, typography, icons and button elements.


(UI Kit)

 Then, I finally started redesign Tokyo Disney Resort App while referencing original Tokyo Disney App and Universal Studio Japan App.

(References)

(Progress of low- fidelity design: week11)

-Week 12

 First, in the class, I got feedback and Mr. Zeon suggested to introduce Onboarding pages before showing Tokyo Disney Resort logo. So, I created it while referencing California Disneyland App One.

(Reference: California disneyland App)

(Onboarding Pages)

Afterward, I finalized Lo-Fi App design, and here are each phase page.

(Log in / Registration)

(Home / Show tickets)

(Buy park tickets)

(Priority pass)

(Digital Map)

(Entertainment list / detail)

(Restaurant list / detail / menu)

(Goods shop list / detail)

 (User profile and Support)


Usability Testing

Then, I shifted User testing, and I prepared scenarios, flows and some questions respectively. Here are scenarios and flows of the Usability Testing.


<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.


<Flow>

Open Ticket shop screen

  • Tap "Buy tickets" icon and move to ticket shop

Choose ticket’s detail

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

  • Confirm total price and tap “Add to cart”

Cart

  • Confirm the ticket's detail and proceed to Payment

Payment

  • Check  user information. If there is a problem, tap edit and revise information 

  • Select payment method, type information and tap “Confirm Booking/Purchase” after checking price and ticket detail

Purchase Completion

  • Once you tap “Confirm Booking/Purchase”, the transaction will start

  • If successful, an illustration and the word “Transaction Successful” will be displayed

  • Tap “Back to Home” to finish purchasing

Check Ticket’s information and display

  • Go to “Group” in the Home

  • Tap square frame

  • The tickets and members will be displayed




<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. 


<Flow>

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

  • Tap Map icon again from detail page

Switch Tab into Restaurant

  • Tap Attraction Tab

  • Select Restaurant

Search Queen of Heart Banquet Hall

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

  • Tap wait time to check Restaurant detail

  • Tap Map icon again from detail page




<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.


<Flow>

Move to getting priority pass screen

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

Select facility type and tickets which will be used to get passes

  • Select “Attraction” button 

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

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



Here is a document which includes summary and improvement list.

Click here to jump Google Document

Final Outcome


Lo - Fi design file link: https://www.figma.com/design/IxfE5lNtKEYDcwSX73euIM/Application-Design-UI-kit?node-id=4-2&t=xtxNLsYUC0WaBkgW-1

Demonstration



REFLECTIONS

　Through this project, I felt it was very practical, but difficult to make nice app screens. I tried to increase feedback to make it easier to use, and designed the user controls to be easier to understand. For instance, while the original version did not have any feedback like check mark or progress bar at the payment section, I added these elements at payment processing page and payment result pages.

　Also, during the research, users were highly satisfied with Tokyo Disney Resort's simple display design and logo with a strong brand image, so I did not change the simple design much, but mainly changed the function, page structure and layout.

   As far Usability Testing, it was difficult to think of simple situations so that users can understand the situation quickly, and to decide which functions to test. In result, this test allowed to expose potential issues.
Labels:

Comments

Post a Comment

Popular Posts