User Experience Design

This assignment focuses on the user-centered design process for Click Retail, an online retail store. It covers the UX qualitative interview, user research, ethical understanding of interviewing techniques, user persona, UX principles, and data to scope plane outline. The application structure and information architecture are also discussed, along with wireframe implementation and design. The assignment is based on Jesse James Garrett's methodology and the principles of user-centered design.

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:.....................................................................................................3
UX qualitative interview:................................................................................................3
User research:..................................................................................................................6
Ethical understanding of interviewing techniques:..........................................................7
User Persona:...................................................................................................................7
UX Principals and Data to Scope Plane Outline:................................................................8
Application Structure and Information Architecture:........................................................10
Wireframe Implementation:...............................................................................................13
Wireframe Design:.........................................................................................................13
Wireframe Test:.............................................................................................................20
Style Tile:...........................................................................................................................21
Conclusion:........................................................................................................................22
Recommendation:..............................................................................................................22
Bibliography:.....................................................................................................................24

2USER EXPERIENCE DESIGN
Introduction:
The user satisfaction is one of the major factors in today’s application design. The
applications that are designed for providing best experiences to the user are online retail
applications and many more. Better user experience is achieved through enhancing the
accessibility, usability and desirability of the application. The user interaction is improved by
understanding the end users of the system. In order to get information on what the user wants and
how they might use application, many methods are applied. One of the popular methods are
creating the user persona. The other method is developing user stories. The high fidelity
prototypes are the way of representation of the final product in its closest resemblance.
The assignment is written based on the use case of Click Retail. The organization offers
various retails products such as clothing, toys and electronics. The organization currently need an
online web application that can be accessed using mobile devices also. The user personas will
reveal the behaviors and buying patterns of the users. The high fidelity prototypes will be
developed based on the information gathered through user persona, interview and UX research.
The UCD principles will guide the entire UX development process.
Jesse James Garrett Methodology: According to Jesse James Garret, the UX elements in
the UI design is a process of ensuring every actions of the user to happen as planned. Jesse James
Garret had proposed five planes to achieve the UX goal. The planes are sensory design,
information design, interaction and information architecture, scope plane and product objectives.
In the following analysis, the strategy plane or product objective will be described first. In this
part, the qualitative interview will be described in detail along with the process of conducting
interview. The gathered information will be evaluated and displayed using information

3USER EXPERIENCE DESIGN
architecture, user person and few more elements. The actual wireframe and prototype of the
application has been developed to achieve the surface plane objectives.
Strategy Plane Research:
UX qualitative interview:
User Interview can be considered to be as the best method for extracting information
from different users for having an understanding about user experience. It mere focus on
usability understanding and ideation. UX qualitative interview can be easily conducted that can
be conducted by any person who can ask a question and record answer. User Interview is
platform where researcher asks a list of question and lookup for record response from user. It is

4USER EXPERIENCE DESIGN
mainly used for examining the overall experience of user and product usability. Ideal interview
generally takes place in between two UX researcher and one user. The first UX researcher
emphasizes on having question followed by guiding interview by the help of interviewer.
Simultaneously the second person will be writing down what the participant answers. If anyhow,
the second researcher is not there, then recording of video and audio for interview can be done
for this interview. This is mainly done for recording all the required information. If the
researcher makes question on the given notes, then there is option of interview which can be
derailed and tough to manage. The qualitative interview has been conducted for UX design of
click retail. The store is mere inclusive of retail products like electronics, toys and clothing that is
needed by millions of customers.
Most of the work is based on user-centered design (UCD) practices that require some of
kind of interview. Interview mainly comes into picture for performing a list of task like
 Selection of required participants for research.
 Moderating the overall usability studies.
 Briefing and debriefing at the time of usability evaluation.
 Conducting and focusing on groups.
 Going for phone interview option when individual cannot afford to travel to a particular
site.
 Collecting all the required information about task and workflow which is available in the
field.
 Promising the visit of sites.

5USER EXPERIENCE DESIGN
Knowledgeable: Interviewer is very much familiar with the research questions and so the
whole focus is on interview. There is a need for some of background research in this particular
domain and context of the interview (Hermann, Pentek and Otto 2016). Interviewer needs to be
familiar with some of the basic terminology that is available in this domain.
Clear: Interviewer should make use of language which is suitable for participant. In
addition, he or she needs to avoid any kind of acronyms and jargons.
Structuring: It is the duty the interviewer to explain the goal of the interview clearly. The
participants are asked about various question with respect to topic and procedure.
Steps of Conduct User Interview
Interview conduction is considered to be a summation of simple question which is needed
for running script. There is list of steps which should be taken for making the process a bit more
useful (Jenny et al. 2018). Kyle Yates, who is 30 years old is a well-known resident of Bristol.
He has a busy professional life and tries to put balance as much possible. This particular person
enjoys travelling a lot. Kyle is not attracted to idea of purchasing product through online
platform but he needs to check the product availability on offline platform. Irrespective of
necessity of a product for purchase, the point that should be taken into account is the level of
satisfaction. The person who is interview is Racheal. Home life of Rachel is found to be hectic,
where she has all the responsibilities of children and home. They have a nice home, but it would
be great if they can afford a holiday. Husband David comes up with high paying jobs in Finance.
Making the interview comfortable: Interviewer needs to dress in similar manner to them,
which will help them in testing a particular product or idea. Before the starting of interview, they
need to be dressed up in suitable cloth which will help them to have good interview.

6USER EXPERIENCE DESIGN
Conducting interview on time, which is heading towards right direction: The main
reason behind the script usage is its usefulness as it will help the interviewer to get reference
from it.
Trying to focus on interview and not making notes: It can be considered to be just a plan
to bury head in the notes (Arsel 2017). Interviewer needs to maintain eye contact so that they can
maintaining a flow of conversation. Also, there is a need for recording the interview instead of
making notes.
Thanking Interview at the end of process: The interviewee is given chance to ask any
question at this particular point.
User research:
User Interview aims to provide both kind of data that is qualitative and quantitative. The
overall result of interview can be bit challenging in some of cases (Newcomer, Hatry and
Wholey 2015). Two platforms that is word cloud and mind maps are found to be good for
providing qualitative data in much more interesting way, but it is difficult to understand this
format. Reports of written format are fine, but it tries to have all the required data and leaving out
some of the minor aspects in appendices.
Ethical understanding of interviewing techniques:
User interview is a cheap and convenient method for getting data. However, the point
should be taken into account that there is certain number of limitation for the interview technique
(Oltmann 2016). Interview are simple to conduct when interviewer needs to go through it. The
point needs to be taken account that user is completely informed about it.

7USER EXPERIENCE DESIGN
User Persona:
Figure 1: User Persona One
(Source: Created by Author)

8USER EXPERIENCE DESIGN
Figure 2: User Persona Two
(Source: Created by Author)
UX Principals and Data to Scope Plane Outline:
User-centered Design (UCD) can be stated as an iterative method which is used by
designer. It merely focuses on user and their requirement for each and every step of process of
design. In UCD, design teams are merely involved in the whole design process by complete
research and design methods (Brhel et al. 2015). UCD helps in creating highly usable and range
of accessible products that are used by them. User-centered design is completely based on certain
number of principles which focus on its usability. It is mainly achieved through the whole

9USER EXPERIENCE DESIGN
process of development and the system lifecycle process. There is a list of design principles
which is required for design for this retail website like
Design for user and their task: Isolation does not come into picture for some of
interactive system which provides support to the platform. Center is needed for providing
support to user that is needed for making design (Dixon 2015). At the time of development, it is
important to take into account the main features of website. This particular retail website has
been developed so that user can easily accomplish their task.
Maintaining Consistency: User needs to have a system which is easy and convenient to
learn with minimum understanding of different requirements. The overall behavior of different
interface parameter need to be consistent. This will begin in designing stage where various things
are integrated with present components of the system (Richards et al. 2019). The website of click
retail has been developed so that user can learn about different requirement easily.
Simple and Nature Dialogue: Some of the core application of any system require to be
incorporated by the help of proper interaction which provides dialogue to the user. In this, user
can have necessary information which is needed for task completion. As each time new
information is added to it (Desurvire and Wiberg 2015). This particular step puts the user too
much in more complicated scenario. Developer of click retail has made using simple and nature
dialogue.
Providing adequate Information: Each time user completes an action, the system must
confirm whether it is being completed successfully or not. Taken as an example, if the user clicks
on any link then the link must have an outline so that user can understand he/she has successfully
clicked on it.

10USER EXPERIENCE DESIGN
Providing adequate navigation mechanism: User is provided with the option of
navigating with different pages. It is vital to have an understanding concerning application of
efficient and consistent mechanism which is assigned in present window. This particular step is
gained by some of the indicators like page number and scrolling bar. User needs to provide a
clear route in between the different windows where users are completely engaged.
Free from Error: Each action will have proper response from the system. The system
must prevent the user from making mistakes. Such as if a user tries to input any invalid
information into the system, it must detect that flaw and instruct the user about the mistake. This
can be seen in the time of registration. The system shows the strength of the password that user
inputs in real time. This kind of error prevention mechanisms can be implemented in many
sections of the system.
Application Structure and Information Architecture:
The application will be consisted of three layers such as front-end, middle layer and
database. The front-end will be visible to the users. The middle layer will be server side scripting
that will process all the user queries and communicate with the database. The middle layer will
be the communication medium for two end that is the front-end and database. The database will
be used for storing and retrieving the data (Ejaz et al. 2019). The controller and modules will be
installed in the middle layer. The models will be interacting with the database. The view will be
available in the front end. Therefore, the application will be implemented based on the principles
of model-view-controller approach.
The application will have a header that will contain the most important information. The
header will be available in few pages like the main page and the product showcase page. As the

11USER EXPERIENCE DESIGN
Navigation panel will be fixed throughout the page, it will be outside of the header. For mobile
interface, hamburger menu or collapsed menu will be used. The user will click on the hamburger
icons and menu items will appear (Brhel et al. 2015). The menu will be covering the whole
mobile device screen. A search bar will be in the navigation panel so that user can search for the
intended product without redirecting to another page. The navigation will also have important
links like login or logout or link to user account.
The header is the most important part of the application. The header will show the
important information about the website or the specific page. Header will have sliding contents
so that same space can be used for showcasing various information (Richards et al. 2019). Taken
as an example, in one slide the website can show the offers on specific type of product and on the
other slide, the website can showcase new functions like reselling products. All the new arrivals,
most offered products, click retail exclusives can be shows through the header.
The website will showcase the information about itself in the about us page. This page
will communicate the information of what the organization is about, what is its organizational
goals, who are the key stakeholders of the organization and many other things.
The main pages are the product showcase page. These pages will render the data or
product information based on the user response. In order to provide better and custom product
presentation, filters and sorting options will be available in the pages. The user can customize the
search using the filters. Each page will have a cart icon which will indicate the amount or
quantity of products available in the cart (Ejaz et al. 2019). The user can directly go to cart page
by clicking on the icon. Each product will have two option that is add to cart and buy now
option. The customer can go to a page dedicated to that specific product. This page will have all

12USER EXPERIENCE DESIGN
the product related options. The user can see the reviews of other customers who have purchased
the product before. They can also rate the product only after they have purchased the product.
Figure 3: Navigation Structure of Click Retail Application
(Source: Created by Author)

13USER EXPERIENCE DESIGN
Wireframe Implementation:
Wireframe Design:
Figure 4: Home Page
(Source: Created by Author)

14USER EXPERIENCE DESIGN
Figure 5: Search Output
(Source: Created by Author)

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

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

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

18USER EXPERIENCE DESIGN
Figure 9: Admin Login
(Source: Created by Author)

19USER EXPERIENCE DESIGN
Figure 10: Order History
(Source: Created by Author)

20USER EXPERIENCE DESIGN
Figure 11: Search Branch
(Source: Created by Author)
Wireframe Test:
Test One: First test was done by Kyle Yates. He used the application to see all the
exclusive products available in the application. The presentation of the products was good and he
liked the filtering factors. As he could search for branches near him and check the product

21USER EXPERIENCE DESIGN
manually before buying, he liked the application. He liked the navigation of the application. He
also liked the refund policies however, as all the refund policy related information was not
available in the application. So he asked to make certain number of modification in it.
Test Two: The second person is Reachel Johnson. She was happy with the colour
combination of the application. She loves the way navigation was implemented. She also liked
the refund policy of the organization.
Style Tile:
Figure 12: Style Tile Example of Click Retail
(Source: Created by Author)

22USER EXPERIENCE DESIGN
Conclusion:
From the above study it can be concluded that the online retail application can bring a lot
of benefits to the organization. As the organization is not closing its physical stores, the customer
can personally check the products in the store and then order it online. The organization may also
ask for refund if the product is not up to the expectations. The design is the website is very good
and provide a good information about how the works will be carried out in the system. The user
persona has been done with all the information required to understand user behaviour and
expectations from an online retails. This has allowed to develop an effective UCD principles
which can guide the entire project. The login form of admin and customer will be same, it is the
server side scripting that will identify the user type and the whole process of login.
Recommendation:
Solution-Oriented Thinking: The designers must have proper thinking capability so that
every decision made during design can lead to one solution. Anything done randomly will only
add useless content to the site.
Effective Models: Each model develop during the design should be effective enough to
transfer the idea behind the application to the end user. The models must be full of essential data
and share knowledge regarding design in proper way.
Understanding of User Needs: The designers must acquire adequate understanding of
the user wants and needs. Designing an application that can only fulfil the organization need
which is not enough. The user must feel like they are getting importance while using the
application. User interaction during the development is a great of confirming. Different types of
end users must be there for conducting test on the prototype of the application.

23USER EXPERIENCE DESIGN
Effective Navigation: The navigation of the application should be efficient and easy
enough to let the user to see the intended information in least possible time. There should be a
main menu option which will allow the user to access the main sections of the application.

24USER EXPERIENCE DESIGN
Bibliography:
Arsel, Z., 2017. Asking questions with reflexive focus: A tutorial on designing and conducting
interviews. Journal of Consumer Research, 44(4), pp.939-948.
Brhel, M., Meth, H., Maedche, A. and Werder, K., 2015. Exploring principles of user-centered
agile software development: A literature review. Information and software technology, 61,
pp.163-181.
Desurvire, H. and Wiberg, C., 2015. User Experience Design for Inexperienced Gamers: GAP—
Game Approachability Principles. In Game User Experience Evaluation (pp. 169-186). Springer,
Cham.
Dixon, C.S., 2015. Interviewing adolescent females in qualitative research. The Qualitative
Report, 20(12), pp.2067-2077.
Ejaz, A., Ali, S.A., Ejaz, M.Y. and Siddiqui, F.A., 2019. Graphic User Interface Design
Principles for Designing Augmented Reality Applications. International Journal of Advanced
Computer Science and Applications (IJACSA), 10(2), pp.209-216.
García-Peñalvo, F.J. and Durán-Escudero, J., 2017, July. Interaction design principles in
WYRED platform. In International Conference on Learning and Collaboration
Technologies (pp. 371-381). Springer, Cham.
Hermann, M., Pentek, T. and Otto, B., 2016, January. Design principles for industrie 4.0
scenarios. In 2016 49th Hawaii international conference on system sciences (HICSS) (pp. 3928-
3937). IEEE.

25USER EXPERIENCE DESIGN
Jenny, B., Stephen, D.M., Muehlenhaus, I., Marston, B.E., Sharma, R., Zhang, E. and Jenny, H.,
2018. Design principles for origin-destination flow maps. Cartography and Geographic
Information Science, 45(1), pp.62-75.
Newcomer, K.E., Hatry, H.P. and Wholey, J.S., 2015. Conducting semi-structured
interviews. Handbook of practical program evaluation, 492.
Oltmann, S.M., 2016. Qualitative interviews: A methodological discussion of the interviewer and
respondent contexts. In Forum: Qualitative Social Research (Vol. 17, No. 2, p. 1).
Richards, K., Spagnolo, A., Cronise, R. and Backs, A., 2019, July. How Instructional Design and
User-Interface Principles Helped Us Develop an Online Academy for Learners with Mental
Illness. In Global Learn (pp. 239-247). Association for the Advancement of Computing in
Education (AACE).