Semester 1 QAC020N252S UX Design Report: TreatWithCare Website

This report presents a comprehensive analysis of the user experience (UX) design for the TreatWithCare online beauty parlour website. The project utilizes Jesse James Garrett's methodology, outlining the strategy, scope, structure, skeleton, and surface planes of the design process. The report details the research methodology, including UX qualitative interview questionnaires, user personas (admin and visitor), and user stories. It showcases the design of the website, including high-fidelity wireframes for key pages such as the home screen, customer login, search, treatment history, payment, stylist login, profile, and admin login. The report further includes wireframe testing results, demonstrating the user interface and functionality of each page. The report concludes with recommendations for future improvements and a summary of the design process, emphasizing the importance of user-centric design principles to enhance the usability and appeal of the website.

Running head: USER EXPERIENCE DESIGN
USER EXPERIENCE DESIGN
Name of the Student
Name of the University
Author Note

1USER EXPERIENCE DESIGN
Table of Contents
Introduction:...............................................................................................................................2
Strategy Plane Research:............................................................................................................2
Methodology:.........................................................................................................................2
UX qualitative interview questionnaire:................................................................................2
User persons:..........................................................................................................................4
Scope Plane:...............................................................................................................................4
User stories:............................................................................................................................5
Structure Phase:..........................................................................................................................6
Skeleton Plane:...........................................................................................................................8
Implement high fidelity wireframes:......................................................................................8
Wireframes Testing:.............................................................................................................13
Surface Plane:...........................................................................................................................19
Implementation of style tiles and guides:.............................................................................19
Conclusion and Recommendations:.........................................................................................20
References:...............................................................................................................................21

2USER EXPERIENCE DESIGN
Introduction:
TreatWithCare is an online beauty parlour. They want a beautiful, simple and
appealing website that can perform several tasks automatically. This website will help to
increase business growth. TreatWithCare wants to implement an online payment method that
us helpful for customer and organization as well. To develop this system, Jesse James
Garrett’s methodology is used in this project. This report provides the four plane of UX
design methodology, high wireframes and test wireframes with different users to prove the
theory of process development.
Strategy Plane Research:
Methodology:
In this project, Jesse James Garrett’s methodology is used to designing digital
products. Garret describes a full UX design life cycle to design the user experience. Garret
provides five different planes that allow understanding of a user’s behaviour and expectations
(Yesilada et al. 2015). These aspects provide the design looks and how it behaves and how it
allows a user to do.
Strategy Plane: This is the first pane that defines what business and a user want.
Scope Plane: After determining the strategy, UX designer starts focusing on the scope that is
already defined by the strategy itself (Gray et al. 2018).
Structure Plane: In this step, a conceptual structure is developed. This structure can provide
how a system response to the user request.
Skeleton Plane: in this step, designers refined the structure where navigation and interface
will identify.
Surface Plane: In this step designers provide the content, aesthetics and functionality to
complete the entire design.
UX qualitative interview questionnaire:
Qualitative interview questionnaires able to produce in-depth responses, and it is
usually designed to find out what a person has learnt, what is changed in the program result
and what their different approach (Tomlin. 2018). Few samples of UX qualitative interview
questionnaires are given below:

3USER EXPERIENCE DESIGN
What is UX design?
UX or user experience design is a special type of process design that a team can use to
create different products and provide beautiful user interfaces to users (Pan and Wang 2019).
UX design will make the user experience simple so that people can perform several tasks
without noticing what tool they are using.
What is a popular tool that can be used to design the workflow?
Following tool can be used to design the workflow:
 Ideate- Balsamiq, illustrator, keynote.
 Discover - Google docs, Trello, Wufoo.
 Prototype – Photoshop, InVision, Sketch.
What is the difference between information architecture and user experience?
IA or information architecture can provide a navigation tool that is helpful for a user
to search and obtain every information while user experience provides the experience what a
user can get (Frederick et al. 2015).
Explain how you can change the design for a few famous websites such as amazon,
Instagram, etc.?
This is one of the tricky questions, and an interviewer needs to it. Amazon is one of
the popular websites that every person use every day. A person needs to very careful while
changing the design (Orlova. 2016). The changes can be done from the user and merchant
perspective. Changes can include user search and search result. And these changes can make
an easy interface for the merchants.
Please explain the design process of a mobile app?
The design process is:
Discover: The aim of developing a mobile app is for buying and selling various
products. To develop this app, a person needs to research and study the diffract website and a
mobile app such as amazon and determine what the most important thing a user can get from
this app (Brhel. 2015).
Define: To develop a mobile app, a person end to end use case for various functions,
storyboards and site map.

4USER EXPERIENCE DESIGN
Ideate: a person must develop a wireframe for different use cases and provides the
application flow.
Prototype: This is the most important aspect where a visual design was developed.
Implement: Create tests ideas and measure the performance.
What do you think about skeuomorphic vs flat design?
A skeuomorphic design must have an appealing user interface while a flat design
provides interface less design that provides an unobtrusive and clean design (Canziba. 2018).
How do you know your design is complete or not?
The interviewee needs to explain this question as per their views.
Provide a list of UX designs that inspire you?
Some of the popular UX designers are:
 Bo Ren (Facebook)
 Frank Yoo (Lyft) Daniel Burka (Google Ventures)
User persons:
After gathering evidence from the research, two user persons are admin and a visitor
who is finding a treatment. A user can search for the treatments and admin can search for a
customer and stylist.
Scope Plane:
This is an interactive computer system. This system can work with any device. This is
user-friendly. This system has everything that every user want (O'Neil. 2015). Designer keeps
in mind this thing while developing this system. Every task involves the real-world
environment. The interface of this system is simple and responsive. Every user wants a
system that is easy to use, and the interface behaviour must be consistent. The consistency
was started while this system in the designing phase. This most important thing is the
consistency of this system. This website provides proper interaction with the user. Every user
can see every legitimate dialogue and important, relevant information (Nagel. 2015). A user
can get confused easily with irrelevant content. While developing this website, the designer

5USER EXPERIENCE DESIGN
keeps this thing in their mind. The designer uses simple English that every user can
understand.
Most of the customer concentrate on the treatment only. They are not the concern of
using a different tool and the interaction with the applications. They are already frustrated
with their problem and searching a treatment. If a customer sees more complexity to find
their solution, they will find a different website (Mullins. 2015). A designer always focused
on this thing while developing this system. A customer can get the answer immediately when
they asked for.
After completing every task, this system will display a success message that can help
a customer to assure that their job is done successfully (da Silva, Silveira and Maurer 2015).
A customer can have evidence after completing a task. A customer can get a confirmation
message when they book a treatment.
Navigation is the most useful features on this website (Ferreira. 2016). A customer
always prefers simple navigation on the website. Every page in this system provides a page
number and titles. Other things such as history, overview and site map is available on the
website that can help customers.
Only a customer knows their needs and the system offers the solutions. In this system,
a customer can fill only essential information and the rest of the field they can leave empty
(Moore et al. 2017). The basic information is required on the home page. In this system
developer also add only essential information on the front page. A customer should get every
type of help while they are navigating the website. This system provides a complete user
guide that can help a customer to browse the website efficiently (CHAUVIN. 2019). Apart
from the user guide, the customer can directly contact admin or stylists and get help.
This system errorless in every situation; this website can handle user loads and
provide errorless solutions. At a time, many customers can use this system (Merriam and
Tisdell 2015). In case of any system error occurs, this system will display a message an error
message in simple English language and provide the actual problem and offer a solution.
User stories:
 As a user, I need skin treatment so that I can cure acne.
 As a user, I want to see my treatment history so that I can choose the next treatment
plan.

6USER EXPERIENCE DESIGN
Structure Phase:
In this project, this section provides the navigation structure. When a customer visits
the website, he/she will see a home page first. To use this website, they need to login first. In
the home page, they can find customer login options (Lin and Li 2016). After clicking on
customer login, they will be redirected to login/registration page. A new customer can
register themselves by providing their email or phone number. Apart from a phone number or
email, they can log in by using their Facebook account and google account. After successful
login, they will redirect to the search page where they can search for a specific treatment.
From the search page, they can see their treatment history (Amir. 2018). By click on “view
your treatment history” option on the search page, they will redirect into the history page. In
the history page, they can see their entire treatment history. After selecting a treatment, a
customer can place an order. When a customer place the order website will redirect to the
payment page (Lachner, Fincke and Butz 2017). In the payment page, a customer can
purchase a treatment by providing their card details and billing address. Admin plays a vital
role in this website. An admin can log in into the system by providing their email and
password. In the home age, admin option can be found. After login, an admin can search for a
customer or stylist by providing their name. A stylish also plays an important role in this
website. A customer can find stylist login option at the home page. By providing username
and password (Karr. 2015). After login, a stylist can view and edit their profile. The site map
for this website are providing below:
Sitemap:

7USER EXPERIENCE DESIGN
Skeleton Plane:
Implement high fidelity wireframes:

8USER EXPERIENCE DESIGN
Figure 1: Home screen of TreatWithCare.
(Source: Created by author)
Figure 2: customer login page of TreatWithCare.
(Source: Created by author)
Figure 3: Customer Search Page of TreatWithCare.

9USER EXPERIENCE DESIGN
(Source: Created by author)
Figure 4: Treatment History Page of TreatWithCare.
(Source: Created by author)

10USER EXPERIENCE DESIGN
Figure 5: Customer Payment Page of TreatWithCare.
(Source: Created by author)
Figure 6: Stylish login page of TreatWithCare.
(Source: Created by author)

11USER EXPERIENCE DESIGN
Figure 7: Stylish Profile of TreatWithCare.
(Source: Created by author)

12USER EXPERIENCE DESIGN
Figure 8: Admin Login page of TreatWithCare.
(Source: Created by author)
Figure 9: Admin search for all customers/stylist page of TreatWithCare.
(Source: Created by author)
Wireframes Testing:

13USER EXPERIENCE DESIGN
This is the home page of TreatWithCare.com. When a customer browses this website,
he/she will see this page first. To use all feature of this website, they need to login first. To
log in a needs to click on customer login option on the home page.
After clicking “customer login” option, this page will pop up. A new customer needs
to register first. They can register with Facebook, Google or Email id. An existing customer
can log in by providing their email or registered phone number. A new customer can get
reward points after registration. After login, a customer will be redirected to search page.
In this page, a customer can search treatments that TreatWithCare offers. A customer
can find suitable treatment and provide payment. A customer can also view their treatment
history from this page. They need to click on view your Treatment to get their search history.

14USER EXPERIENCE DESIGN
After choosing a treatment, a customer will redirect to the payment page. From payment
page, a customer can pay for the treatment. The payment page is providing below:
This is the user interface of payment page. A customer can pay by using their cards.
Different types of card are acceptable in this system. A customer needs to select their card
and provide the card number. In the next line, they need to provide the name. In the expiry
date section, a customer needs to provide the expiry date of their card. In the security code
section, a customer needs to provide a CVV number of their card. After completing every
detail, they need to provide their address and place order.

15USER EXPERIENCE DESIGN
After clicking “view your treatment history” customer can see this page. This page
will display every old treatment records. Old treatment history will help a customer to choose
a treatment for their current problem.
A stylist can log in in this system. After clicking on stylist profile at the home page,
this page will come up. After providing the user name and password, a stylist can log in to the
system. A stylist can help a customer and solve their problem. A customer can direct talk

16USER EXPERIENCE DESIGN
with a stylist. Stylist user name and pass is generated from the admin. Admin generates the
user id and password and provides credentials to a stylist. After login to the system stylist can
check their profile.
This is the profile of a stylist. After a successful login, a stylist can access this page. A
customer can also view this page and send messages to stylish. This page provides every
detail of a stylist such as their full name, what type of work they perform, their phone
number, email address, their permanent address, birthday and gender.

17USER EXPERIENCE DESIGN
When an admin clicks on the login option at the homepage, this page will pop up and
asks for their registered email and password. A person can sign up first to join as an admin.
By clicking on the signup option, a person can register for an admin.
After successfully log an admin can search for a particular customer or stylist. By
providing a customer/stylist name and admin can search a customer or stylist.

18USER EXPERIENCE DESIGN
Surface Plane:
Implementation of style tiles and guides:
Style is a special type of design that deliver website interface elements with the help
of colour, font and different styles collections along with a site map.
Homepage:
This is the home page of the website that can attract many customers. The clear,
colourful font is used to develop this system. A customer can get only essential information
from this page.
Customer Login page:
This is the login page of a customer. TreatWithCare is the brand name. Simple
English and colourful font are used to develop this page. A customer always prefers an easy
and attractive interface. The login button is separated so that a customer can easily login after
registration.
Search Treatment Page:
In this page, bright, colourful font and a background image are used. A customer can
easily type the treatment name at the search box and press the search button. Search button is
visible on this page.
Admin Login page:
The interface of the login page is easy to use. Login page displays the email form and
password form so that every admin can easily login.
Customer/stylist search page:
In this page, the search box is clear and visible. It will help an admin to search
customer or a stylist by typing their name.
Payment page:
The payment page is most attracting page among other pages. In this page, every
option is visible so that every customer can make a payment without any problem. This page
can hide the card number and security code to protect user privacy. In the clear text box, a
customer can provide their billing address.

19USER EXPERIENCE DESIGN
Stylist Profile:
This is an attractive page for every customer. This page will display the stylist picture
with their information and their rating also visible on this page.
Conclusion and Recommendations:
Thus, it can be concluded that utilizing Jesse James Garrett’s methodology is the best
option for this project. After completing this project, most of the student can learn UX design
principles and practical approaches. This website of a perfect example of an accessible
website for any reason. This system is available for every user. A customer can use this
website through their desktop, mobile and tablet both device. The layout of this website can
be adjusted automatically as per the screen size. When a customer browses this website in
their mobile phone, the explicit version of this site with the simple and clean interface, clear
hierarchy and less clutter will appear. The main usability of this website is its clarity. Every
customer can clearly view every object. Using simple English and easy navigation system
will help every website visitors.
Recommendations:
 A designer needs to include a rating system.
 A designer must add a cart system in this website.
 An organization must provide their social media links.
 They must add about us section.
 The website must have a service section that can provide every service they offer.
 The more attractive picture can attract more customer.
 They must provide careers option on this website so that interested people can apply
as an admin or stylist on this website.
 TreatWithCare must provide attractive offers for new and existing customers.

20USER EXPERIENCE DESIGN
References:
Amir, N., 2018. UX Design Process Strategies for Website success (Doctoral dissertation,
SCHOOL OF BUSINESS, SIAM UNIVERSITY, BANGKOK, THAILAND). ( )
Brhel, M., Meth, H., Maedche, A. and Werder, K., 2015. Exploring principles of user-
centered agile software development: A literature review. Information and software
technology, 61, pp.163-181.
Canziba, E., 2018. Hands-On UX Design for Developers: Design, prototype, and implement
compelling user experiences from scratch. Packt Publishing Ltd.
CHAUVIN, A., 2019. UX test issues for website creation and optimisation (Doctoral
dissertation, KEDGE BUSINESS SCHOOL).
da Silva, T.S., Silveira, M.S. and Maurer, F., 2015, January. Usability evaluation practices
within agile development. In 2015 48th Hawaii International Conference on System
Sciences (pp. 5133-5142). IEEE.
Ferreira, A., 2016. Universal UX design: Building multicultural user experience. Morgan
Kaufmann.
Frederick, D., Mohler, J., Vorvoreanu, M. and Glotzbach, R., 2015. The Effects of Parallax
Scrolling on User Experience in Web Design. Journal of Usability Studies, 10(2).
Gray, C.M., Kou, Y., Battles, B., Hoggatt, J. and Toombs, A.L., 2018, April. The dark
(patterns) side of UX design. In Proceedings of the 2018 CHI Conference on Human Factors
in Computing Systems (pp. 1-14).
Karr, A., 2015. UX research vs. UX design. interactions, 22(6), pp.7-7.

21USER EXPERIENCE DESIGN
Lachner, F., Fincke, F. and Butz, A., 2017, September. UX Metrics: Deriving Country-
Specific Usage Patterns of a Website Plug-In from Web Analytics. In IFIP Conference on
Human-Computer Interaction (pp. 142-159). Springer, Cham.
Lin, J. and Li, J., 2016, May. An Effective User Centered Approach: Using Web Design
Framework to Support User Experience Design of Interactive Multi-functional Product.
In Proceedings of the 2016 CHI Conference Extended Abstracts on Human Factors in
Computing Systems (pp. 3129-3135).
Merriam, S.B. and Tisdell, E.J., 2015. Qualitative research: A guide to design and
implementation. John Wiley & Sons.
Moore, R.J., Arar, R., Ren, G.J. and Szymanski, M.H., 2017, May. Conversational UX
design. In Proceedings of the 2017 CHI Conference Extended Abstracts on Human Factors
in Computing Systems (pp. 492-497).
Mullins, C., 2015, July. Responsive, mobile app, mobile first: untangling the UX design web
in practical experience. In Proceedings of the 33rd Annual International Conference on the
Design of Communication (pp. 1-6).
Nagel, W., 2015. Multiscreen UX design: developing for a multitude of devices. Morgan
Kaufmann.
O'Neil, F., 2015, July. Target data breach: applying user-centered design principles to data
breach notifications. In Proceedings of the 33rd Annual International Conference on the
Design of Communication (pp. 1-8).
Orlova, M., 2016. User experience design (UX design) in a website development: website
redesign.

22USER EXPERIENCE DESIGN
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.
Tomlin, W.C., 2018. UX Optimization: Combining Behavioral UX and Usability Testing
Data to Optimize Websites. Apress.
Yesilada, Y., Brajnik, G., Vigo, M. and Harper, S., 2015. Exploring perceptions of web
accessibility: a survey approach. Behaviour & Information Technology, 34(2), pp.119-134.