UI and UX Design for Click Retail

Running head: UI AND UX DESIGN
UI and UX design for Click Retail
Name of the Student
Name of the University
Authors note

UI AND UX DESIGN
1
Table of Contents
Introduction......................................................................................................................................4
Business goals of Click Retail.........................................................................................................4
Implementation of the Jesse James Garrett Methodology for UX design in designing the
website for Click Retail:..............................................................................................................6
Strategy Plane:.............................................................................................................................6
Project Objectives....................................................................................................................6
User Needs:..............................................................................................................................7
Methodology used – Agile:.....................................................................................................8
Mental model...........................................................................................................................9
User interview questionnaire (UIQ)........................................................................................9
User interview questionnaire for online retail store..................................................................10
User persona:.........................................................................................................................14
Scope Plane:...............................................................................................................................16
Business requirement:............................................................................................................16
User requirements:.................................................................................................................16
Task Model analysis:.............................................................................................................17
User journey:.........................................................................................................................18
MoSCoW Analysis:...............................................................................................................18

UI AND UX DESIGN
2
.........19
Structure Plane:..........................................................................................................................20
Site navigation pattern:..........................................................................................................20
Information architecture:.......................................................................................................21
Card sorting...........................................................................................................................21
Site map.................................................................................................................................22
Skelton plane:............................................................................................................................22
Wireframe implementation:...................................................................................................22
Surface Plane:............................................................................................................................27
Color scheme:........................................................................................................................27
Visual design:........................................................................................................................27
Typography and fonts:...........................................................................................................27
Must
The user can log in
website and can
register
Should
The password can
be changed
Could
The vailable choices
can be checked
Would not have
Notifications
activated

UI AND UX DESIGN
3
Conclusion:....................................................................................................................................28
References......................................................................................................................................29

UI AND UX DESIGN
4
Introduction
There has been a massive growth of online retailing in the United Kingdom in the past
few years. Click retail is one such company that runs in the UK. To meet the customer
satisfaction and stay ahead in the competition it has been decided by the company to improve the
design of its online store. To enhance this change, junior engineer from leading software
designing company has been hired. The main focus of the project is to show the digital store
layout’s prototype is developed with the help of UX design, theory and implementation skills.
The Jessie James Garrett’s methodology for designing a digital product is used for the
implementation of a full cycle of UX design and analysis.
Before proceeding with any project development, there has to be a proper strategic
planning. This is the stage where the customer’s need is prioritized. Understanding what a
customer is looking for in a website is very essential. How the user is important for the
organization is the primary concern for the developers. To provide the users with an optimal
experience, according to Jesse James Garrett, the website for Click Retail online retail store can
be divided into two major parts; the users need, obtained through the research work and the
business objectives or the product objectives.
Business goals of Click Retail
1. Knowing the customer:
Understanding the needs of the customer is the prime goal for any retailing website.
Customer profile or persona is created for generating a better idea about the customer’s
requirement.
2. Maximizing the data:

UI AND UX DESIGN
5
Behavioral insights can be achieved by collecting each and every data ever input by the
customer. The customer feedback data can be achieved from the other departments of the
organization. More the amount of data is, better it is for the organization.
3. Better customer services:
Customer centric culture is built from the beginning till the end of the system so that the
customer service can be run without any hindrance. The line associates are empowered.
Building a strong customer connection leads to helpful and efficient feedback. The
feedbacks helps in improving the services towards the customer.
4. Innovation:
Instead of been afraid of failure, innovative ideas must be shared and implemented.
Updating the existing technology for better experience of the customer is the prime
business goal for the online retailers. Innovative technologies provide better services.
5. Creating comprehensive CRM strategy:
Demographic, transactional and behavioral data are integrated with the technology and
the system for development of customer profile. The data and technology is used for
adding values to the experience of the customer as they provide personalized experience.
Click Retail, the online retail store already has a layout consisting of the following options
o Login
o Customer search
o Customer’s payment
o History
o Login for the Admin

UI AND UX DESIGN
6
o Search for all orders
o The nearest brand locator
o Market place
These are the minimum requirement of a website to run successfully. Hence, it is the
responsibility of ExSoft Ltd., the software developing company to develop the website in
these areas for providing the customers with the optimal experience. A research operation is
performed using demographic elements, like the customer’s requirements, their expenditure
patterns, etc. To be more specific, three types of dimensional patterns are followed.
Implementation of the Jesse James Garrett Methodology for UX design in
designing the website for Click Retail:
Strategy Plane
Project Objectives
Strategy is an important layer for UX designing as the user needs are to be fulfilled. Same
strategic concerns are applied in both information spaces and software products. The goals for
creating a site is fulfilling the user needs which is received externally. It is important to
understand what the user wants and how it matches with other required goals. Before starting to
plan the strategy, it is important to understand the needs of the user. A UX strategy helps the
businesses to increase productivity and ROI and reduces the risk of product development.
Research is the first thing required in UX designing.
A strategy designed properly is composed of data-driven research and gives a clear idea
for designing the site. Two kinds of research methods are used – qualitative and quantitative.
Relating to the theory obtained, the user personas can be defined that allows to start building
scenarios, user flows and user stories. The needs which may vary for different users are

UI AND UX DESIGN
7
highlighted by the user stories and the stories are then elaborated through scenarios. Finally,
based upon these scenarios and stories, a user flow is created. After having a clear idea about the
product will proceed, new creative ideas can be explored. The ideas will lead to wireframes and
provides an idea for the functionality and layout. Some functionality can be added by building
prototypes. Now the visual design can be done. The visual designing can be done by creating a
UI pattern library or a style guide. The responsiveness and the interaction with the product is
considered at last. Testing a designed product is important as it needs to be successful when put
out in real world. A/B testing is used for assessing things, along with polls or surveys which
allows the active users to provide honest opinions. Click Retail site can be improved by applying
the strategy plane for the site.
Figure 1: Defining the strategy in Jesse James Garrett’s way
Surface Skeleton Structur
e Scope Strategy