Overview

The Client – Sea Breeze Beach Resort is one of the first hotels-turned-resort in the region having over 40+ years of service. The resort has a range of rooms and offers ancillary services like corporate recreational services and wedding ceremony services.
‍The Challenge – The client wanted to set up a website to appeal to existing and new customers and showcase the range and quality of services provided by them. Designing a responsive e-commerce platform that will allow customers to book a room or service provided by Sea Breeze was the given task.
‍Outcome – A usable and aesthetically appealing website creating a strong brand identity and responsive e-commerce online platform.
‍Length of the Project – 5 weeks
‍Software used – Figma | Balsamiq | Adobe Photoshop | Adobe Illustrator

Approach

Research

Research goals ‍

• Define people's common behaviours when booking rooms or services in similar websites.
• Define people's common behaviours when shopping online
• Determine what people like and dislike about the above shopping experiences.
• Understand industry standards and determine what visuals give a competitive edge in the industry.

‍
‍Market Research
I conducted research to understand user demographics, developments,opportunities, and challenges in the e-commerce hospitality industry. I collected information from articles and case studies to identify industry standards and user expectations.
‍
‍Competitive Analysis Research
I analysed some of the client’s competitors in the hospitality industry. I uncovered the strengths and weaknesses of client's direct competitors, Shelter Beach Resort, Chariot Beach Resort, and Esthell Village Resort. In addition, I performed a competitive analysis on Sheraton Grand Chennai and Four Points Resort which are indirect competitors of Sea Breeze Beach Resort.
‍
My competitive analysis produced the following insights:‍

• Social Media Integration: More users want the ability to visit those resorts visited by their favourite influencers. This not only helps the reputation of the brand, but it also engages the customer.
• Product Assistance: Customers expect website features that will help them make the right booking the first time, having pop-ups showing a better price for a day later and so on.
• Painless Checkout: Providing a 1-step checkout option has been a major asset in the e-commerce industry. Online retailers have already incorporated payment plan options such as ‘Pay at location’ and financing options.

Empathize

User Personas
I used all the qualitative data I gathered during the research process to create different personas.

User Interviews
Empathizing with the target audience being a crucial step in the design thinking process, I embarked on field research to interact with real customers. I connected with Sea Breeze Beach Resort’s past clients to learn more about their motivations, needs, and frustrations according to their experience in hiring the company’s services.
‍
Research Assumptions:

• Price, quality, and location are the most important considerations for users.
• Affordability and add-on services like free Wi-Fi and breakfast are the most important factors for customers when choosing which resort to book their stay in.
• Customers choose Sea Breeze Beach Resort for its affordability and quality.

After an in-depth analysis, I was able to identify several user needs:

1. Users prefer online booking to on-location booking.
2. Customers need to know that Sea Breeze Beach Resort provides high quality services.
3. Users need friendly helpful staff in resorts. Online, customer service options should be available and accessible to users throughout the browsing and checkout processes.
4. In case of change in plan, users want to be able to easily view options on the website to cancel the booking and request a refund.
5. Users expressed a desire to have a stress-free online shopping environment that is well-organized.

Intersection between business and user goal
I empathized with target users and identified their needs. I needed to define the solution. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I identified common goals, I could decide what product features were necessary for the prototype.

At this stage, I presented the user research findings and ideation results at a meeting with stakeholders involved - leadership from the business, marketing, sales, operations teams of the client. I recorded their reflections and confirmed alignment with the company’s mandate and vision. Engagement with stakeholders ensured keeping the leadership informed of design decisions. There was consensus largely among the leadership which provided motivation to proceed to the next phase of the project, information architecture.

Create

Information Architecture
I created a high-level list of site features to further define and guide the vision of the product. I conceptualized organization of information and data flow. I prioritized the features with supporting research to obtain seamless user navigation using tools like data categorization and labelling. I created a sitemap (refer Fig 4) which laid out the structure of data on the site, supplemented by navigation rules.

Interaction Design
I completed a task flow (refer Fig 5) and user flow (refer Fig 6) to imagine the ways a user might navigate through the site to achieve his/her goals. These methods allowed me to ensure that the information was organized in a way that is intuitive to the user.

Visual Design - Branding
‍At this point in the process, I began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Sea Breeze Beach Resort’s brand: modern, high quality and affordable.

With these adjectives in mind, I created mood boards (refer Fig 7) where I collected images of typography, logos, and colour schemes that aligned with the vision of Sea Breeze Beach Resort.

I brainstormed ideas for a logo, aided by the inspiration I found through research. I maintained elements of the current design trend to project a professional image as per sector best practices.

The result was a simple logo image of Sea Breeze Beach Resort by using Adobe Illustrator. In addition to branding, I defined the design patterns (user interface components) such as alert notification, header, footers, buttons, navigation and breadcrumbs. These patterns were reused throughout the website to create a consistent user experience. The logo was added to the UI Kit which was a comprehensive collection of all site components and UI design patterns (refer Fig 9). This kit, designed with Adobe Photoshop, was a constantly changing document as the website and brand grew.

Low-Fidelity Wireframes (Sketches)
In Balsamiq, I began the process of wire-framingwith sketches of different variations of the website landing page. During thisprocess, I thought about how the layout and content could be structured tosatisfy user and business goals in a technically feasible way. The sketch Ichose (refer Fig 10) served as aguide for my mid-fidelity wireframes.

Mid-Fidelity Wireframes
Guided by the sketches, I developed mid-fidelity wireframe (refer Fig 11) using Balsamiq. I created UI design patterns to outline all the design elements I wanted to incorporate into the website.

Responsive Design
At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website was well-displayed on tablet and mobile devices as it does in desktop size without interfering with the smooth user experience. I created responsive wireframes (refer Fig 12) for Sea Breeze Beach Resort’s key pages and began to flesh them out.

High Fidelity Wireframes
I applied the UI design and branding requirements to mid-fidelity wireframes in order to create high fidelity wireframe (visual mock-ups) using Figma. With all the visual details added, they were fully fleshed out (refer Fig 13). I continued the iterative cycle of developing, testing and updating the prototype.

Test

Usability Testing
The usability test plan directed engagement with appropriate participants to attempt realistic activities, by turning user goals into task scenarios. By doing this, I gained qualitative insights into why users had trouble.

Instead of simply instructing the test users to perform the task with no explanation, I preferred to supplement the request with a short scenario that sets the stage for the action and provides a bit of context for why the user was embarking on the task. During testing, I preferred to call the tasks “activities” to avoid giving the participants a feel that they were being tested.

I selected 15 participants to test both the mobile and desktop versions of the prototype's usability. The participant pool comprised of people between the ages of 25 and 65, belonging to different professional backgrounds, varying levels of technological literacy and career stages while also accommodating those who have accessibility challenges. A few participants met me in person to complete the usability test, while others did so remotely. The participants were given four different scenarios, each with a task to complete.

Task scenarios:

• Task 1 – Find an ocean view room and book it for a week.
• Task 2 – Find the refund policy and resort policy.
• Task 3 – Find the location of the resort and the different means to get there.

Once the participants completed the tasks, I measured the percentage of tasks that users completed correctly (user success rate) as a way to communicate a site’s overall usability. The resulting usability metrics helped inform improvements that were warranted to certain designs and set the design direction.

The success rate of this testing was 73%.

Affinity Mapping
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what had to be changed immediately and what could be saved for later.

Findings:
Overall, users navigated through the website without difficulty. 100% of users referred to the tasks as either simple or easy. Confusion most often stemmed from the fact that the prototype is not fully functional. More usability tests were planned to be conducted on other site features once it’s complete.

Recommendations:

1. Disable the call to action (Book Now) button until the user has selected a date on the booking page.
2. Make header more visible on every page. Add breadcrumb navigation and other elements that make it distinct from the search page.
3. Increase the contrast of text and background.
4. Make the links to the resort’s corporate policy and refund policy more conspicuous in the footer.

An iterative design is the best method to increase the quality of a user’s experience. I iterated the design and usability three times, since in some occasions, usability metrics decreased in some versions if a redesign was focused on improving other parameters. The overall usability reached 185% from the first to the last iteration, and the advancement per iteration was 24%.

After completion of testing phase, a status meeting was held with the stakeholders to discuss the recommendations that were collected from the testing phase. As there were no oppositions to the recommendation I moved on to incorporating the recommendations.

All the recommendations were resolved in a new iteration which was again tested with the same usability testing group (15 participants) to ensure that the fixes did indeed solve the problems and incorporated the recommendations. The test revealed that no new usability problem was introduced by the changed design.

Web accessibility
Aiming for an inclusive design, I incorporated the accessibility guidelines by including high contrast ratio, not relying on colour alone; clear labelling of forms, simple headings, consistent spacing, navigation and adding language options to include English and Tamil.

Develop

Project hand-over meeting
The stakeholders were briefed about the final developments to the project and their concurrence was received. I managed user experience design deliverables (UI Kit) and used Figma to hand off the design to the developer team after I made all necessary improvements to the prototype. Thereafter, I collaborated with the development team as and when required, to ascertain if the developed product efficiently showcases the design elements.