UX Design Report: UX Analysis and Design for Click Retail Website

This report presents a UX analysis and design for the Click Retail website, an online retail store in the UK. It applies Jesse James Garrett's methodology, covering strategy, scope, structure, skeleton, and surface planes. The report details project objectives, user needs, and the implementation of agile methodology. It includes user research through questionnaires and personas, defining business and user requirements. The structure plane outlines site navigation and information architecture, supported by a site map. The skeleton plane implements wireframes, and the surface plane discusses color schemes, visual design, and typography. The analysis considers mental models, task model analysis, user journeys, and MoSCoW analysis to improve the user experience. The goal is to enhance the customer's online shopping experience and provide recommendations for the Click Retail website.

UX ANALYSIS AND DESIGN
UX Analysis and Design for Click Retail
Name of the Student
Name of the University
Author Note

1
UX ANALYSIS AND DESIGN
Table of Contents
Introduction..........................................................................................................................3
Discussion............................................................................................................................3
Implementation of the Jesse James Garrett Methodology for UX design in designing
the website for Click Retail:........................................................................................................4
Strategy Plane..................................................................................................................4
Project objectives.........................................................................................................5
User needs....................................................................................................................5
Agile methodology......................................................................................................6
Mental Model...............................................................................................................6
User interview questionnaire (UIQ)............................................................................6
User Persona................................................................................................................8
Scope Plane......................................................................................................................9
Business Requirements................................................................................................9
User Requirements.....................................................................................................10
Task model analysis...................................................................................................10
User journey...............................................................................................................11
MoSCoW analysis.....................................................................................................12
Structure plane...........................................................................................................13
Site Navigation Plan..................................................................................................13

2
UX ANALYSIS AND DESIGN
Information Architecture...........................................................................................13
Site Map.....................................................................................................................16
Skeleton plane................................................................................................................16
Wireframe Implementation............................................................................................16
Surface Plane.................................................................................................................20
Colour scheme:..........................................................................................................20
Visual design:............................................................................................................21
Typography and Fonts...............................................................................................21
Conclusion and recommendation......................................................................................22
References..........................................................................................................................23

3
UX ANALYSIS AND DESIGN
Introduction
In the past few years, there has been a massive growth of online retailing in the
United Kingdom. One such company is Click Retail, which operates all over the United
Kingdom. This company is an online retail store which offers a variety of retail products, which
in turn is inclusive like the toys, apparels and electronics to their customers. They have millions
of customers. For the improvement of the experience of their customers and to stay ahead in the
competitors along with the increment of online shopping rapidly, some measures have been
taken by the company like the decision has been made by the company to improve the layout of
the online store of it (Buley 2013). To execute this particular change, a junior designer from a
leading software development firm called ExSoft Ltd has been hired. The main focus of this
particular project is to showcase the prototype system for the online store, which is developed
with the help of the UX design, implementation skills and theory (Garverick 2018). For
designing a digital product, Jesse James Garrett’s methodology is used for the implementation of
a full cycle UX analysis and design.
Discussion
While working with any project development, correct strategic planning is a must
regarding project development. The needs and satisfaction of the customer is the most important
thing. The needs of the customer must be accepted, which is the most significant factor for a
website to stay in the competition. For a website, the users of that particular organization are
significant. To provide the users with the best experiences, the organization ready to take any
measures (Gonsalves et al. 2014). According to the methodology of Jesse James Garrett, online
retailers can be categorized into two huge parts, first is the need of the users which is gathered by
conducting various researches and the objectives of the business or products.
Click Retail which an online retail store consists of a layout which contains the criteria
that are mentioned below:
 Customer Login
 Customer search for products
 Payments of the customer
 Buying history of the customers

4
UX ANALYSIS AND DESIGN
 Admin Login
 Admin search for all the orders
 Nearest branch finder
 Market place
The above mentioned points are the requirements which are important for the successful
execution of the websites. It becomes the responsibility of the junior designer to work in these
particular areas to provide the users with the best experience possible. Utilizing the demographic
elements like the expenditure patterns of the customer, requirements of the customer, an
operation related to the research work is executed (Huang and Benyoucef 2013). In the case of
the patterns, patterns with three dimensions are followed specifically.
Implementation of the Jesse James Garrett Methodology for UX design in designing
the website for Click Retail:
Garret has described the UX design as a process or method which is applied for
ensuring that all the actions of the users happen or are executes according to the plan. For the
accomplishment of this particular goal, he identified five kinds of planes which helps in
understanding the expectations as well as the behavior of the users which in turn will affect the
way each and every product is designed, how that particular products behave and what are
theusers allowed to do with those particular products (Gray et al. 2013). The five kinds are
explained as follows:-

5
UX ANALYSIS AND DESIGN
Strategy Plane
This is the first and the foremost plane, which is termed as the “the foundation or
the base of a user experience that is successful”. This particular plane is used for defining the
needs, the expectations of the users, the businesses and what the businesses and users want to
achieve out of a particular product (Law et al. 2014). Defining the metrics of success along with
the indicators are essential in this specific stage which in turn will be used to examine whether a
particular product can meet the correct objective for which it is made.
Project objectives
The objective of a project has to be strong. Strategy plays an important role behind the
designing of UX. The reason is the fulfillment of the requirement. Satisfying the needs of the
customers is the main aim behind developing a site.
User needs
It is very important to understand and satisfy the needs of the customer. Before
planning any kind of strategy, it is very important for the organization to match up with all the
needs of the users. The experiences of the user helps in the development of the e-commerce sites.
Initially, for designing a UX, research is important. The diagram that is mentioned below shows
the needs of the customer along with the standardized products results in the expansion of the
business. If the needs of the user are fulfilled, then it will be a positive indication towards the
growth of the business.

6
UX ANALYSIS AND DESIGN
Agile methodology
A strategy which is designed correctly consists of data driven research which
gives an insight behind the designing of a site. Namely quantitative and qualitative research
methods are utilized. The profiles of the user are described by relating the theory which allows
Click
Retail
Swapping
is fast
Website
divided
into
sections
Security
up to date
Flexible
Payment
Methods
User needs Good
products
Business
Expansion

7
UX ANALYSIS AND DESIGN
the construction of stories of user, scenarios and the user flows etc. The requirements of the users
are highlighted which can vary for different set of users.
Mental Model
Mental model is the explanation of thought process of a person about how something
works in the world that is real. It constitutes the surrounding world and the relationship of
different parts. The mental models of the user are given below:
 Loss of personal or financial information.
 Too much advertisements on the website
 The navigations are critical.
User interview questionnaire (UIQ)
The user interviews give a good understanding on the participant’s preferences and the
attitudes towards the functionality.

8
UX ANALYSIS AND DESIGN
Q.NO Interview Questions
1 Do you use internet? Yes ☒
No☐
2 Are you a busy person? ☒ ☐
3 Do you shop online? Yes ☒
No☐
4 How frequently do you shop online? Depends on my mood
5 What kind of payment method you prefer? Credit Card ☐
Debit Card ☐
Methods
Conduct
SynthesisObjectives
Hypotheses

9
UX ANALYSIS AND DESIGN
Net Banking ☐
Google pay ☒
6 Devices used for shopping? Smartphone ☐
Personal Computer ☒
Tablet ☐
7 Website visited for shopping? amazon.co.uk
8 Prefer shopping in click retail? Yes ☐
No ☐
Maybe☒
9 New features that can be added to Click
Retail?
Security of the website
must be good so that personal or
financial details do not leak out
User Persona
The main aim of user persona is to show the reliable and the realistic reflections of the
people that are pertinent and would give information that are qualitative for the user research.
USER PROFILE I
Demographics Employed
Age: 30
Unmarried

10
UX ANALYSIS AND DESIGN
Female
background Annabelle buys clothes, shoes and
electronic goods from online shopping
website
needs To get a good user experience of the
online retail site Click Retail.
Goal To get a good user experience by
using the website. The website is good and
attracts the customers as it is divided into
sections.
Perception Annabelle wants to buy from a store
that has good user experience; the security of
the website is good and gives good
recommendations of the items that can be
bought.
Scope Plane
Next comes the scope plane which is itself defined by the help of the strategy.
Features, functions and content are defined in the scope plane which are going to be utilized in
that particular product. The structure of the plane defines the methods in which the functions as
well as the features of that particular site fits together. These features and functions constitutes of
the scope of any kind of site (Øvad and Larsen 2015). For example, some of the sites that sell

11
UX ANALYSIS AND DESIGN
books offer a single feature which enables the storage of the addresses that were previously used
so that they can be used any number of times when required.
Business Requirements
The scope plane is responsible for providing the structures of different functions
of the various sites along with the features. It gives some knowledge of features and the
functional requirements are defined. There are rare sites that provide the option for storing the
addresses that were previously visited. The contents of the website are also defined.
User Requirements
The requirements of the users must always be fulfilled because it is essential for
the expansion of the business in layer of scope and the aims should always be in alignment with
the scope plane. By constructing the specifications of the functions the strategy is then converted
into the scope.
User requirements: Online shopping website
User Name: Anabelle
User Role: Employee
User needs Would help me
Page swapping is fast To do shopping quickly.
Website divided into sections To do shopping more specifically.
Payment options are flexible To pay through cash-on-delivery and
credit card.
Security of the website is very good Share the personal and financial data.