Chris Bell Chris Bell 'A business that makes nothing but money is a poor business.'
- Henry Ford

About Me >>   Master's Degree >>   IT-649 - Interface Design for Websites

SNHU - IT-649 - Interface Design for Websites
Written by: Chris Bell - January, 2016

Spa Website Redesign Proposal - Wireframes and Prototypes

Spa Website Redesign Proposal

At Creating Visits, we're excited to begin working on the Spa Website redesign with you, but there are many things to accomplish before we begin working on the website. First, we interviewed 3 of your customers to find out what they liked and disliked about your current website. It's most important that we understand the difficulties your customers are experiencing before we try to make changes. We will also discuss the layout of your website by using a site map so you understand where each page leads. The last thing we'll discuss is our proposal and how we operate with your company throughout the entire design process.

Customer Interviews

During the interviews we discovered that your customers are having trouble navigating to your contact information, list of services and prices, and the appointment schedule. After speaking with them it was clear to us that they wanted a more user-centered design that interacts with them. In order for your company to book an appointment through your website, you will have to have a clear path to your phone number or a form that allows the customer to book an appointment online. In fact, 70% of your customers wouldn't mind giving you their email address and phone number in order to book appointments and send reminders when the appointment is close.

Our Approach

More often than not, customers go online in hopes to complete their task right then and there. They want to compare 2-3 spas to see the difference in prices and available times for appointments. They might even want to see the staff to choose a particular masseuse that fits their ideal description of a massage. Our approach is to look at your website from the customer's point of view and determine what additional functionality it will require from there. Your current website looks beautiful, but it lacks functionality and navigation. In fact, there wasn't a single customer that complained about the design or look of the website. They simply wanted more features for an easier way to book an appointment.

Proposal

In our proposal to you we'll provide you with details of what we want to change and add to your website for you to approve before we begin. It will contain each stage of the project, and your approval to move forward, so that you're involved in the growth of changes. We want to hear your comments and feedback so that we don't head too far down the wrong road. For instance, we'll create the new form with a calendar in order to book appointments online, then ask for you to review the design and test the functionality before we continue doing the work. Changes to the form will not result in additional costs.

Our proposal will also include a site map and a few wire frames that allow you to see how your new website will be structured. Your customers mentioned that they had a hard time finding your contact information and appointment schedule, so we will be sure to tailor the website around those points. The site map won't show you any changes in design, it's meant to give you a layout of each page to show you how it will be easier for your customers to use. These days, websites are built based on user experience which is why we already interviewed your customers and plan to conduct further research throughout the design process.

There is an example of a site map below for you to understand why they are important to create and use during the design process. This is an example of a previous job, not yours. We'll be happy to work with you, and encourage your feedback throughout each portion of design, so that we can move to the next step knowing that we have your approval beforehand. There needs to be a certain amount of teamwork between us in order to make you happy with the end result.

Sitemap Example

Spa Sitemap Example

Our proposal will be detailed with descriptions, pricing, completion dates of each stage, payment schedule, and much more. We'll put all of our cards on the table and answer any questions you have before we begin in order to avoid confusion later on. We also make sure to be up front about the work we'll complete and the amount of cooperation we expect from you as the customer. You will need to help us along the way and you might have additional features that you think of after signing the proposal. In those cases, we'll have to adjust the scope of work along with the cost for the extra services.

Wireframes and Prototypes

At Creating Visits, we think before we act, we create rough drafts before final copies, and we create prototypes, in order for your company to give us feedback before we move to the next step. We provide wireframes and prototypes for you to examine and discuss with us before we create the final design. Wireframes are an industry term so I'll explain them in more detail below, but prototypes are self-explanatory. I'm going to discuss both parts with you before we accept any money for the job because we want you to feel secure spending money with our company before you have to write a check. After seeing the sitemap in our proposal introduction I hope you're excited to learn more about the multiple benefits of both wireframes and prototypes.

If you recall, the sitemap had a layout of about 10 pages and showed the hierarchy to make it easier on the eyes. Instead of building each page in a design program, we like to sketch a few drawings on paper with pencils and crayons. First of all, it can take hours to program a navigation bar, it can take hours to create tables and color schemes, and it can take more time to make changes. Therefore, we like to start in the most simplistic way possible, with crayons. We can choose to keep everything in a square format, or we can use rounded corners and circular tabs, and much more in an easier format.

There are a few sketches below that you can analyze in order to give us feedback and direction for the final project. Your feedback here is crucial to us because we have designed numerous websites in the past and each company has particular likes and dislikes, so please take the time to give us some solid feedback and tips to move forward. More feedback is better than less!

Spa Wireframe Example

Prototypes

Once you've approved the sitemap and given us more direction by choosing your favorite wireframe above, it's time for us to create a more serious design for you, a prototype. We now have a clear direction that includes customer feedback, your company feedback and our expertise, to create a well-designed prototype. We could have spent endless hours creating 3-4 prototypes without any clear direction, however, 3 of those prototypes would have been a waste of our time. The benefits of our process allow us to create one prototype with a 90% chance of success. There's still 10% of improvement that will come after the prototype is built, but at this point in the process, it's very unlikely that you'll tell us you hate the prototype and to start over.

Now, the prototype is far from the last step in the process of design work. As I said earlier, programming takes hours and hours of time even after we've decided that we love the look of the prototype. That's why we continue to ask for your feedback and approval before moving to the next step of the process. The prototype will look like a website page, however the links, forms and content won't be functional or complete. We'll be turning the wireframe sketches into a computerized design for you to see and approve. Very little programming has taken place to this point.

At Creating Visits, we value our customers and their feedback so we ask hundreds of questions and use the responses to our advantage. We aren't going to tell you everything that we know about programming and designing, and tell you want you need to build for a website. We take small steps with you and your customer's thoughts in mind to make sure we create exactly what you and your customers want. You'll be more impressed after going through our process than you would be if you saw some amazing flashy design that we created for our own desires instead of yours. In comparison, imagine you are redesigning your kitchen and we're the contractor that will put everything into place for you after you choose what you want. We'll help you along the way, but we don't want to create something that we like, we want to create something you like.

Usability

After we've created the sitemap, wire frames and prototype we need to have users test the functionality before we launch the new website. Testing the system is almost like proof reading a research paper before creating the final copy that will be graded. First, we will determine what types of users will be using your website, which we consider user analysis techniques. Next, we will conduct the tests in a few ways to determine what we consider to be the best testing approach for your customer's ideal profile. If we use spa clients we'll get better results than if we use golfers, so we need to have a process of selecting certain candidates for each test. Finally, we'll select the testing approach and the candidates for the usability testing portion of the project. We plan to use the results to find and fix errors, create additional functionality, and to gather solid information that helps us decide how well the website will work with your customers on a day-to-day basis.

User Analysis Techniques

In order to gain solid information about the website we need to pick candidates that meet the descriptions of your potential clientele. We'll start by conducting user interviews to decide who we'll use for the tests. I don't think it will be hard to find participants because we'll offer them compensation for their time. We want to dig deep into your target audience, build user profiles that describe your clients, and use that information to pick each candidate for testing.

We will also create a survey that potential interviewees can fill out in order to tell us if their user profile is worthy of being in the testing process. The surveys will be designed in multiple choice to quickly determine if the person meets the criteria we need for our research. For instance, we want all of the interviewees to have been to a spa previously or else their answers won't be educated.

One of the first tests to conduct will be to have the participants analyze the design elements of the prototype and wire frames. We want to gather information that's consistent, good or bad, and use it to our advantage. If multiple people dislike the logo we'll ask more questions to understand why they don't like it, and possibly change it. It's best to have a few options in front of each person so that they can pick pieces from each that they like and dislike.

In this case, we're going to use the qualitative approach instead of the quantitative approach. Since this website is small and it's a spa, I believe quality trumps quantity, so we'll be looking for results that dig deep into the design and functionality. The quantitative approach uses more multiple choice questions along with many more candidates, to determine less specific information about the website.

We will conduct these meetings in person to get a feel for how each person responds to the website and functionality. Sending emails is less personal and may leave us scratching our heads at some of the answers without a chance to follow up with another question. Based on your spa website I think it's best to sit down and listen to people and we'll get more specific results. We will also need less people to get the same results which costs less money.

We will set up an area for the participants to answer the questions and test the system. That way we have all of the hardware and software needed to conduct a solid test. We'll set up a list of questions to ask and, while we can ask follow up questions to responses, we'll make sure to stay on track. We plan to use a moderated technique in this process, again, to get more specific replies to our questions. Automated techniques also work well, but not as well in this scenario. We'll have a list of questions to follow and we'll let the user answer each question in detail before moving on.

As you can see, we carefully plan each step of the website design process in order to build a website that you and your customers both enjoy equally. We will have to consider compensation for the participants that spend their time with us during testing. If paid, they will be more apt to stay longer, answer more specifically, and focus on being there instead of wondering when they can walk out the door. The moderator will also keep the participants updated with how far along in the test they are so that they can see the end point.

Usability Testing Selection

After building the prototype of your website we want to see how your potential customers perceive it before we continue forward. Once we have those results we'll discuss them with you to determine if there are changes that we need to make. This will give us some solid information about the look and feel of the website similar to the customer interviews already conducted. We found out that your current customers didn't like certain portions of your website that you may not have considered. We hope to hear those responses before we put the time into building the full website.

Planning and researching are how we build websites. We can build five websites in five days, but they won't be as well designed because we wouldn't be considering the users of the websites. We would need to make multiple assumptions as we design, and then back track to fix things that we never knew would turn out to be a problem. When we have questions we ask, and when we want more information from your potential clients, we ask again. We want to keep you in the loop during this process, because if we keep you in the dark you may not like the end result. Likewise, we need to know what your customers want and expect so that we can design exactly what everyone asked to have.

End of proposal... Start of the project!

At Creating Visits we believe your website is an intermediary between you and your customer, which means we need to speak with both parties before we can develop the intermediary. Your Spa offers services that your customers want, so you need to be clear and honest about your services in order for your customers to be impressed enough to leave a positive review. Your website needs to be a replica of your business. Imagine walking into a Spa, speaking with the receptionist, booking an appointment and getting a massage or facial. It's important that we create the same atmosphere on your website because they are looking for the same experience. Therefore, we interviewed some of your customers to get their feedback about the current layout and problems with your website, and used their feedback to create a better user experience.

Customer Reviews

The interviews went well because we gathered useful information that helps us take the next step in the process of building your website. As we figured, your customers spoke freely about it being difficult to find a phone number on your website. They also mentioned that neither your services nor prices weren't mentioned in clear view. Very few customers complained about being able to book an appointment online, but we asked them about the option and many of them agreed that it would be a nice feature. We shouldn't force your customers to login and give their personal information because plenty of people in the world are still uneasy about entering personal information into online forms. However, we can make it available for those that do want to use it because it will also save you money when customers book online.

As you can see by the results of the interviews, your customers want an online replica of your physical Spa. When a customer comes to your website we want to greet them, show them your services and prices, show them a calendar of open days, and allow them to book their appointment online. The process saves the customer the time of calling and it saves you money by not having to answer the phone and enter the data into the computer yourself.

Customer Surveys

The survey results showed that your average customer is between the ages of 30 and 50, 80% male, and 60% want a massage when they visit you. We also discovered that none of your customers had an issue entering an email address to book an appointment, 60% of your customers would like their appointment confirmed via text and 70% would provide a phone number for text updates about their appointment. As you can see, this information is simple to analyze and helpful for us to use when building the website.

We want to keep your website small and easy to use. We want to direct customers to your phone number, services, prices and appointment book so that your website visitors quickly turn into paying customers. We can have a separate blog for you to post updates about your company, new website, new services and more, but we don't want all of that information intertwined with your revenue items because it may drive some visitors away.

Our process of building a website includes multiple steps that aren't always about how pretty the website will be. Instead we focus on user experience because that process turns visitors into customers. Currently, your website could be getting thousands of visitors with little conversions, because your customers have stated that they can't find your services or pricing, and dislike the navigation format. In order for your website to turn visitors into revenue we need to address exactly what they want and give it to them. We will design your homepage as if someone just walked into your store, then design the rest of the pages to mimic the real life experience as well.

Customer Profile

Customer Profile Web Design


Customer Profile


User Journey

Many of the customers said it was difficult to find the phone number on the website which means many of them would rather call than place the appointment online. This should be a 2-click process in order to make it as easy as possible for the user.

1. Enter the home page

2. Click on Contact to find the phone number:

Spa Contact Page

Mobile Version

1. Enter the home page and it forwards to mobile friendly page if applicable

2. Click the mobile phone button and it automatically calls the number set up in the HTML (href):

Spa Contact Page

Customer Experience Map


Customer Experience Map

Human Factors

Humans all like different things which can be measured by the fact that the US president is almost always voted in at 51% to 49% and never 100% to 0%. We all want different cars, houses, toys and devices, and we all want our children to have different lives. Human factors are considered in everything that's manufactured or created because humans will use "it", whatever it might be.

Starting in stage 1 below, the first thing we should do before building a website that humans will use is fact finding and research. If we figure out what humans have enjoyed in the past we can use that knowledge to figure out what they want in the future. We conducted interviews in the beginning of our process in order to understand the highest average of "likes" and "dislikes" your previous customers have experienced. It has proven to be an incredible tool to use throughout the rest of the proposal and design process thus far.

Humans all use different devices including desktop computers, lap tops, tablets and phones, which means we have to build the spa website in a responsive manner that allows it to be viewed in each device. This process is call responsive design and it matters because you want your website to appeal to all humans, not just those that use tablets. Humans also like to communicate with companies in different ways that include email, phone, online forms and even in-person. Again, we need to include all of the human factors possible in order to reel in as many clients as we can.

This process can be conducted annually or every few years to determine the new factors coming into play. Perhaps VoIP will become much more popular allowing people to communicate face-to-face easier than they can now. In that case we should update your website with a link that allows users to quickly speak with the spa through VoIP. Choosing to ignore a new piece of technology is, in essence, choosing to ignore an entire demographic of humans.

Most presidential speeches are vague instead of direct in order to appeal to a bigger group of people. As the speech gets more specific and direct the higher the possibility they will lose votes from groups of people. However, sometimes the speeches can be too vague leaving people wondering what the candidates' views actually are. They are scared of human factors influencing votes.

Your website has a target audience of 35-45 year old men, however we can still target women and men of different ages. Your target audience isn't as important as the accessibility of making an appointment in multiple ways. Your current audience might be 35-45 because you don't have up-to-date technology. Perhaps including tablet and phone accessibility will change the percentage range of your audience to more of a younger crowd that were previously turned off by your limited technology options. That's why we want to conduct interviews with your clients after the redesign has been live for a year. We may see quite a few differences in opinions based on the human factors that we altered by making changes. There might be additional changes we can discuss at that time.

We hope you've enjoyed our process of researching your customers and the human factors involved in designing a website that they will enjoy. We hope that you use this philosophy in your business as well because happy customers come back to give you more money!

Spa Site in Adobe Muse

Spa Site in Adobe Muse

Spa Site in Adobe Muse

References:

Grocki, Meagan (September, 2014). How to Create a Customer Journey Map
Retrieved from:
http://uxmastery.com/how-to-create-a-customer-journey-map/

Margalit, Liraz. (January, 2015). Designing for Different Online Personality Types.
Retrieved from:
https://uxmag.com/articles/designing-for-different-online-personality-types

UX for the Masses (April, 2011). 15 Useful User Feedback Questions for Online Surveys
Retrieved from:
http://www.uxforthemasses.com/online-survey-questions/