QAC020N252S: User Experience Design Project for TreatWithCare

This project focuses on the user experience (UX) design for TreatWithCare, an online beauty parlour aiming to improve its online booking system. The project follows James Garrett's five planes of UX design: strategy, scope, structure, skeleton, and surface. The strategy plane involves defining product objectives and user needs, employing agile methodology, questionnaires, and user personas (Sophie Ashton and Brock O'Hara) to understand user requirements. The scope plane utilizes user stories and storyboards to visualize user interactions. The structure plane outlines information architecture and interaction design, including navigation structures. The skeleton plane implements wireframes for key user interfaces such as customer login, treatment history, and admin login. The surface plane addresses color schemes, logos, and typography. The project includes wireframe testing and demonstrates a practical application of UX principles to enhance user satisfaction and streamline the online booking process.

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
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

2USER EXPERIENCE DESIGN
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)

3USER EXPERIENCE DESIGN
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.

4USER EXPERIENCE DESIGN
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

5USER EXPERIENCE DESIGN
2.5 User Personas:
Sophie Ashton – Customer
“I need a well-designed and good looking
website that will show me all the services and
products in few clicks”
Customer is the main income of source for an
organization. Customers pay organization for
the service they receive or product they
purchase.
Technical Experience:
- She does not like confusing websites
- She has good knowledge of using
websites
- She can pay through various payment
methods
Personal Information:
Sophie Ashton, 36
- Likes to go to parties
- Likes to photo shoot
- Loves to interact with followers on
Instagram
Responsibilities:
- Communicating with various people
- Doing product promotions on her
social media accounts
- Handling three to four social media
accounts
Values and Fears:
- Always try to look best
- Making new friends
- Gets confused when websites have
poor UX patterns
Goals:
- Be a social media star
- Performing in various events

6USER EXPERIENCE DESIGN
- Get a perfect website that can solve
her purchase and service buying
issues
Brock O'Hara – Admin
“I need a system that allow me efficient
searching. A system that eases my work is
very important to complete my duties
effectively.”
Administrator of an information system is a
person who has control over the system.
Technical Experience:
- Knows database fundamentals
- Knows MS Word, Excel and Outlook
- Knows how to use web based
administrative systems
Personal Information:
Brock O'Hara, 28
- Loves to stay home with family
- Does courses on weekend
Responsibilities:
- Tracking system users
- Managing stylists
Values and Fears:
- A bad system that does not complete
a work
- Tight deadline in a bad working

7USER EXPERIENCE DESIGN
- Tracking sales
- Generating report
- Controlling privileges
environment
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

8USER EXPERIENCE DESIGN
(Source: Created by Author)
Figure 3: Customer History Story Board
(Source: Created by Author)
Figure 4: Admin Login Story Board
(Source: Created by Author)

9USER EXPERIENCE DESIGN
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.

10USER EXPERIENCE DESIGN
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.

11USER EXPERIENCE DESIGN
Figure 7: Customer Login
(Source: Created by Author)

12USER EXPERIENCE DESIGN
Figure 8: Customer Treatment History
(Source: Created by Author)

13USER EXPERIENCE DESIGN
Figure 9: Customer Search Services
(Source: Created by Author)

14USER EXPERIENCE DESIGN
Figure 10: Customer Payment Page
(Source: Created by Author)

15USER EXPERIENCE DESIGN
Figure 11: Stylist Profile Page
(Source: Created by Author)

16USER EXPERIENCE DESIGN
Figure 12: Admin Login
(Source: Created by Author)

17USER EXPERIENCE DESIGN
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 treatment 1. Login by user name and password

18USER EXPERIENCE DESIGN
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 that
have been made by the customers
1. Login by user name and password
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.

19USER EXPERIENCE DESIGN
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,

20USER EXPERIENCE DESIGN
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”

21USER EXPERIENCE DESIGN
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)

22USER EXPERIENCE DESIGN
Figure 15: Customer Treatment History
(Source: Created by Author)
Figure 16: Customer Search Services
(Source: Created by Author)

23USER EXPERIENCE DESIGN
Figure 17: Customer Payment Page
(Source: Created by Author)
Figure 18: Stylist Profile Page
(Source: Created by Author)

24USER EXPERIENCE DESIGN
Figure 19: Admin Login
(Source: Created by Author)
Figure 20: Customer/Stylish Search Page
(Source: Created by Author)

25USER EXPERIENCE DESIGN
7. Conclusion:
In this paper an UX design has been done for the TreatWithCare 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.

26USER EXPERIENCE DESIGN
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.

27USER EXPERIENCE DESIGN
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.