Improving User Experience: Click Retail Online Store UX Design Project

This project delves into the user interaction procedures for Click Retail, an online store offering a wide range of products. The project employs Jesse James Garett's methodology, UX research methods, and qualitative analysis to optimize user experience, navigation, user journeys, SEO functionality, and branch location. It outlines project goals, including optimizing user experience, navigation, and payment procedures. The project explores business and website objectives, user needs through focus groups, mental models, user interviews, personas, and card sorting. The scope plane addresses system design, user-centered design principles, and UI aspects. The structure plane discusses the implementation with front-end, middle, and database layers, including header, navigation, and product presentation. The project aims to enhance the online store's user experience through detailed research and design considerations.

Project Overview:
This project will be looking forward to the user interaction procedure which has to be
maintained in the click retail store which provides wide range of products such as electronics,
toys and clothing (Han, tom Dieck, and Jung 2018). This project will be considering the use of
Jesse James Garett’s methodology along with UX research methods, qualitative metrics and
UCD qualitative analysis. This project will look forward to justify the selected research methods.
The following unit of this project will be highlighting the project goals and objectives.
Project Goals and Objectives:
The prime objective of this projects are listed as followings:
 User experience of the consumers of click retail has to be optimized.
 Navigation facility of the website has to be optimised.
 User journey of the online services has to be optimised.
 SEO functionality of the website has to be addressed.
 Finding the nearest branch has to be a lot simpler.
 Simpler payment procedure will be beneficial for the client of this online retail
store.
 Collaboration of the market place with the online store must be optimized.
Project Introduction:
The main objective of this paper is the critical evaluation of the research methods which
will be selected for the design and enactment of the prototype system for click retails store (Roth
2015). The new prototype will be very much significant for click retail as it will ensure enhanced

user journey for the consumers of this retail store (Hamalainen et al. 2015). Synchronization of
each of the elements of the prototype along with the detailed investigation of the behavior and
perceptions of the options provided by the new prototype will be very much useful to enhance
the user experience of the consumers of click retail (Sandbiller and Myerson 2018). Each of the
planes of the Jesse James Garett can be very much useful to identify any sort of inconsistencies
associated with this project.
Figure 1: Five plane model
(Source: Created by the author)
Part 1: Strategy Plane Research:
The objectives of the strategy plane is to highlight the usability of the prototype and aligning it
with the need and expectation of the click retail business.
Strategy Scope Structure Skeleton Surface

Figure 2: Defining the strategy for the prototype
(Source: Hassan, Regan and Casey 2018,)
User experience of the prototype can be significant enhanced using this Jesse James
Garett methodology (Ho 2017). It can also be said that the entire changes in the visual design can
be very much useful to manage the Information Architecture and functional specifications of the
new prototype. The next of the paper shall be identifying the website objectives of the new
prototype of Click Retail.

1.1 Business and website objectives
The business goals of the new prototype are listed as followings:
 Optimise the user experience of the customers of click retails.
 Optimise the user journey using login.
 Optimisation of the searching options in the prototype.
 Deployment of the payment gateway.
 Identification of the buying history for the consumers.
 Optimisation of the admin panel regarding the searching options.
 Identification of the nearest branch finders and enhanced collaboration of the online store
with the market place.
Brand identity of this project are listed as follows:
 Enhancement of the user journey.
 Building relationship with the market places.
 Enhancement of the customer service.
Success indicators of this project are listed as follows:
 Improvement of the user visitor.
 Access to the updated payment gateways.
 Improved sales and pre booking facilities
1.2 User needs via research
It can be said that detailed analysis of the demographic elements of the consumers of the
retail industry like age, income and marital status can be very much useful considering the
development of a new prototype for click retail (Linder and Arvola 2017). The diverse categories

of user research which will be considered in this paper are discussed in the following unit of this
paper.
1.2.1 Focus groups discussion
The past experience of the consumers of the retail store can be understood from the
discussion of the focus groups. The confusion of the consumers in terms of making the payments
or searching options can be purposefully resolved using the discussion of the focus groups
(Gruber et al. 2015). The data collection procedure in the focus groups must be done in an
ethical manner so that the reliability of the data can be considered during the implementation of
the prototype.
1.2.2 Mental model
The complexity of the navigation of the prototype can be addressed using the mental
model. At the same time contact details of the market partners can be easily accessed with the
admins of the website using this model (Garcia 2018). The entire device set up considering the
stakeholders of this business can be addressed using this model.

Figure 3: User mental model
(Source: Dorrington et al. 2016)
1.2.3 User interview questionnaire
The objectives of this report can be linked with the hypothesis of the website using
questionnaire. The entire roadmap of the project can also be tracked using the outcome of the
questionnaire (Bernhaupt 2015). The difficulties faced by the consumers of this organization can
also be solved using the questionnaires. The detailed feedback of the questionnaire can be very
much useful to identify the trending business expectation of the consumers of the retail industry.
1.2.4 User persona
The entire interaction of the prototype can be sorted using the user persona, at the same
time it can also be said that user persona can also be very much useful to value the business

objectives of click retails. The target users and the expectation of the users of the retail industry
can be represented using user persona.
Figure 1: User Persona One
(Source: Created by Author)
1.2.5 Card sorting
The three categories of sorting which can be deployed for click retail are listed as
follows:
Open card sorting: New concepts can be incorporated in the navigation of this prototype.
Closed card sorting: The probable participants of this business can be attracted using this
sorting technique.

Open card sorting: It is a collection of both the above two sorting procedures.
Part 2: Scope Plane Outline and Research:
The system is designed in such a way that it can easily meet the business goals by the
help of fancy features and technologies capabilities for software and hardware tool. The system
design approaches to the end-user which is an important section of whole method. User-centred
design is a well-known method of developing a tool for instance. User-interface of this
application is the overall perspective of user about how it will be understood and completely
used by human user. UCD can be employed to system design of a product which delivers more
effective and user-friendly user experience. This ultimately increases overall sales and customer
loyalty. There are ten design principles for a user-centered design like
Designing User and their tasks: Isolation is not suitable for some interactive system as
providing support who are using it for performing it. Centered support user is known to be key
making for user-centered and task orientation. At the development phase, it is vital for vital for a
developer to take into account the number of users.
Maintaining Consistency: User need to have a system which is very much suitable for
learning with minimum and understandable need. Behavior of interface element needs to be
consistent in nature. The consistency will start in the design phase for integrating with the current
component.
Using simple dialogue: The main application of this system requires to incorporate in the
proper interaction for providing a dialogue with user. User will need to have the required
information which is important for completing a task. Each of the added information that is
added results in complicated scenario.

Reducing the mental effort by user: User will mainly focus on task in hand and reducing
the use of tool and its interaction for designed application. It merely focusses on complicated
interaction with system and any complicated application.
Giving proper feedback: User need to have proper action which is executed in a
successful way. It is completely evident by overall changes in appearance for achieving the thing
in successful way. If it takes much longer time, an indicator which is needed for highlighting the
processing which is in still in progress.
Providing proper navigation mechanism: User should be given the freedom of
navigating easily with vital principles so that they will have an idea with respect to position. It is
completely possible by using an effective and consistent mechanism which assign attributes.
User-taking in charge: User need to have an idea what she needs to have for developing
the system which provides adequate information. The user needs to have the ability which is
needed for providing the support to individual request. Constraints are mainly evoked by system
which is possible for developers for providing an easy way for achieving on frequent basis.
Providing information in clear way: There is need of arrangement of providing
information which is important for user on-screen platform. It will provide user with list of
elements and data groups. It is completely achieved by making use of visual code.
Providing assistance: User need to have all the required help which is required by system
along with minimum usage. It needs to be self-explanatory where information needs to be in-line
with different user task.
Click-retail needs to be free from error: Errors need to minimize by directing different
user in right way so that they can achieve goal. Feedback from user needs to be constrained so

that they can prevent any kind of error. There is a need for ensuring the system validates for data
entry which is possible at the input point.
Part 3: Structure Plane Implementation and Information Architecture
The application will merely consist of three types of layers that are front-end, middle and
database. The front part will be clearly visible to a different user. While the middle layer
comprises of scripting where the process for different user will communicate in between the two
that is front end and database. This particular database will be taken into account for both storage
and retrieval of data. Both control and modules will be completely installed in middle portion.
The modules will be completely interacting with the database of the system. This particular
application will be implemented depending on principle of model view approach.
This particular application comes with a header which will have vital information.
Header is made available in some pages that is main and product page. Navigation panel will be
completely fixed in the whole page where it will be outside the header. In case of the mobile
interface, hamburger menu option will be used. User just needs to click on hamburger icon and
all the required menu items will appear. The displayed menu will cover the information about
mobile device screen. By using a search bar in the navigation panel, user can easily search for
required product without going to another page.
Header is known to be as one vital aspect of any application. Header will have certain
number of information that is amount the website. Header will have some sliding content so that
a particular space can be used for showcasing different information. Click retail can provide an
option where in one slide it can provide details of specific product and other sides for reselling
different products.

Click-retail will provide all the required information about the organization in the about
us page. This particular page will provide information with respect to data or product depending
on user-experience. For providing information user need to customize the presentation of product
by making use of filters. Each of the pages of this application will have a cart icon which will
provide details about the number of products in the cart. User can directly go into the cart page
by clicking on icon where each product will be added to the cart and customer will have buy now
option. Customer can visit a dedicated page for a particular product where he or she will have all
the required details. Click-retail also provides the option of reviewing products of another
customer who have carried purchase previously. In addition, they can provide rating to products
according to their personal experience with the product.

Part 4: Skeleton Plane Wireframe Implementation
4.1 New Website Wireframes