User Interface Design and Usability Evaluation Report - iPhone X

This report delves into the user interface (UI) design and usability evaluation of a mobile application, specifically focusing on an e-commerce platform for purchasing bikes on an iPhone X. The report begins with an introduction, followed by a critical exploration of UI design principles and their impact on user experience. A comprehensive user needs analysis is conducted, including the creation of a detailed persona representing a target user, Christian Spooner, and a scenario outlining his interaction with the application. Furthermore, it incorporates hierarchical task analysis and environmental analysis to understand the user's goals and the context of use. The report proceeds with preliminary and detailed design phases, encompassing storyboards and design decisions related to user needs, usability, and cognitive issues. The implementation section showcases the UI design through screenshots of the product page, cart page, delivery details, and payment pages. Finally, the report concludes with an evaluation of the UI using a cognitive walkthrough, assessing the system's usability and effectiveness in achieving the user's goals.

Running head: USER INTERFACE DESIGN
User Interface Design and Usability Evaluation
Name of the Student
Name of the University
Author’s note:

1USER INTERFACE DESIGN
sTable of Contents
1. Introduction:................................................................................................................................2
2. Critical Exploration:....................................................................................................................2
3. User Need Analysis:....................................................................................................................2
3.1 Persona:..................................................................................................................................3
3.2 Scenario:................................................................................................................................5
3.3 Hierarchical Task Analysis:...................................................................................................5
3.4 Environmental Analysis:.......................................................................................................6
4. Preliminary Design:.....................................................................................................................7
4.1 Story Board:.........................................................................................................................11
5. Detailed Design:........................................................................................................................12
5.1 Decision related to User Need Analysis..............................................................................12
4.2 Decision Related to Usability..............................................................................................13
4.3 Decision related to cognitive issues.....................................................................................13
6. Implementation:.........................................................................................................................14
7. Evaluation:.................................................................................................................................18
7.1 Cognitive Walkthrough:......................................................................................................18
8. Conclusion:................................................................................................................................21
Bibliography:.................................................................................................................................23

2USER INTERFACE DESIGN
1. Introduction:
The study is done based on the preliminary ideas based on which the first designs will be
created. Moreover, the study mainly concentrates on the detailed diagram design and usability
evaluation of the prototypes. The developed mobile interface shows the task of purchase a bike
from an iOS based application. The device selected for the UI design is iPhone X.
2. Critical Exploration:
The efficiency can be considered as the usability requirement that ensures smooth
interaction between user and system. The efficient interfaces ate designed such a way that
minimal workload will be upon users and all the complex functions will be processing at the
background. The efficient designs try to hide most of the functions from the student. If needed,
the efficient interface designs can be minimalistic. It follows few user interface design principles
which can make the mobile app easy to use for the user.
In order to make the design of the application more efficient, the designers try to follow
the conventional representation of elements and texts. The pattern of tasks are also similar to
majority of the applications. This makes sure that user do not have to adapt to new process while
using this application, the application is already adjusted to match with user knowledge.
The efficiency of user experience is seen as the ability of the user to perform an activity
accurately and how quickly the user can complete objectives. A efficient user interface always
promotes faster goal achieving.
3. User Need Analysis:
The user requirements are the most important part of any e-commerce system design
process. The proposed system will be used by the customers most of the time. That is why the

3USER INTERFACE DESIGN
customers are the most important users among all. The user requirements will collected through
various methods lie interview, questionnaire, prototyping or more. The user persona provides
details of the user who is being considered as a participant of the requirement gathering
technique.
3.1 Persona:
Name Christian Spooner
Occupation Polisher
Demographics 29 Years Old
Male
Lives in 66, George Street, MORVEN, Queensland, 4468
Facts Trusts in products than the manufacturers
Salary: $14,000
Loves to travel
Travels a lot to mountains
Loves biking in mountains
Has a range of mountain bikes
Trusts in the manufacturers like Author, Avanti, Haro Bikes and more
Has good knowledge of mountains in all over Australia
Communication Phone: [phone]
Mail: [e-mail]
Behaviors Relies on the reviews of the experts before purchasing a bike
Does not like when a website or application does not provide different

4USER INTERFACE DESIGN
angles of the product
Switches to other manufacturers when one or two products are of poor
quality
Not being able to try a bike from new manufacturer before buying
Poor customer after sake service and not able to get proper reply from
customer support center make him extremely angry
Goes to new mountains every year to try his bikes
Loves to promote mountain biking
Suggesting trustworthy manufacturers to new mountain bikers
Managing between family and hobby perfectly is a true good behavioral
side
Needs and Goals Need bikes that can be trusted in new mountains
Reliable after sale service from the seller
Various discount offers and promotion cards as he is a well-known
mountain biker
Pre-booking of bicycles from reputed manufacturers
Easy to pay techniques such as digital wallet
To select the bikes in the wish list
Receive notifications in mail and phone when a selected bike is available
again
An account which can be used to track each activity

5USER INTERFACE DESIGN
3.2 Scenario:
Christian Spooner buys at least one bike in a year. He is also associated with few blogs
on Mountain Biking. The blog owners gets suggestion from him to suggest mountain bikes. In
every weekend, Christian Spooner goes to one nearby mountain or hill with friends to practice.
He also tries bikes of friends and other known people. He is worried about the fact that most of
the reputed manufacturers are preferring online stores rather than physical stores. That is why he
cannot check the bikes physically before buying. Many of the promotional blogs and videos are
paid so accurate idea of the new bikes cannot be gained before checking them physically.
Though he is a well-known person, he has faced issues with buying new launched bikes as the
online retailers sell limited bikes to increase demand.
3.3 Hierarchical Task Analysis:
Figure 1: Hierarchical Task Diagram of Online Book Shop

6USER INTERFACE DESIGN
(Source: Created by Author)
3.4 Environmental Analysis:
The design of the proposed application is done for the mobile platform. The design
resembles the mobile application genre rather than responsive website for mobile devices. The
design which has been proposed in the report is done for specifically iPhone X. This device is the
latest launch from the global technology device manufacturer Apple. The texts are in wither
white or black color. The button color are contrasting and rich so that user can easily locate
those. The application will have login and registration option. Various users can login to
application one at a time to check their account. The application saves all the data against the
user who has been logged in.

7USER INTERFACE DESIGN
4. Preliminary Design:
Figure 2: Product Page
(Source: Created by Author)

8USER INTERFACE DESIGN
Figure 3: Cart Page
(Source: Created by Author)

9USER INTERFACE DESIGN
Figure 4: Delivery Details Gathering Page
(Source: Created by Author)

10USER INTERFACE DESIGN
Figure 5: Payment Gathering Page

11USER INTERFACE DESIGN
(Source: Created by Author)
4.1 Story Board:
Majority of the pages in the application will have back buttons. However, the two of the
pages in the selected task of purchasing a bike will have back buttons. The back buttons are not
represented as the conventional back arrows, it has been proposed as a rectangular shape with
rounded edges. This allows the user to go back to previous page at any time. However, going
back does not mean that actions taken will be rolled back.
The interface will include error prevention messages. The messages will be present in the
interface in the same way and look so that user can understand that something wring has
happened. The system will have some external operations like sending notifications to email,
collecting payment from third party payment gateway and more.
i. The initial page is the product page. This page is used for showcasing the details
of a particular product. The contents and media of this page will be different but
the design of this page will be same for each product. The product page has a ‘add
to cart’ button and one button for buy option. The buy option allows the user to
purchase the product directly even another products are added to the cart. The
‘add to cart’ adds product to the cart and updates the cart. This page shows an
image of the bike just under the header. The name and price of the product is also
present in the page.
ii. After the user clicks on the ‘add to cart’ button or buy button, the system redirect
the user to cart page. In contrast to what has been said in the last section, the
system redirect the user to the cart page after clicking on buy button. This is
because, the cart page has to be accessed for buying a product. In case, the