This is a product of a college coursework.
A spa business called “The Spa” was seeking to improve the usability of their website due to issues that both their clients and employees have brought up. A business proposal was created to convince the spa to redesign its website. When the company accepted the proposal, I had to study and research the demographics of the spa. To resolve their issues, a wireframe and a prototype of the redesigned website were presented to the company along with a report of the chosen design elements and results of the usability testing.
1. Customers could not find the information that they were looking for such as phone number, address, services, and prices.
2. Customers could not figure out how to book an appointment online.
A redesigned spa website that focuses on the experience of the user and enables them to easily navigate through the pages and book appointments online.
1. Business Proposal
2. Research and Analyze User Findings
3. Wireframe
4. Prototype
5. Report/Conclusion
The spa business is very client-oriented, so having a user-centered website design is vital for this business to thrive. The website is supposed to be able to provide users with spa information and allow them to view and book services. Unfortunately, spa customers who have used the current website failed to find the information that they were looking for, were not able to schedule appointments, and have been scheduled for the wrong services which makes the website pointless and unbeneficial to the business. Moreover, it frustrates clients and leaves them no choice but to try another spa that can easily cater to their needs. A new spa website design that focuses on the experience of the user will prevent the business from losing potential clients and profit.
Below is a list of what the proposed user-centered spa website design will offer:
1. The use of standardized design patterns
o The spa logo will beat the top left corner of the page
o Only icons that are well-known or common will be used
2. Clean and simple pages
o Fewer images and text on each page
3. Formatted text for users to easily scan
4. Effective visual hierarchies
o Each page will clearly display which information is more important than others by using the appropriate font type
5. Clearly defined pages
o Pages will be labeled and organized
o The page title will match what the page is about
6. The website will contain the following pages:
o Landing Page
o Services Page
o Staff Page
o Scheduling Page
o Contact Page
7. The website must accomplish the following:
o Account creation option to track calendar events and schedule services with specific staff members
Before redesigning the website, a design must first be reviewed with the company. There are two ways to show an accurate display of the website design which are wireframes and prototypes.
A wireframe is a sketch of what the website will look like. It shows the company the layout or the skeletal framework of the website. Wireframe tries to prevent any distractions by omitting colors, fonts, and images so that the viewer will focus on where objects are located (Faranello, 2016, p. 514).
A prototype is different from a wireframe whereas it shows how the website interacts with the user. Faranello (2016) describes it as “an interactive version of your wireframe, where the user can interact with your design using any number of scenarios and performing any number of tasks” (p. 515).
Both wireframe and prototype assist in helping the client or company in committing to a design of the website. It also saves time for both parties and prevents scope creep from happening. Orobey et. al. (2020) states that part of the risks in this case between designers and clients are the complications in scheduling, and the multiple changes in project requirements (p. 1). If wireframes and prototypes are not prepared before creating the website, requirements will not be set and there will be multiple requests and changes to it. Moreover, when multiple changes are requested, it will be hard to schedule a time for both parties to keep meeting up and there will be no clear understanding as to when the requests will stop. It is a form of communication that tells the designer what the client wants and tells the client what the designer can do.
It is critical to examine the results of the survey and interviews to determine how the development of the website can improve the overall operation of the business. The results are explained in detail below.
The survey demonstrates the demographics, perception, interaction, and preferences of the clients of the spa. It gives a clear understanding of how the website should be designed so it is catered to its customers. Below are the summarized results of the survey.
Studying the user’s preferences confirmed that the clients of the spa are most likely to use the scheduling page of the website. The users are comfortable and prefer the idea of using website services such as registering their email addresses and editing online appointments. This confirms that the new website must be able to provide them with accurate results such as being able to properly create, delete, and edit appointments without any complications. Regarding which services the users usually request appointments to, massage was at the top of the list with both massage and facial services right after it. The website must provide users with an option to choose either one or both services when creating appointments. They are also comfortable being contacted through email or text with 70% of them agreeing to phone number verification when using their mobile phones. It is certain that the clients prefer to use a functioning website over calling the spa directly for appointments.
After reviewing the results of the interview, clients raised a concern that the spa’s phone number, services information, and scheduling information are very difficult to find. All the customers that were interviewed repeatedly mentioned that they could not find the spa’s phone number. One client wanted to view the prices of the services provided but was not able to because the website was difficult to navigate. Another customer wanted to book an appointment online but also failed to due to the same reason. The clients ended up not booking any appointments because the website did not provide them with any information. In conclusion, the website must be altered to a user-centered design so that the clients can easily find all the information that they are looking for.
The User Persona, Customer Experience Map, and User Journey provide expectations of who the clients are and their behaviors to create a user-centered approach in redesigning the website.
USER JOURNEY: Appointment Scheduling
Scenario: User wants to book a massage appointment online with a specific staff member and receive confirmation of the appointment.
Action:
1. User goes to the homepage of the website
2. User clicks on “services” in the website navigation menu
3. User looks at the different services offered then clicks on “staff” in the menu to choose which massage therapist
4. User clicks on the “scheduling” page to choose a “massage” service and a staff member.
5. User inputs Name, Phone Number, Date of Appointment, Time of Appointment, Service Selected, and Staff member.
6. User receives confirmation of the appointment and decides to print it.
7. User looks at the navigation menu again and clicks on the “contact” page to check on the Spa Phone Number and Address
When I created the first wireframe, I reviewed it with other designers and realized that when it comes to designing websites, it is important to check the latest trends. I decided to take out the buttons in the navigation bar since most websites nowadays contain simple navigation bars with just the words. I took out the slider and replaced it with a hero image with a “Book Now” button in the middle. I wanted the structure of the website to be simple and clear so that the spa customers can easily find the information that they are looking for.
For the Prototype, I added an aesthetic graphic to the navigation menu to help users distinguish what page they are on.
This report explains the chosen design elements, user controls, human factors, and usability testing plan of the redesigned spa website. These components aid in the usability and user-centeredness of the redesigned website. The lab usability testing results finalized the redesign of the spa website and found that it is viable for launch.
It is important to ensure that the color scheme and graphics of a website match what it wants the users to feel. According to Ramani (2016), color therapy is used in public spaces without most people being aware of it. This technique has been used by multiple businesses because it has been proven to alter the moods of the customers when seeing the colors. In the redesigned spa website, warm colors are chosen for users to feel warmth, calmness, and relaxation. On the landing page, the images of mountains, massage, and facial are used so that the users can be enticed to experience the relaxation that they are seeing in the pictures.
.png)
The redesigned spa website prototype has clear navigation links in the navigation bar that users can click to direct them to the page. When users are on a specific page, there is an icon underneath the page name to let them know which page of the website they are on. It also has user controls such as buttons with typography and colors that are easy for the users to see and read. Babich (2018) mentions that “when users see a dimensionality of an object, they instantly know that it’s something they can press”. On the landing page, there are “Book Now”, “Contact Us” and “View Services” buttons so that users can quickly go to the scheduling, contact, and services pages. This helps users save time in navigating through the website.
Some of the human factors that were considered in the design of the prototype are the design layout and consistency of each web page which are focused on the mental models of the users. The navigation menu is horizontally placed at the top, so it is easier for the users to see and read since most are accustomed to looking at the top and reading horizontally from left to right when looking at websites. This prevents them from using too much cognitive load in the brain which leads to frustration. If the user’s mental models are not considered when creating a website, they may get confused about how the function actually works (Claypoole, 2021). This is why it is important to make sure that designers know the users’ perceptions and understanding in using technological products. Moreover, the buttons used on the website have a standard design that helps them understand that the button can be clicked and will take them to the page they want to go to. Each page also has a consistent design. The same background, navigation menu, color scheme, and layout are used for each page. The only different item is the content of each page. One of the goals of the redesigned spa website is for the users to comfortably use and navigate through the website. This will not be achieved if human factors were not considered in the design of the website.
The type of usability testing that will be used for the redesigned spa website is the Lab Usability Testing. This method requires a set of chosen participants which will be observed by test moderators to identify and assess user behaviors.
· Test Location: The Spa, Massage Room B (largest room) with 4 computers
· Number of Participants: 12 participants who are clients of the spa, chosen at random
· Number of Moderators: 5, 4 will observe each participant and 1 will observe the whole group
· Duration: 30 minutes per session, 3 sessions for the day, 4 participants per session
· Type of Testing: Participants will be asked to perform the following tasks using the prototype:
o Find the spa’s phone number
o Write down what type of services the spa offers
o Write down how much for a massage and how long the service is
o Write down the names of the staff
o Schedule a service with a chosen staff member
o Write down how much for a facial and how long the service is
o Find the address of the spa
o Go back to the homepage
o Write down what can be improved with the website
Rules: Each participant will be given a paper where they can write down their answers and they will have 20 minutes to answer all the questions. One moderator will observe each participant from behind without aiding them in navigating through the website. If the participant cannot perform/answer the task, the question can be left unanswered. After 20 minutes, the moderator will interview each participant and ask them questions about their experience.
After the Lab Usability Testing, some suggestions were made by the users. For the “Massage” and “Facial” images located on the landing page, a banner was added on top of the images for the users to clearly see the words on the images. I also made sure that some of the typography and elements such as the buttons were properly aligned before finalizing the design.
Babich, N. (2019, November 11). The Top 7 Usability Testing Methods | Adobe XD. Adobe. https://xd.adobe.com/...
Claypoole, V. (2021, January 5). UX and Human Factors: How to use psychology to empower the user. UX Collective. https://uxdesign.cc/...
Faranello, S. (2016). Practical UX Design. Packt Publishing.
Hotjar. (2021, May 13). 8 Usability Testing Methods That Work (Types + Examples). https://www.hotjar.com/...
Jama Software. (2021, May 12). Guideline: Requirements Gathering Techniques. https://www.utm.mx/...
Orobey, M. N., Alchinov, A., & Daudov, I. M. (2020). Theoretical aspects of prototyping. Journal of Physics: Conference Series, 1582, 1–5. https://doi.org/10.1088/1742-6596/1582/1/012068
Ramani, S. (2016, May 21). What You Need to Know About Color Therapy. Organic Spa Magazine. https://www.organics...
Any questions? Please reach out!
