Current tourist landing pages lack a user-friendly, visually engaging, and responsive design for the millennial audience. Users face challenges with slow loading times, overwhelming designs, and limited live event options, hindering efficient trip planning. This project aims to develop a solution that provides a seamless and interactive platform, catering to the preferences of millennial travellers and enhancing their overall exploration and decision-making experience.
To ensure successful materialisation of a user-centered design project, it is imperative to abide by a Project development life cycle. While there are many applicable life cycles, the chosen life cycle for this project is known as the Design Thinking Life Cycle. The design-thinking framework follows an overall flow of 1) understanding, 2) exploring, and 3) materialize. Within these larger buckets fall the 6 phases: empathize, define, ideate, prototype, test, and implement.
Agile, known for its flexible, iterative approach to software development, and Design Thinking, which emphasizes understanding users' needs and creatively solving their problems. When these methodologies combine, they create a powerful framework for innovation that is both user-centered and highly adaptable to change.
The website in Qatar for COVID-19 vaccine registration has been found to have several user experience issues. Users reported the absence of FAQs or help sections for guidance, the system's failure to prevent incomplete submissions, and the inability to edit information post-registration. Additionally, users cannot select their preferred date and location for vaccination, leading to potential scheduling conflicts. Despite fulfilling its primary function, these design flaws result in a frustrating experience for users.
A survey with 18 questions was distributed to gather diverse opinions on the COVID-19 vaccine. Participants were categorized based on their vaccination status. The survey aimed to understand participants' views on the vaccination process, its difficulties, and any complaints. Additionally, demographic and contact information were collected for potential follow-up interviews. Google Forms was utilized for its data organization and visualization capabilities, details of which will be discussed later.
Selected survey participants were invited for follow-up interviews to delve deeper into their experiences with the vaccination process. Consent was obtained, and interviews were conducted via Zoom to explore their motivations, information sources, vaccination experiences, opinions, and suggestions for improvement. The interview questions were tailored based on the respondents' survey answers, and the discussions were recorded and transcribed for further analysis.
Note: The pie charts depicting the statistics for the answers we received can be seen below. However, not all questions are shown below.
- Users can register for a COVID-19 vaccine conveniently and at their preferred time.
- The system guides users through the registration process, ensuring accurate data entry and error correction.
- Data Requirements: Users input personal and medical information necessary for scheduling appointments.
- User Requirements: Novice users should navigate the system easily with basic reading and comprehension skills.
- Usability Requirements: Clear instructions guide users through the process and facilitate error recovery.
Once the users had been interviewed, a color-coded Excel sheet was used in the mapping of the data we received from the interviewees, which helped to simplify the analysis and identify any patterns or trends in their responses. Their answers were separated into a total of four categories representing different attributes. The attributes are pain points, task/activity, motivations, attitudes and environments. Special attention, however, was paid to the results that generated pain point responses as those highlighted flaws and struggles in the system that can later be improved upon.
The data analysis identified two main personas: Ryan Howard and Madison Gonzalez. Ryan, chosen as the primary focus, is not tech-savvy but values planning ahead. He's getting vaccinated due to obligations but has no concerns about the vaccine. He prefers online registration that mimics in-person hospital registration. His user story is: "As someone with a busy schedule, I want a straightforward way to register for a COVID vaccine so I can plan ahead."
The user journey map for Ryan highlights his interaction with the current system, which starts smoothly but quickly leads to frustration. Lack of clear instructions wastes time, navigating between different websites causes confusion, and the absence of options for vaccine location and timing disrupts his schedule. Overall, Ryan leaves the system feeling more frustrated than satisfied, reflecting a negative user experience.
The design phase prioritized creating features tailored to the needs of the primary user, Ryan Howard. His main requirements included easy registration for vaccine receivers, clear presentation of required information, and minimal redirection to other sites. To address these, the team implemented a system allowing Ryan to select his preferred vaccine location and schedule, streamlined data collection through an ID scanner, and ensured comprehensive data entry before proceeding. Additionally, a separate booking page for the second vaccine dosage simplified the process. By consolidating these features into a single downloadable application, the team aimed to enhance user experience and minimize confusion.
The team first brainstormed screen ideas and then focused on designing the navigation model for their application. They opted for a blend of hierarchy and hub-and-spoke patterns, favoring a mostly linear structure that branches toward the end. The structure begins with onboarding screens, including a welcome page and tutorial for registration and booking. Users then proceed step-by-step, choosing their preferred vaccine brand, selecting a facility, date, and time, registering information, and scanning their ID card. After completing registration and booking, users are directed to a home screen where they can schedule their second dosage, access FAQs, or view a registration summary.
Wireframing is essential for prototyping, providing a structural outline and feasibility assessment for each screen. In our project, three group members created separate wireframes based on the information architecture, which we then discussed in group meetings, considering feasibility, design guidelines, and our primary persona. By comparing flaws in each design, we drew conclusions to refine our approach.
In order to better understand the structure of the application and how one screen flows to another, each member also arranged their wireframes into wire flow diagrams. The links to these diagrams can also be found in the appendix.
To enhance user support in line with Nielsen's last heuristic principle, we've integrated FAQ screens and detailed tutorials. These sections offer step-by-step guidance and address common queries, enabling users to easily navigate the app and troubleshoot issues by moving from instructional content to FAQs with a simple click of the 'next' button.
This heuristic focuses on providing only essential information to users to ensure a seamless booking process. It emphasizes simplicity and clarity in the app's design and information presentation, avoiding user overwhelm by keeping details concise and straightforward. An FAQ section is available for in-depth queries, but accessing it requires user initiative. Additionally, the app is designed intuitively, allowing users to bypass tutorials if desired, as the necessary actions, buttons, and inputs are self-explanatory.
To ensure a seamless user experience, our application was designed to keep users engaged without navigating to external sites, maintaining a consistent design and aesthetic throughout. This approach includes uniform color schemes and a cohesive look and feel, aligning with our initial commitment to a unified application environment.
This is the quality of using language and concepts that are familiar to the user in order to make the application more accessible. Our primary persona Ryan Howard expressed frustrations with other applications for not making it clear what the inputs required of him are. For our application, we made certain to use simple, straightforward, and easy-to-understand language that makes clear what it is that the user needs to do and will guide them through the application smoothly.
In heuristics, granting users control over their actions is crucial. This includes providing the ability to undo and redo both intentional and unintentional actions. Our app ensures this by offering a back button on nearly every screen, allowing users to easily navigate back and correct any mistakes made in previous steps.
This application prioritizes user experience by ensuring clear communication of the system's state throughout processes. Upon completing the booking process, users are directed to a success screen displaying confirmation details and allowing actions such as printing, downloading the registration summary, or returning to the home page. This feature is available for both the first and second doses of the COVID-19 vaccine.
The Chosen method is the Think Aloud protocol, where participants verbalize their thoughts while performing tasks, for its efficiency and unobtrusiveness. This approach minimizes interruptions and biases, as users aren't questioned during the task nor need extensive background information, allowing for natural interaction with the prototype. It surpasses other methods like interviews or surveys by providing in-depth, actionable data, such as task-specific actions, without requiring much time from either party. Additionally, its adaptability to remote execution via platforms like Zoom enhances its practicality
Before initiating testing or participant recruitment, we had to create two scenarios tailored to our prototype's objectives. One scenario reflects the frustration of our primary persona, who couldn't select their preferred vaccination location. Consequently, in the prototype, users were provided with the ability to customize the vaccine's date, time, location, and brand.
In the initial prototype iteration, we omitted an option which we had discussed in our coursework report. We intended to provide users with the ability to reschedule their first dose appointment. However, we did not include the option to reschedule the second dose date because its timing depends on the consumption of the first dose. Failure to receive the second dose within a specific timeframe renders the first dose ineffective.
Once the scenarios and tasks were decided, it was time to recruit the participants so the tests could be started. The participants were recruited if they met one of the following conditions.
1. He or she has gone through the vaccine registration process in the past.
OR
2. He or she is going to register for the vaccine.
OR
3. Had issues with the previous vaccine registration apps.
OR
4. Going to book the second dose soon.
Participants underwent online testing via Zoom, where they first consented to the process, ensuring their information's confidentiality. They accessed the test through a provided Zoom link, engaged with a Figma prototype, and were informed of a known glitch requiring multiple button presses. Their task performance and thoughts were recorded, and these recordings were securely stored post-test. Following the test, they completed a modified System Usability Scale (SUS) questionnaire, originally developed by John Brooke in 1986, using Google Forms for easy submission and analysis. This questionnaire, adapted to fit the project's needs, included seven out of the original ten questions.
Based on the above feedback, we were successfully able to uncover some issues with the design of the application that violated the heuristic guidelines that were set in place.
Those errors pertained to:
We initially designed these screens to assist users who might encounter issues by providing relevant information about the application. However, we inadvertently created screens overloaded with text, deviating from our goal of a minimalist design. The dense layout and lack of spacing between instructions resulted in a cluttered and potentially confusing user experience.
We chose to address the issue of the cluttered screens and overflow of information by first properly spacing the tutorial pages, thus giving the screen a more organised feel to it. As for the FAQ, rather than displaying both the questions and answers for the user, we opted to only display the questions and make it so that the answers only display themselves when the user clicks on them thus the user will only have to see the information they want.
For the registration summaries, we simply added a back button to the screens where there weren't any, thus giving the user more freedom and control.
During the creation of the summary page, it seems that we had failed to include a reschedule button to take the user to the previous screen. This was a slight but important error to correct because, during the initial conception of the application, we placed emphasis on granting the users the freedom and control
Our project began with designing a user-friendly vaccine booking app, starting with low-fidelity wireframes on Miro to map out user flow and simplify the interface to a "Begin" and "FAQ" button. These initial designs helped us avoid common pitfalls when creating high-fidelity wireframes on Figma. Regular team meetings facilitated timely progress and helped address issues promptly. Despite time constraints limiting certain features like vaccine choice and rescheduling options, we plan future enhancements, including user feedback and possibly integrating a smoother list-based location selection rather than a map, aiming for continual improvement and user satisfaction.