Designing a User-Friendly Gym Website: Final Project

Desklib offers solved assignments and past papers to help students succeed.

User Experience & Interface Design
Page | 1

Table of Contents
Introduction.................................................................................................................................................4
LO1..............................................................................................................................................................5
P1 Recognise specific forms of User Experience and Interface Design and end-user testing requirements5
Give at least five real examples of where good user experience has been applied.................................7
3 types of usability tests......................................................................................................................7
P2 Assess standard tools available for use in User Experience and Interface Design..................................8
Card sorting.........................................................................................................................................8
Personas..............................................................................................................................................8
Use Cases.............................................................................................................................................9
User Experience Map...........................................................................................................................9
Wireframes..........................................................................................................................................9
Mock-ups.............................................................................................................................................9
LO2............................................................................................................................................................11
P3 Review different end-user categorizations, classifications, and behaviour modelling techniques.......11
P4 Appraise a specific end user and an appropriate User Experience and Interface Design methodology
to test with this user type..........................................................................................................................13
LO3............................................................................................................................................................19
P5 Examine appropriate tools to develop a user interface........................................................................19
P6 Run end user experiments and examine feedback...............................................................................22
Page | 2

List of figures
Figure 1 Use case for trainer and system...................................................................................................11
Figure 2 use case diagram for system and user.........................................................................................12
Figure 3 Homepage design........................................................................................................................14
Figure 4 About...........................................................................................................................................14
Figure 5 Gallery..........................................................................................................................................15
Figure 6 Registration..................................................................................................................................15
Figure 7 Contact........................................................................................................................................16
Figure 8 Homepage design........................................................................................................................18
Figure 9 about us design............................................................................................................................18
Figure 10 Gallery Page design....................................................................................................................19
Figure 11 Registration form design............................................................................................................20
Page | 3

Introduction
Design factors in system or software design field is a big factor to fulfil the primary requirement
of the client. It is the first interface where a user interacts with software or system directly and
their first interaction decides a relationship with the organization or website. The design
mechanism has been split in two-part called user interface design which deals with look and
feel of the software and user experience which deals with the functionality of the website
whatever should be available. There are several types of user who uses the software in a
different environment and so the UI and UX design is most important because an end user
interacts with the system front end. There are several types of UI Development tools available
which allow developing a UI and UX with mapping all requirements. The current paper
contributed to user interface and user experience design with addressing all required tools and
technologies. As a designer, it is required to design a system by selecting an area by keep in
mind corporate client and consumer market.
Page | 4

LO1
P1 Recognise specific forms of User Experience and Interface Design and end-user
testing requirements
Web design is a creative step for the satisfaction of the end user is the most viable terms. It
consists different types of factors like webpage layout design, content management and
formatting, web graphic design. For this scenario, I have appointed as a user interface and user
experience designer and responsible to design a creative products for the corporate clients and
customers. For this scenario, it is required to design and map experience and interface design
for a new concept for an existing client. At this stage, a user interface and user experience
design discussion has to be done. (Careerfoundry.com, 2019)
User interface Design
It is a design of interface where user interacts with the system or software like mobile
applications, computers and etc and promising to deliver the most effective and rich user
interface. The purpose of follow up of this design is to provide the simple but effective
interaction of system and user. A good user interface design enables to accomplish the
assessment without drawing the attention of users for undesired things. The major part of this
design is graphic design and content management formatting and should be able to balance the
functionality of the system along with visuals.
It required detail idea about requirement of users and categorize in several stages. In this
design activity, a good interface design is recommended than other things of project. Thus, this
process mostly affects the development work and allows gathering all requirements of users at
an early stage of development. It reduces developer efforts and is a time saving for both client
end and developer end.
User experience design
Experience means a moment where someone interacts with something and uses its services
and provides their opinion. So user experience design is a special kind of activity that is required
Page | 5

to effectively address the expectation of users. This process concludes user experience design,
user enterprise design and smoothing the current design to enhance the experience of the user
when they interact with the interface of the system. It is the process of improvement of client
satisfaction by improving accessibility, reliability, usability, and durability of the product. It is a
practice of product design, processing, servicing, events and environment where a user
interacts with a system where user experience could be enhanced. It is process for having
multiple perspectives. Since this is a conceptual design process and have human factor root
with focused on users, system, and environment. It concludes basic design elements like visual
design factors, architecture design, interaction process and etc.
(Careerfoundry.com, 2019)
The major difference between user interface design and user experience design is as follows:
User interface design User experience design
User interface design is a term that addresses
front end functionality of the system
User experience design is a term that
addresses user need.
UI design offers a better look and feel. In
simple term, it makes a system beautiful and
attracts the user’s attention.
UX design makes software or system useful
It is a process which attracts and engages the
user emotionally. A designer of the system
could make a system which gains user’s
attention and enforces them to come back
again.
It is a process which enables developers to
address end-user goal and provide the system
whatever they looking for
This process comes after the completion of UX
design. Once the functionality of the system
measure, it comes for look n feel touché
ability.
It is recommended to address all type of
requirement at an early stage of development.
Page | 6

Give at least five real examples of where good user experience has been applied.
The best real-life examples where world-class user experience has been addressed as per
identification of need and requirement of client and user of the system is as follows:
1. Rover: it uses the review to enhance trust factors. This is a pet lover, especially a dog
lover system where a user can leave their pet for special care by using online booking
functionality. This provides updates about the pet caring to build more visible trust
factors.
2. Duolingo: it is a bilingual website where a user can learn a new language by setting their
end goal. The user interface for different language consists of national flag of that
specific country.
3. PayPal: In the early stage, it has a complex structure but after redesign, it becomes
simpler and have rich user interface allow to process payment in a few simple steps.
4. MailChimp: It offers a face to the website that could not be done by a human. It allows
making a connection with the user with emotional touch and high five connections. It
just behaves like a team member rather than a tool.
5. Google: Google design is most competitive in the world and has a prior choice because
of its fast loading and simple architectural design. Being a fast search result provider it
provides a maximum number of result in less time than others.
(Tronebrandenergy.com, 2019)
3 types of usability tests
There are a different type of usability testing process exist to test a system for better
serviceability and about user interface design. The best three is as follows:
Click testing
Click testing is a method by which one can measure system usability and can find how it is easy
to process tasks. The aim of the click testing is to make verification for interface and design and
identify a clear and concise process. This type of testing enables a user to perform a task and
allow considering and investigating client behaviour for several scenarios.
Contextual interviews
Page | 7

The contextual interview is a set of activities; perform by end user rather than a lab to test
system in a user environment. It allow to record system result in a more practical environment
which sometime becomes more realistic than an actual result. In this testing, a tester analyze
user experience from the user and think from a user point of view.
Online surveys
Online surveys allow a system admin to make some set of questionnaire, a question set that will
be the same for all type of users. In this type of testing a common form has been built with
some predefined question for all type of users means either a customer or an employee. It is
one of the fastest methods to test and record a system globally in fewer efforts. (Seward,
2019)
P2 Assess standard tools available for use in User Experience and Interface Design
Card sorting
It is a very strong technique where a user design of the system or evaluation of the system
could be performed. In this type of sorting all the process of the task is being categories and
makes a meaningful process. It allows recording expectation of the customer or user by
analyzing topics. It helps in building the architecture of the system, includes or exclude features
and categorize label or navigation. There is two main types of card sorting is there as per need
and type of requirements for example, open card sorting that allow to format the content of
the system in a best possible way and closed card sort to create some set of predefined
categories. (The Interaction Design Foundation, 2019)
Personas
A persona terms which define requirement and need of the different type of user’s in order to
organize them all for better services, brand or products. Development of personas allows to
record requirement of each and every type of selected users in terms of functionality, need,
experiences, and objectives. It enables to recognize that every type of user has a separate and
different requirement and expectation from the system, enable to design state of the art
solution.
Page | 8

Use Cases
In system design and development, use cases are the technique to list out all type of functional
requirements of the user and allow preparing an early walkover of the system including process
under which a user will interact with the system. Here the actor is a user or employee of the
organization for which it is being developed and represent the mission or goal of the target
audiences. It allows gathering detailed requirement of user in a systematic way, a useful
process of analysis i.e. widely acceptable in latest system development engineering.
User Experience Map
A client experience map encourages you to sketch out the UX and figure any grating before
making the real site or model. It's critical to take a gander at the entire picture before you begin
fabricating or notwithstanding structuring. In the event that you as of now have an item, it
tends to be an extraordinary exercise to see any rubbing focuses your clients might confront.
(Affairs, 2019)
Wireframes
It is the most promising process to demonstrate the system and user interaction, use-case
streams and page conduct. Here are a couple of things to think about high-loyalty wire outlines.
Wire outlines don't give a real yield – the client will never observe them again. Truth be told,
wire outlines are those stages from where visual planners and engineers make a genuine
output. High-loyalty wire-outlines give a superior thought of how the stage will look before
experiencing the last structure organize and the whole programming improvement life cycle.
Though, it ends up troublesome with low-devotion wire-outlines for the customer to picture
what the finished result would resemble.
Mock-ups
Web and versatile structure improving devices, for example, mock-ups, wireframes, and models
is quick turning into the website specialist's closest companion and fundamental apparatuses in
the website architecture process. With a more noteworthy than at any other time accentuation
on client experience and the groups and assets entrusted with structure these encounters,
these plan apparatuses are demonstrating their value. A standout amongst the best things
about the UI mock-up is that it urges us to structure with reason. When constructing a mock-
Page | 9

up, dependably think about your partners, customers and client analyzers. The UI mock-up is
basically a propelled form of the low-loyalty wireframe, a bit nearer to the last item, both
regarding the usefulness and visual extravagance.
(Smashing Magazine, 2019)
Page | 10

LO2
P3 Review different end-user categorizations, classifications, and behaviour
modelling techniques
As per scenario requirement for corporate client and customer a Gym related organization SILC
has been selected who offer Gym services to their client by the help of a professional trainer.
They urgently seek for an online platform to provide easily accessible services to the client. To
review the mindset of different type of end user for the new system along with functional and
non-functional requirement there are several ways or modelling techniques available. The
questionnaire is one of the best modelling technique allow to record requirement of all type of
users at a single time without investing so much type and creating numerous types of questions
for each user. (Nielsen Norman Group, 2019)
The questionnaire for the required system is as follows:
A questionnaire with a combination of multiple choice and open-ended questions
Ques1: What type of system you looking for?
Ans- Looking for an online web solution
Ques2: Who is your customer or user of the system?
Ans- This system is for fitness seeker and service provider
Ques3: Are you looking for a customer-centric system
Ans- Yes, this is a customer based system consists two type of user i.e. trainer and gym service
seekers.
Ques4: What are your functional requirements?
Ans- The system should have a gallery section, session panel and a tab for company portfolio
Ques5: Payment system is a most required feature, so do you wish for that?
Page | 11

Ans- At this time, no. We didn’t require.
Ques6: What is your long term goal from the system?
Ans- To create a chain of satisfied fitness seekers
Ques7: Tell me about your UX design requirements?
Ans- It should be an elegant and simple design
Ques8: Do you have any reference system?
Ans- Yes, The system looks like an online learning portal which could be accessible from
anywhere.
Ques9: Is the system will contain personal user space?
Ans- Yes
Ques10: Do you require a login registration feature?
Ans- Yes.
Using the above set of the questionnaire a survey has been conducted overall staff and existing
clients of the SILC organization, personas for them has been developed.
Review for selected methodology
The used modelling methodology impacts on the design of the web solution. It provides a clear
idea about requirements and allows the preparation of prototypes and mock-ups on the basis
of the given information. It also allows designing a system for two types of the user where each
user will get their specific user space. Means the used methodology resolve multiple designs
related issues and user experience related issues and enable to prepare a design in less time by
using professional skills.
Page | 12