University UX Design Project: Click Retail Web Application Design

This project focuses on the user experience (UX) design for the Click Retail web application. It begins with an introduction to UX and its importance, followed by an overview of the strategy plane, including UX qualitative interviews and user research methodologies. The assignment emphasizes the ethical considerations in interviewing techniques and develops two user personas based on gathered data. The project then outlines UX principles and data to scope the plane, including user stories. It further details the application structure, information architecture, and the implementation and design of wireframes. The assignment concludes with wireframe testing, a style tile, and recommendations for improving the user experience of the Click Retail web application, providing a comprehensive approach to UX design principles.

Running head: USER EXPERIENCE DESIGN
User Experience Design
Name of the Student
Name of the University
Author’s note:

1USER EXPERIENCE DESIGN
Table of Contents
Introduction:....................................................................................................................................2
Strategy Plane Research:.................................................................................................................2
UX qualitative interview:............................................................................................................2
User research:..............................................................................................................................4
Ethical understanding of interviewing techniques:......................................................................5
User Persona:...............................................................................................................................6
UX Principals and Data to Scope Plane Outline:............................................................................8
Application Structure and Information Architecture:....................................................................10
Wireframe Implementation:...........................................................................................................13
Wireframe Design:.....................................................................................................................13
Wireframe Test:.........................................................................................................................17
Style Tile:.......................................................................................................................................19
Conclusion:....................................................................................................................................19
Recommendation:..........................................................................................................................20
Bibliography:.................................................................................................................................21

2USER EXPERIENCE DESIGN
Introduction:
UX or user interaction reflects the real interactions, which user experience with the
prototype of proposed application or the actual application through the user interface. The
initiation of the interaction happen when the user access the application through a simulated
virtual environment or browser. These interactions generally consist of clicking of mouse,
entering data into forms, reading data on the application interface and many more. The user
interaction is the first step toward evaluating the application usability. Improvement of user
interaction go through various evaluation like interview, usability assessment and many more.
The report contains the information of development and evaluation of user interaction of
Click Retail. The organization wants its web application to have better usability. A large of
amount products of electronics, toys and clothing categories are available at the store. The report
mostly concentrates on the basic customer and admin functionalities.
Strategy Plane Research:
UX qualitative interview:
UX qualitative interview can be very much useful in this project to understand different
aspects of design and implementation skills which are required to develop the prototype of an
advanced system which is about to be introduced in the online store. The design and
implementation of the new systems can be verified at the end of the UX analysis and design.
Qualitative interview can be very much useful to understand the perception and
receptiveness of the users. All the assumptions which has to be made by the designers and the
developers can be understood in the first place using the qualitative interview which has to be

3USER EXPERIENCE DESIGN
collected from the probable users of this new and advanced system which will be introduced in
the online store. The target audience can be selected in the first place using the EX qualitative
interview.
The list of activities which has to be conducted in due course of the assignment can be
understood by each of the stakeholders who will be involved in this project can be understood
and managed using the UX qualitative interview. Perceptions of the users in terms of the
designing can also be understood in the first place using the UX interview. Qualitative
information about the different categories of information which are associated with the probable
users of this online store can also be understood using this UX qualitative interview. The
previous experience of the users can have a significant impact on the project as the terms and
conditions of the project can be very much visible and transparency.
The effectiveness and the usability of the online store can be obtained in the first place
using the effectiveness of the prototype system.
The discussion guide of the EX interview can also be very much useful to understand the
specifications of the new systems as the needs and requirements of the new system keeps on
changing every moment. The point of view of the participants can be very much useful in both
the designing and the development phase of the new system. There are diverse categories of
platforms which can be deployed in this software development project which are very much
useful to improve the quality of service offered by the new system. There are diverse categories
of recording method which can be very much useful to understand the specification of the new
system from diverse perspectives. Detailed information can be obtained in the first place using
the EX qualitative interview. Feeling of the probable users of the online system can be
understood in the first place using the qualitative interview. Detailed questions to each of the

4USER EXPERIENCE DESIGN
users can be useful to understand their expectation from the new system. Diverse perceptions
about the needs and requirement of the users can be also be available to each of the stakeholders
associated with this project can be obtained using the qualitative interview. Opinion coming from
the qualitative interview will be one of the key reasons behind the success of this project.
User research:
There are diverse categories of benefits associated with the user research which can have
a direct impact on the growth and productivity of this project. Decreasing the cost of each part
project is possible due to the detailed examination of the each phase of the project. Each phase of
project like the design phase and the development phase has diverse categories of cost involved
which has to be managed in the first place using the user research. The satisfaction of the users
or the clients of this project can be understood in the first place using the user research.
The needs and expectation of the online store is very much subjected to changes and the
practice of user research can be very much useful to make all the changes required in this project.
The interactive experience coming from the users can be understood in the first place using the
research. The qualitative feedback can be very much useful to understand the effectiveness of the
new system. Users interactive experience can also be very much useful to enhance the efficiency
of the new system which to incorporate the changes required. The conversion rate of the
designers and developers can also be identified in the first place using the user research.
Difference between the users groups can be also be very much useful in this project. All the
assumptions can be revisited using the user research. All the assumptions which will be made by
the designers and the developers using the user research. The insights of the project can be
reviewed using this subscription based feedback. The use of the mental models can be
understood in the first place using the user research. New designs are cropping up each day and

5USER EXPERIENCE DESIGN
each of the designs has to be considered in the archaeological phase of the project. Prioritization
of each of the task can also be managed in the first place using this user research.
Ethical understanding of interviewing techniques:
There are diverse categories of ethical consideration associated with the UX qualitative
interview such as maintaining the integrity and reliability of the data which will be collected
from the interview. Maintaining the reliability of the data will be very much useful in this project
from the perspective of the junior developer of Ex Soft Ltd who was given the opportunity to
work in the design part of this project. The other ethical considerations regarding the UX data
collection procedure is that none of the users must be forced to take part in the discussion.
Responses of each of the users must be respected at any cost. The informed consents is a must in
this data gathering procedure. The data collected from the users must not any negative impact on
the approach which are generally considered by the designers of Ex Soft Ltd. Anonymous data
must be collected during the UX qualitative interview, at the same time it can be said that
maintaining the confidentiality of the data is the other ethical consideration associated with this
UX qualitative interview. Respecting both the privacy of the data collected from the users and
the privacy of the participants is the most significant ethical consideration associated with this
UX qualitative interview.

6USER EXPERIENCE DESIGN
User Persona:
Figure 1: First User Persona
(Source: Created by Author)
The first persona is developed based on the information gathered through interviewing
Brandy Tyler. She has a profile type of home lover. She loves to decorate her home and wants
the best home appliances within her price range. Brandy is a 36 years old receptionist who earns
38,000 pounds a year. She says "It's so difficult to buy home appliances that meet my demand."
Her motivation is that she gets very selective while purchasing home appliances. Because she
rarely can find a product that can match with her requirements and price. Recently show has
turned toward online shopping so that she can read other buyer reviews before purchase. The
goals are as following.
i. Needs product that come with extended warranty

7USER EXPERIENCE DESIGN
ii. Often purchase products that comes with combo offers
iii. Looks for offers on premium brand's products
Her frustration are as following.
i. Not being able to know about the quality of the product before purchase
ii. Getting a medium quality product from a reputed brand
Figure 2: Second User Persona
(Source: Created by Author)
The second person is Kyle Fisher. His profile is marked as style enthusiast. Kyle Fisher is
a 42 years old local restaurant owner. According to Kyle Fisher "I want high quality products of
premium brands". The goals of Kyle Fisher are need cloths of current fashion
and casual and Business clothes that adds value to his personality. Motivation is Kyle is very
conscious about what he wears. He tries to wear clothes that suits the event. He tries to be the

8USER EXPERIENCE DESIGN
best suited man in the meetings. He gets frustrated when cloths with issues like color mismatch
and size chart not provided adequately on the website.
UX Principals and Data to Scope Plane Outline:
The gathered data from the UX qualitative interview can be very much useful to maintain
the effectiveness of the of the prototype system which is about to be built for the online store.
The range of prices of the retail products can be adjusted by the admins of the system using the
gathered data. It can be said that the data collected from the UX interview can be very much
beneficial for the business as it can help the journey of the users, right from the registration page
to the final page of the website. Each characteristic feature of this system like the payment
gateway, managing the admin panel and the user panel, identification of the market place and
identification of the branch finder can be reviewed using the data gathered from the UX
qualitative interview. It can be said that the buying and the selling capacity of the new system
can be enhanced using the data gathered from the UX qualitative interview. Thus, it can be said
that the data collection procedure of the UX interview can be very much useful to enhance the
user experience of the new system of Click Retail.

9USER EXPERIENCE DESIGN
Figure 3: User Stories
(Source: Created by Author)
The user stories can be considered as one of the main artifact of system development. The
story provides high level description of system requirements. The proposed user story describes
how the user utilize the system to complete a purchase and review the purchase details. As per
the user story, the user will open the application and either login to the system or create an
account first. The registration is essential to login. It is because the user name and password
provided during registration will be used for logging into the system. After the login is
successful, the user will be redirected to the home page. This page consist of various products
and offers. The user can use the search bar to search for the products they want to buy. Taken as
an example, the user searches for the Asus laptops. The system will then show the available Asus
laptops in the search result. The user can see any of the products available in the search result. If

10USER EXPERIENCE DESIGN
no products are available for the searched term then a message will be shown on the screen. The
user can select the products to make a purchase. The purchase require making the payment. After
payment is successful, the user order will be confirmed. The use can now navigate to orders
sections and see the ordered product and order details.
This type of navigation allows the user to quickly navigate through the website. It is
because this navigation structure is the most common e-commerce website navigation structure.
The user can go to the desired section using not more than three clicks.
Application Structure and Information Architecture:
Figure 4: Application Structure of Click Retail Application
(Source: Created by Author)

11USER EXPERIENCE DESIGN
Figure 5: Information Architecture of Click Retail Application
(Source: Created by Author)
The information architecture shows that all the information will be under subsections of
the website. The first thing that user will open is the home page. A menu will be implemented in
the website to allow the user navigate through the application. In the home page, the user will see
the most popular and new products. In case the user is not logged in then the user can login to the
application through navigating to the login page. In this page, the user can chose to create an
account if user is not registered yet. Automatic redirection of pages happens for both the login
and registration functions. The user can see the product pages, only when clicked on the

12USER EXPERIENCE DESIGN
products. The search option is available for the users on every page. Once a product is added to
cart, link to cart will appear on the header. The user can go to cart page and request for order
placement. Once the order request is submitted, the application will redirect to the order delivery
address section where the user can either choose stored address or enter new address. Once, all
the order related data is collected from the user, the system will initiate payment process. The
user will first chose one of the various options in the payment methods section and make
payment as per the chosen method. Once the order is complete the user will be redirected to the
home page. There will be a link called orders in the website which will show all the products that
user have purchased along with the status of the order.

13USER EXPERIENCE DESIGN
Wireframe Implementation:
Wireframe Design:
Figure 5: Search Result Page
(Source: Created by Author)

14USER EXPERIENCE DESIGN
Figure 6: Customer Login
(Source: Created by Author)

15USER EXPERIENCE DESIGN
Figure 7: Customer Payment
(Source: Created by Author)

16USER EXPERIENCE DESIGN
Figure 8: Customer Order History
(Source: Created by Author)

17USER EXPERIENCE DESIGN
Figure 9: Admin Login
(Source: Created by Author)
The basic pattern of the application design is having a header and main section. The
header includes the logo, hamburger menu, signing and logout link and cart icon. The change in
the element of header and even in the positioning of elements can be seen in few pages. This is
for reducing the display of unnecessary information. Modern day login and registration process
has been used in the system so that better security can be provided to the customers. The colour
combination is same for each page so that application simplicity can be maintained.
Wireframe Test:
The task scenarios for wireframe test are as following.

18USER EXPERIENCE DESIGN
i. Registration: The user will register into the website by filling and submitting the
form. During the registration the users will be asked to enter the details as
mentioned in the labels or input fields.
ii. Login: The users will use the email/username and the password they used to login
to the system.
iii. Select a product: The user will select a product from the list in the home page or
category page.
iv. Make Payment: The user will try to choose the options for payment and make a
complete payment process.
v. Check Order History: Once the payment is complete, the user will see the
previously made purchases in the order history page.
User Test: The participant selected for the test are Brandy and Kyle. Both of them were
given the above mentioned tasks to complete. They were also free to explore the other
functionalities of the system. During the test designers and analyst were observing their activities
and recording their feedbacks. Kyle was very fast to understand the navigation of the system as
he has good knowledge of e-commerce websites. The login and registration process were
confusing to Kyle at the first moment as only one input field was available at the beginning.
However, both of them understood the order completion process. Kyle was impressed with the
navigation structure and information presentation. Kyle liked various ways of payments.
According to both of them the application has very good interaction features and navigation is
very efficient.

19USER EXPERIENCE DESIGN
Style Tile:
Figure 12: Style Tile Example of Click Retail
(Source: Created by Author)
Conclusion:
From the above study it can be concluded that mobile application has its own criteria to
be fulfilled. The website is designed properly and contains all the required information all the
pages. Only issue with the design is that, report visualized only few pages of the application. The
use of colour combination has been a great choice. The contrasting colour added more depth to
the information shown in the screen. The user persona allowed to understand what type of
features to include in the system and how to make them easily visible. The navigation structure
of the system is designed based on the generic navigation system of e-commerce websites. It is
essential to show the progress of user request so that user can have idea about their request has
been accepted. As the prototype is run in the local machine, there is no delay in the user process.
If the same function is run in the server then it would take time based on the user data amount

20USER EXPERIENCE DESIGN
user requested. For this reason, an alert or change of state is very important to show that server is
processing user request.
Recommendation:
Look of the Website: The look of the website is very essential for mobile platforms. The
mobile users see a fraction of what is website actually looks in website. Because of this diversity,
the mobile applications should be designed as per the mobile screens.
Usability: The usability of the system must be of good quality. The users must use the
same pattern through most of the pages to navigate. All the user input forms must follow same
pattern.

21USER EXPERIENCE DESIGN
Bibliography:
Ardito, C., Buono, P., Caivano, D., Costabile, M.F. and Lanzilotti, R., 2014. Investigating and
promoting UX practice in industry: An experimental study. International Journal of Human-
Computer Studies, 72(6), pp.542-551.
Dhir, A. and Al-kahtani, M., 2013. A Case Study on User Experience (UX) Evaluation of Mobile
Augmented Reality Prototypes. J. UCS, 19(8), pp.1175-1196.
Fontana, A. and Prokos, A.H., 2016. The interview: From formal to postmodern. Routledge.
Gray, C.M., 2016, May. It's more of a mindset than a method: UX practitioners' conception of
design methods. In Proceedings of the 2016 CHI Conference on Human Factors in Computing
Systems (pp. 4044-4055). ACM.
Mara, A. and Mara, M., 2015, July. Capturing social value in UX projects. In Proceedings of the
33rd Annual International Conference on the Design of Communication (p. 23). ACM.
Nybergh, L., Enander, V. and Krantz, G., 2016. Theoretical considerations on men’s experiences
of intimate partner violence: An interview-based study. Journal of family violence, 31(2),
pp.191-202.
Rhie, Y.L., Lim, J.H. and Yun, M.H., 2017. Evaluating representativeness of qualitative text data
in identifying UX issues. International Journal of Human–Computer Interaction, 33(11), pp.868-
881.
Stull, E., 2018. Qualitative Research. In UX Fundamentals for Non-UX Professionals (pp. 247-
258). Apress, Berkeley, CA.

22USER EXPERIENCE DESIGN
Voltelen, B., Konradsen, H. and Østergaard, B., 2018. Ethical considerations when conducting
joint interviews with close relatives or family: an integrative review. Scandinavian journal of
caring sciences, 32(2), pp.515-526.
Wilson, C., 2013. Interview techniques for UX practitioners: A user-centered design method.
Newnes.