Student ID

Number  

BSc Computing Technologies

Programme Title
 
Module Title User Experience Design

Module Code
 

Module Convenor

 Assignment 1
Coursework Title

Academic Declaration:
Students are reminded that the electronic copy of their essay may be
checked, at any point during their degree, with Turnitin or other plagiarism
detection software for plagiarised material.

 
Date
Word Count 3700
Submitted
 12/05/2020
 Table of Contents
1. Introduction:...................................................................................................................2

2. Strategy Plane Research:..............................................................................................3

2.1 Product Objectives:..................................................................................................3

2.2 User Needs:.............................................................................................................3

2.3 Agile Methodology:...................................................................................................3

2.4 Questionnaires:........................................................................................................4

2.5 User Personas:........................................................................................................4

3. The Scope Plane:..........................................................................................................7

3.1 User Stories and Storyboards:.................................................................................7

4. The Structure Plane:......................................................................................................9

5. The Skeleton Plane:....................................................................................................10

5.1 Wireframes Implementation:..................................................................................10

5.2 Wireframes Testing:...............................................................................................17

6. The Surface Plane:......................................................................................................18

6.1 The Colour Scheme:..............................................................................................19

6.2 The Site Logo:........................................................................................................19

6.3 Typography and Fonts:..........................................................................................20

6.4 Implementing UI Prototypes:..................................................................................20

7. Conclusion:..................................................................................................................25

8. Recommendation:........................................................................................................25

References:......................................................................................................................26
1. Introduction:
In the current context TreatWithCare is an online beauty parlour which is
seeming a great growth of their business. For this reason, it is important for them to
manage their business in an effective way. For management of the business in an
effective way, the TreatWithCare has decided to develop and design an up-to-date
system which will be catering the growing business needs of them. Customer
satisfaction is one of the important aspects of a successful business and due to this, the
TreatWithCare is currently focused on the customer satisfaction. TreatWithCare is
already having an online booking system, but the current system is not capable of
providing proper service to all of the customers as the number of online booking has
been increased rapidly. Thus, to stay ahead against the market competitors
TreatWithCare has decided to improve their existing online booking system. Here, the
layout of the existing system will be improved so that online experience of the
customers can be improved. In this online booking system, there are several of online
service and for each of the services the journey of the end users will be improved.

Figure 1: Five Planes of UI/UX Design

(Source: Created by Author)

 By designing the user experience the user satisfaction will be improved as there
will be improvements in the product regarding accessibility, usability and pleasure while
interaction with the product will be done. For the user experience design purpose five
plane of James Garrett’s methodology will be used. As per Garrett there are several of
decisions of variables which influences how the overall site will be presented to the
users at the end (Pan and Wang 2019). The five planes of the James Garrett are the
surface, skeleton, structure, scope and strategy (Webber 2016). In the following section
a brief documentation will be provided reading UX improving procedure of
TreatWithCare.

2. Strategy Plane Research:

In the UX development process the strategy plane is an important part which
demonstrates business objectives and the user requirements (Chung and Ryoo 2017).
The strategy plane includes both of the demand of the organization and demand of the
users from the site.

2.1 Product Objectives:

The current objective of the product is providing online booking system for the
users who are interested to book and appointment in the TreatWithCare. Through this
site the user will be easily able to perform their booking. This website will be easily
accessible from the major devices including computer, iPad and mobile phones. The
website will be capable of handling a large number of users at any instance of time
which will make the TreatWithCare more competitive in the market.

2.2 User Needs:

The main users of this website will be the staffs of TreatWithCare and the
peoples who requires a beauty treatment from TreatWithCare. The staffs of
TreatWithCare will be administrating the available services where the customers will be
using this system for booking an appointment on TreatWithCare. All the services
provided by the TreatWithCare will be easily accessible by the customers and the
presentation format of the services should be easily accessible for the customers.
2.3 Agile Methodology:
In the current aspect, agile approach will be utilized for the development of the
UX of the website. There are mainly two reason for using the agile approach. First is
that various types of users are associated with the project and secondly the scope of
the project is perfect for the agile methodology approach (Anand and Dinakaran 2016).
In this case, all the requirement of the project will not be designed and defined and very
early of the project, rather than that the project will be developed by following the
iterative schedule. In this type of schedule project related components will be developed
and thereafter they will be deployed one after another (Campbell et al. 2016). In this
way, TreatWithCare will be able to achieve fast access to the market due to the fact that
some of the component of the final product will become functional before full completion
of the project. The agile development method provides another major benefit that is the
UX developers will be able to gather important feedback from the users for their next
iterations. In the agile methodology mainly the continuous loop of Build-Measure-Leann
is used.

2.4 Questionnaires:

Customer Questionnaire

Why you use online online beauty parlour websites?

What issue you find most annoying when using online beauty parlour websites?
How much time do you need to complete your request?
What is the perfect online beauty parlour website as per you?
What online beauty parlour websites you are using?

Admin Questionnaire

Do you prefer working from home also?

What are the current drawbacks of processes that are currently being used in treat
with care?
Do you prefer working in different desktops?
How would you like to reply to customer concerns?
How would you like to receive customer concerns

2.5 User Personas:

Sophie Ashton – Customer
Customer is the main income of source
for an organization. Customers pay
organization for the service they receive
or product they purchase.

“I need a well-designed and good looking

website that will show me all the services
and products in few clicks”
Technical Experience: Personal Information:
- She does not like confusing Sophie Ashton, 36
websites - Likes to go to parties
- She has good knowledge of using - Likes to photo shoot
websites - Loves to interact with followers on
- She can pay through various Instagram
payment methods
Responsibilities: Values and Fears:
- Communicating with various - Always try to look best
people - Making new friends
- Doing product promotions on her - Gets confused when websites
 social media accounts have poor UX patterns
- Handling three to four social media Goals:
accounts
- Be a social media star

- Performing in various events

- Get a perfect website that can

solve her purchase and service

buying issues

Brock O'Hara – Admin

Administrator of an information system is
a person who has control over the
system.

“I need a system that allow me efficient

searching. A system that eases my work
is very important to complete my duties
effectively.”
Technical Experience: Personal Information:
- Knows database fundamentals Brock O'Hara, 28
- Knows MS Word, Excel and - Loves to stay home with family
Outlook - Does courses on weekend
 - Knows how to use web based
administrative systems
Responsibilities: Values and Fears:
- Tracking system users - A bad system that does not
- Managing stylists complete a work
- Tracking sales - Tight deadline in a bad working
- Generating report environment
- Controlling privileges Goals:

- To be a CTO of an organization

- Learning many new technologies

3. The Scope Plane:

3.1 User Stories and Storyboards:
Sophie Ashton user stories are as following

i. As a customer, I want to search for various services that ‘treat with care’
provides and products that it sales so that I can easily access the
information that I want
ii. As a customer, I want to see my history of purchases so that I can track
my activities in this website

Brock O'Hara user stories are as following

i. As a admin, I want a system that will allow only me to access

administrative section so that my work is never disclosed to unauthorized
users
ii. As a admin, I want to track customers and stylist so that I can
management system
Figure 2: Customer Search Story Board

(Source: Created by Author)

Figure 3: Customer History Story Board

(Source: Created by Author)

 Figure 4: Admin Login Story Board

(Source: Created by Author)

Figure 5: Admin Search Story Board

(Source: Created by Author)

4. The Structure Plane:

After the collection of each and every information that is required and after the
scenario development, now information architecture and interaction design will be
created. The information architecture is mainly focused on how the organization of the
content element is done related to the requirement of the content (Comeaux 2017). The
interaction design is mainly focused on the interaction among the product and the users
and vice versa in respective of the functional requirement. To ensure that good
information architecture is employed, it must adapt itself if any type of change occurs
(King, Lazard and White 2019). Also, this type of architecture can be expanded in the
future. Considering the current scenario of TreatWithCare, in this case, all the possible
features will be identified depending on the requirement. After identification of the
possible features, those will be grouped. Here, logical groups will be created. Also, the
navigational structure will be also developed (Biagiola, Ricca and Tonella 2017). The
navigational structure is one of the important aspects that need to design properly so
that a good website can be developed (Castilla et al. 2016). In the following section, the
representation of card sorting is provided.

Figure 6: Navigation Structure

(Source: Created by Author)

5. The Skeleton Plane:

The skeleton plane is also a vital plane of the website development process. This
plane includes several important aspects, including interface design, information design,
and navigation design. There are some important interface elements that can be used
for representing the information on the website (Bello et al. 2017). These elements
include checkboxes, radio buttons, text boxes, and drop-down menus.

5.1 Wireframes Implementation:

The wireframe is actually a user interface that is represented visually. The
wireframe is used for element arranging on a screen where hierarchical order is
followed (Wu et al. 2018). From a general perspective, the wireframe actually shows the
website layout, including all of the interface items. In the following section, wireframes
are represented for the TreatWithCare online beauty parlour.

Figure 7: Customer Login

(Source: Created by Author)

Figure 8: Customer Treatment History

(Source: Created by Author)

Figure 9: Customer Search Services

(Source: Created by Author)

Figure 10: Customer Payment Page

(Source: Created by Author)

Figure 11: Stylist Profile Page

(Source: Created by Author)

 Figure 12: Admin Login

(Source: Created by Author)

 Figure 13: Customer/Stylish Search Page

(Source: Created by Author)

5.2 Wireframes Testing:

Feedbacks from the user end is important for developing and designing a good
product. The user feedback is also important for the minimization of the changes that
need to be done in the later stages of the development process. It is important to gather
the information on an early basis, and for gathering the information, wireframe testing
can be done with the users (Aeschliman 2019). The wireframe testing is done on the
users where a user is familiarized with the developed wireframes. After this, the users
perform the tasks from the user stories, and for that, they need to interact with the
elements of wireframes. In this way, important information can be gathered as users
can raise their queries while interacting with the wireframe elements. Any type of valid
queries can be addressed while developing the actual product (Takei and Takesue
2016). In the following section, some tables are represented, which demonstrates each
of the steps that are taken for testing purpose of user scenarios.
 As a customer, I want to view the 1. Login by user name and password
treatment history.
2. Click the menu

3. History option

4. Show the treatment history of the

customer

RESULT: PASSED

As a admin, I want to see future bookings 1. Login by user name and password
that have been made by the customers
2. Show booking service screen

3. Select up-coming bookings

4. Sort by date and time

5. Show the bookings that will be

served by the organization

RESULT: PASSED

6. The Surface Plane:

The surface plane, which is the top layer, decides how better the website will be
from the visual perspective. In this layer, the developers are mainly focused on polishing
things up that are associated with the website development process. These elements
include how various colors have been used throughout the website design, contrast of
the website, typography of the website, and the logo and the layout of the website
(Williams 2019). Also, the font style and size used for the website is an important
element. If the final developed website is developed properly, then it will surely ensure
the satisfaction of the customers, and it will attract more visitors to the site.
6.1 The Colour Scheme:
The color scheme is also an important element for web development purposes. If
the website is having any type of color inaccuracy, then it can have a variety of negative
consequences (Bakar and Jaafar 2017). These negative consequences can include
dissatisfaction with the customers and loss of sales. For this reason, it is very much
important to use proper color representation, which will also help for brand recognition.

6.2 The Site Logo:

The logo of the site represents the brand itself. The logo of the site plays an
important role in brand recognition purposes (Barakat 2017). The logo that has been
chosen in this context is quite simple. The current logo is the combination of letters T,
W, and U. Together, the logo forms the word“TWC.” Here, the TWC refers to the actual
name of the online beauty parlor, which is TreatWithCare. For the logo, deep red clour
and pinkish color has been chosen, which is one of the favorite colors of ladies. Thus,
the logo of the organization makes the overall website quite attractive. Also, the logo of
the organization is very much suitable for other webpages of the system. For this
reason, the designed logo for the TreatWithCare is very much suitable.

6.3 Typography and Fonts:

Considering the utilization of the fonts, it will be better if a lesser number of font
styles are used. Here, for developing the website, very few types of fonts have been
used, and that is one positive side of this website (Joshi and Siemieniak 2019). The
current font styles that have been used in the development process are very easy to
read. Also, for the dark shade fonts, developers have used the lighter background, and
in similar way, for the lighter shade fonts, the dark background has been used, which is
again making the fonts very easy to read.

Typography is also an important element regarding the web development

process. The role of typography is important as it helps the users to perform any type of
reading effortlessly (Kirk, Ractham and Abrahams 2016). Here, it has been assessed
that if the typography of a website is good, then the website will achieve a good user
interface.

6.4 Implementing UI Prototypes:

Prototypes are used for providing a rough representation of the final product. A
UI is not the same as the wireframe. The prototypes include the required content, which
means a prototype can function as the actual product. Users can freely interact with
these prototypes. The prototypes are used before the development process starts
(Walter 2018). These are used for providing a quick idea to the users how the end
product will look like. Also, the developers can receive feedback from the users
regarding the prototype and can make changes accordingly. In the following section of
this report, some important prototypes of the system are provided. From the developed
prototype, it can be seen that the starting page of the website is the login page where a
simple login form is present with the logo of TreatWithCare. In the following section, the
prototype of the customer search page has been provided. In this section, the name of
the beauty treatment and the cost of the treatment has been provided. In this case, for
this treatment, the user needs to spend approximately 30 minutes, which has been also
mentioned on the search page. From this search page, the customer can directly book a
treatment, and for that, a “Book” option is provided over the webpage. If the customer
does not wants to book the beauty treatment at that moment, then the customer can
use the makeover option available at the right bottom of the search page. Following that
prototype of the treatment history page has been provided. This prototype shows that
users can see their treatment history on a monthly basis. Here, the customers can find
some important statistics about their treatment history, including the name of beauty
treatment, date of treatment, status, and feedback for the treatment. Also, the users can
browse the treatment history of the previous months.

Figure 14: Customer Login

(Source: Created by Author)

Figure 15: Customer Treatment History

(Source: Created by Author)

Figure 16: Customer Search Services

(Source: Created by Author)

Figure 17: Customer Payment Page

(Source: Created by Author)

Figure 18: Stylist Profile Page

(Source: Created by Author)

 Figure 19: Admin Login

(Source: Created by Author)

Figure 20: Customer/Stylish Search Page

(Source: Created by Author)

7. Conclusion:
In this paper an UX design has been done for the Treat With Care online beauty
parlour organization. For performing this UX design five planes of James Garrett
methodology has been utilized which is used for digital product design. In this
documentation part all the five planes of James Garrett’s methodology have been
utilized. These five planes are the strategy plane, scope plane, structure plane, skeleton
plane and the surface plane. In the first section the strategy plane has been discussed.
Important aspects of the product have been demonstrated in this section including
product objectives and the needs of the users. Following that scope plane has been
discussed in which user stories and the storyboard has been demonstrated. In the
following section of this report structure plane and the skeleton plane has been
discussed. The wireframe implementation and testing has been done in the skeleton
plane. In the last section of the report the surface plane has been demonstrated which
included both of the site logo and the colour scheme. All the important tasks for
performing the UX design has been done perfectly in this report and output of this
project is having a good quality.

8. Recommendation:
Some important recommendation is also shared in the below section.

 While performing the UX design, the developer team should always assess the
audience of the product.

 Gathering feedback from the users can help to improve the UX design of the
product. So, the developers should always work on gathering feedback from the
users.

 Also, it is recommended that the developers should lower the complexity of the
UX as low as possible.
References:
Aeschliman, G.D., 2019. A Wireframe Representation of a Prototype Clinical Decision
Support Tool For the Management of Cardiometabolic Disorder and Diabetes Type
2 (Doctoral dissertation).

Anand, R.V. and Dinakaran, M., 2016. Popular agile methods in software development:
review and analysis. International Journal of Applied Engineering Research, 11(5),
pp.3433-3437.

Bakar, A.B.A. and Jaafar, P.N.L., 2017. Sustainability through website development:
The case of public libraries in Malaysia. Qualitative and Quantitative Methods in
Libraries, 2(1), pp.87-92.

Barakat, S., 2017. LAMP as a Website Development and Hosting

Environment. Research Journal of Applied Sciences, 12(5-6), pp.365-367.

Bello, R.O., Olugbebi, M., BABATUNDE, A.O., BELLO, B.O. and BELLO, S.I., 2017. A
University Examination Web Application Based on Linear-Sequential Life Cycle Model.

Biagiola, M., Ricca, F. and Tonella, P., 2017, September. Search based path and input
data generation for web application testing. In International Symposium on Search
Based Software Engineering (pp. 18-32). Springer, Cham.

Campbell, J., Kurkovsky, S., Liew, C.W. and Tafliovich, A., 2016, February. Scrum and
agile methods in software engineering courses. In Proceedings of the 47th ACM
Technical Symposium on Computing Science Education (pp. 319-320).

Castilla, D., Garcia-Palacios, A., Miralles, I., Breton-Lopez, J., Parra, E., Rodriguez-
Berges, S. and Botella, C., 2016. Effect of Web navigation style in elderly
users. Computers in Human Behavior, 55, pp.909-920.

Chung, S.E. and Ryoo, H.Y., 2017. Research on the innovative product development
model with flexible display in the UX design. International Information Institute (Tokyo).
Information, 20(7B), pp.5391-5400.
Comeaux, D.J., 2017. Web design trends in academic libraries—A longitudinal
study. Journal of Web Librarianship, 11(1), pp.1-15.

Joshi, K. and Siemieniak, M., 2019. Website development process improvement in

SMEs using TPS with the implementation of Lean and Agile methodologies-an empirical
study. Zeszyty Naukowe Politechniki Poznańskiej. Organizacja i Zarządzanie.

King, A.J., Lazard, A.J. and White, S.R., 2019. The influence of visual complexity on
initial user impressions: testing the persuasive model of web design. Behaviour &
Information Technology, pp.1-14.

Kirk, K., Ractham, P. and Abrahams, A., 2016. Website development by nonprofit
organizations in an emerging market: A case study of Thai websites. International
Journal of Nonprofit and Voluntary Sector Marketing, 21(3), pp.195-211.

Pan, S. and Wang, Z., 2019, April. The Exploration of Smart Object Design Method—
Applying User Experience Five Elements for Smart Object Design from Theory
Research to Design Practice. In Journal of Physics: Conference Series (Vol. 1207, No.
1, p. 012007). IOP Publishing.

Takei, Y. and Takesue, N., 2016, August. Design of wireframe expansion and
contraction mechanism and its application to robot. In International Conference on
Intelligent Robotics and Applications (pp. 101-110). Springer, Cham.

Walter, M., 2018, September. An approach to transforming requirements into evaluable

UI design for contextual practice-a design science research perspective. In 2018
Federated Conference on Computer Science and Information Systems (FedCSIS) (pp.
715-724). IEEE.

Webber, M., 2016. Elements of Web Design.

Williams, K., 2019. IS 117-101: Introduction to Website Development.

Wu, J., Xue, T., Lim, J.J., Tian, Y., Tenenbaum, J.B., Torralba, A. and Freeman, W.T.,
2018. 3D interpreter networks for viewer-centered wireframe modeling. International
Journal of Computer Vision, 126(9), pp.1009-1026.