How to Redesign a Website, Using Adobe Muse?

 How to Redesign a Website, Using Adobe Muse?

In this project, there were three masters developed, for example, Master A, B, C. Master A is the Main Master. In Master B, it was used for different pages, such as, services, massage, facial, prices, schedule an appointment, team, Rolita, Brenda, and contact and confirmation page. In the Master C, it was used to design the Wireframe for each page on the site. Using the Master tool, it allows the designer to give names to each Master tool used for the site, for example, a master tool can design different components of the site, and it can be used as demonstrated in this project and separate pages for clients to easily see all the work done in one file as demonstrated in Muse.

Next, it had met the requirements of the client and users, designing the Wireframe and Prototype, which the Wireframe provides information about the architecture of the site and the Prototype provides information about the redesign of the site and the easy navigation process.

Therefore, the mastery skills apply to understanding and applying the technical knowledge to perform requirements, gathering techniques to assemble user and client requirements for the development of usable interfaces. Such mastery skill was developed through analyzing the importance of human factors in the design of graphical user interfaces, and creating a visually appealing web interface by applying user-centered design best practices, techniques, and principles. In addition, these skills had developed the appropriate web controls and design elements that align with user- and client-defined requirements, and developing a usability testing plan that incorporate commonly used approaches for testing, analyzing test results, and implementing improvements. On the other hand, the expectation was to meet the client requirements of the spa owner for redesigning the website, for example, landing page, contact page with form, and services introduction page. The landing page, contact page with the developing a form, and service page where the main idea of the redesigned site to meet the needs of the client and users. Appropriately, the redesign includes two of services page, for example, massages and facials. Each of them includes one page for each of the two services.  In these pages, they include a price of service and the length of time the service requires. Next, the staff introduction page is created to provide information about the two-staff member, namely, Rolita and Brenda. On the team page both therapists are added to give the user and client that opportunity to select either therapist, landing them of the choice of therapist to provide services to the customer; therefore, when the customers land on the team page they can decide on either therapist to service them. Each of the therapist’s pages was designed with HTLM Page, having similarity information for customers, such as, each page contains an availability calendar for the staff member, and scheduling page allows the users to schedule one or more of the spa’s specific services; therefore, if the user prefers a specific staff member for services, the page allows the user to choose that staff member. However, a registration page linked is created on top of each HTLM page, when clickable, it allows potential members to register. On the other hand, essential information about the customers were extremely important that the appointments, ask for the customer name, customer phone number, date of the appointment, time of the appointment, the service or services selected, the duration of the appointment based on the sum of all services and select a staff member.

The purpose of the surveys and interviews were used to design and develop the redesign of the website. With the information collected, the information was used in creating a prototype, using the Adobe Muse. In the prototype, it incorporates the user-centered design best practices and principles, and a visually appealing and easy to use, which meet the needs of the client and user requirements. In this report, the justification of the design and development of the redesigned website, which create  a plan for usability testing. The usability testing included each customer survey and interview. The survey results had provided information about the needs of the customer, such as, selecting an age group and gender to participate in the usability test, and a rating of average performance was  recommended to use in the usability test to compare the new and old website, and the type of service most used by users help create a HTLM page for the users, and the registration button was created because most customers are comfortable registering with their email, and in the scheduled appointments and the registration page, most customers prefer a text message; therefore, it was important to make sure all customers’ phone was collected through the registration, login and appointment page. Understanding the need of discounts, this information was great for marketing, increasing customers and economic growth. In the surveys, the gathering-information of the customers had provided information that allows customers to participate in the usability testing; therefore, it was easy to select a group on usability testing.

In the interviews, it had revealed the needs of the customers and client to redesign the site for easy and quick access to resources. Therefore, the phone number, services and prices were essential parts of redesigning HTLM pages. These pages had included designing and developing an scheduling an appointment with allowing day in advance to confirm or cancel link and one day advantage notice by email reminders of appointments and cancellations, therefore, the SaaS was created, contact including phone number, and designing and developing a page for each therapist so that customers can choose a therapist, and each therapists’ page included a business card, schedule appointments and available appointments, and designing and developing a registration and login were created for easy access to site and therapists, including surveys and interview question to update the website and keep customers informed about changes or updates or discounts of the services.

·         Persona

In the persona, it is recommended to add the interview questions and surveys’ gathering-information of the customer. Asking questions from the interviews and surveys will help the spa to better service the customers and meet the needs of them. It also provides information about the geography and demographics of the customers. 

·         User Journeys

The customers will enter the landing page, which was designed and developed with questions from the surveys and interviews to meet the needs of the customers. The landing page give accessibility to all the pages linked to the site including the need of customers and client from the surveys and interviews. In addition, customers can easy find all the information they need from the landing page and each page was created with the customers in mind.

·         Customer Experience Map

      It is recommended to create a customer experience map that illustrates the path a customer will take to complete the same task you identified for the user journey component. 

In the prototype, also included a Wireframe of each HTML Page; therefore, including the Wireframe in the prototype, the client can easily see the prototype and Wireframe from one file. Each page needs Wireframe plus the name of the page, for example, Home Page’s Wireframe, Services’ Wireframe, and Contact’s Wireframe. The Wireframes are designed, using the Master’s C in the adobe Muse.

Prototype

The pictures that are used in the index (Home Page):

The colors have a behavior and relationship that connect the users and the site (Color Psychology, n.d.).  Therefore, the colors that are used in the site, for example, green, orange, and blue (Color Psychology, n.d.).  The reason for green because it is an attractive color that is in the eyes of the globe, which this color is a normal color to the eyes (Color Psychology, n.d.).  It also symbolizes renewal, growth, balance, calm, harmony, and natural environment (Color Psychology, n.d.).   Next, blue was used because it is a popular color, meaning peace, and calm, intelligence, relaxation, and stimulate. Then, there is orange, meaning affordable services, with a combination of red and yellow, but red means energy and stimulation but yellow means happiness and cheerfulness. Therefore, the colors align with the organization’s mission and objectives.  It is the color that gives you shelter by not allowing you to sink into grief or disappointment (Color Psychology, n.d.).  It brings a high degree of positivism, always rejuvenating us in the most difficult moments (Color Psychology, n.d.).  The great and invigorating benefits of the orange color should be used every day, even if it is just a small object, like a mug or a pen, which we use in our daily tasks (Color Psychology, n.d.).  

The reason for the graphics is to connect users to the site. In this project, the graphics tell a story, it explains what the site is about and how it connects to the needs of customers. For example, the index (home page) as shown in figure 1. The browser size picture of a waterfall is a presentation of mineral springs. In figure 1, it provides the connection between the health of the water and customers. According to Visualization (n.d), visual media are increasingly generated, manipulated, and transmitted by computers, and when well designed, such displays capitalize on human facilities for processing visual information and thereby improve comprehension, memory, inference, and decision making.

In the index (home) page, the three below pictures are used so that users can click the picture for information on a subject, for instance, clicking services will open the page to the service page, and this page displays two types of services that customers can find information about either the massage or facial treatment. Once the customer click a subject, for example, the massage picture, it opens the page for a massage. The massage page provides information about a massage, price and minutes. On the page, there is a blue box that customers can click and open the facial pages as shown in figure 1.1. The purpose of the blue box is to design easy navigating around the site. When the facial page is opened, it provides detailed information, price and minute. Therefore, the customer opens either the massage or facial page, it provides prices and minutes, so that customers understand the price and minutes of the type of service they chose.

The home page also has a schedule an appointment page, and clicking this page, it opens to the appointment page and customers are given options to choose a spa therapist as shown in figure 2. The customers can arrange an appointment with either Rolita or Brenda, for example, a customer click Brenda to make an appointment, the page will open as shown in figure 3. In addition, when Brenda’s page is open, customers can click the click here text to schedule an appointment, and list of open appointments, allowing customers to know the days that can schedule an appointment, and a business card with the address, and a note allowing the customers to make an appointment by using the email address or phone. On the other hand, a Rolita’s page is set up the same way as Brenda to meet the needs of the customers and client. Each therapist page allows customers to chat with either therapist, which a live chat symbol is available. Therefore, customers are always connected to their therapist online. However, the contact page provides customers with valuable information, such as, a contact form, business card and map as shown in figure 4. Customers can find information on how to contact the Spa.

The Message and Facial Page were designed to give customers an idea of a relax and healthy feeling as in the message and facial picture. It provides a developed relationship between the customer and the therapists. Furthermore, the pictures demonstrate how they connect to the human factors. Moreover, customers can see how the services work to make them feel healthy. According to Human Factors and Ergonomics Society. (n.d.), human factors leverage fundamental knowledge of human capabilities and limitations, and the basic understanding of cognitive, physical, behavioral, physiological, social, developmental, affective, and motivational aspects of human performance to yield design principles; enhance training, selection, and communication; and ultimately improve human-system interfaces and sociotechnical systems that lead to safer and more effective outcomes.

Usability Testing Plan

Interview Stakeholders (Services, Phone Number and Schedule an Appointment)

Survey Stakeholders (Demographics, and Geographic)

Hypothetical Questions (Navigating the website, finding what you need and advantages and disadvantages of the site)

Literature Reviews (Navigating the website, finding what you need and advantages and disadvantages of the site)

Cognitive Process (Site Performance, Site Memory, and Site Activity)

Social Environmental Relationship Process (Motivation, Goal, Success)

Environment and ecosystem Process (The impact of the website environment and customers’ activities, and how the customers feel about their surroundings, and interconnection with the system)

Evaluation Process (causes and effects of the site, qualitative (reason, opinions, and motivations) and quantitative (numerical analysis and computational techniques).

Decision Making Process (identify the decision, gather information, identify alternatives, weigh the evidence, choose among alternatives, take action, and review your decision (Mass, n.d.).

Training and Development (teaching and developing skills)

References

Color Psychology. (n.d.). Green Color Psychology and Meaning. In Color Psychology. Retrieved December 23, 2016. From http://www.colorpsychology.org/green/

Color Psychology. (n.d.). Orange Color Psychology and Meaning. In Color Psychology. Retrieved December 23, 2016. http://www.colorpsychology.org/orange/

Color Psychology. (n.d.). Orange Color Psychology and Meaning. In Color Psychology.

Human Factors and Ergonomics Society. (n.d.). Human Factors: The Journal of the Human Factors and Ergonomics Society. In Human Factors Ergonomics Society. Retrieved December 23, 2016. From http://www.hfes.org/publications/ProductDetail.aspx?ProductID=1

UMass. (n.d.) Decision-making Process. In UMass|Dartmouth. Retrieved December From http://www.umassd.edu/fycm/decisionmaking/process/

Visualization. (n.d). Main Page. In Stanford. Retrieved December 23, 2016. From http://web.stanford.edu/class/cs448b/cgi-bin/wiki-fa16/index.php?title=Main_Page