User Experience Design Report: Click Retail Mobile Web Application

This report details a user experience (UX) design project for a retail web application, focusing on Click Retail. The assignment explores the application of UX design principles to improve user satisfaction. The report begins with an introduction to the problem and outlines the methodology, including Jesse James Garrett's UX planes. It covers the strategy plane with qualitative user interviews, ethical considerations, and the creation of user personas. The project then moves to the scope plane, defining user stories and outlining application structure and information architecture based on a model-view-controller approach. It also covers the skeleton plane, including wireframe implementation and testing. The report concludes with the surface plane, detailing the color scheme, site logo, typography, and recommendations for future development. Throughout the project, user-centered design (UCD) principles are applied to ensure a user-friendly and effective application 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