TravelJab, is a website designed as part of a third year university project. The brief for the project, required a responsive website to be designed across both mobile and desktop, based around the topic of 'health'. TravelJab, focuses on making the process of identifying, managing and booking your travel vaccinations an easy and efficient process. TravelJab enables users to quickly and efficiently identify what travel vaccinations they personally require for their country of travel, carefully filtering all of their requirements such as their destination of travel, existing health conditions and more. Using this information, TravelJab identifies what vaccines you have had previously and what the user needs, with a direct option to book the vaccination there and then.
As a UX/UI project, the development of TravelJab, followed an extensive research process, which comprised of usability research and testing, which involved undertaking a series of user interviews. A thorough research and design process, ensured that TravelJab as a site, across both mobile and desktop, met the requirements of its target users and functioned effectively. View TravelJabs clickable desktop prototype here and the mobile prototype here.
A selection of pages from TravelJabs desktop site.
The research process
A key phase within this project, lied in the research phase and in particular, thorough research and analysis of the audience and relevant user groups. Throughout the process of identifying a suitable user group and audience, it was acknowledged that TravelJab had a fairly wide audience, consisting of those who may be frequent flyers, those who have not flown before and therefore have not had travel vaccinations, those with families and those who have medical issues. A series of user personas were drawn up and modelled to assume these roles, helping to identify through user journeys, what the users trigger is and what steps they take to ensuring that they achieve their goal. From this, page flows could then be drawn out for each of the users, which began to highlight what pages were needed within the site, in order to meet all of the relevant users goals.
Page from the TravelJab report documenting user journeys.
Page from the TravelJab report documenting user journeys.
Wireframe sketches and user testing
Exploration of sketched wireframes, was particularly useful in helping to explore potential solutions for all of the different pages within the site, both for mobile and desktop. Wireframe sketches enabled me to see what was working and what was not working, quickly and efficiently. Low-fidelity wireframes were then designed after initial sketches had been produced. The low-fidelity prototype, could then be user tested to examine areas where the site was not working. A video online demonstrating how to complete a successful round of usability testing, by Steve Krug, was particularly useful in helping to plan out the types of questions/prompts to ask the user and how to observe effectively throughout the testing. A link to the informative video, can be accessed here. The testing ultimately helped to reveal areas within TravelJabs site, the user was finding particularly confusing and hard to understanding, allowing for changes to be made.
Wireframe sketches exploring alternative solutions for the sites page designs.
Usability testing of the low fidelity prototype, showcasing areas where the site needed to be improved.
Desktop site
A thorough research phase, was followed by a thorough design phase, building off of user feedback to ensure the design of the TravelJab site, is well received by the intended user group. The site retains a fairly restrained look and feel, limiting the amount of design and illustration. However, the intention here was not to produce an aesthetically pleasing website. The aim was to produce a website which functioned correctly and made the ease at which travel vaccinations can be identified and booked, an easy process, which the design of the site ultimately achieves, through the use of a clear typographic hierarchy, good use of space throughout between elements and clear CTA's, helping to guide the user in the right direction, as showcased from the screens below and a walkthrough of the site.
TravelJab homepage filter system.
TravelJab country specific health and travel homepage.
TravelJab vaccine listings page.
TravelJab vaccine booking process.
Video walkthrough of the desktop version of TravelJab.
The mobile site
A key phase of the project, was to ensure that the design of the site worked effortlessly across both the desktop and the mobile. In other words, it was crucial to ensure the design was responsive across devices. To ensure that the design matched up well on the mobile site, as seen from a selection of screens below, the development of a design system and in particular, a component library was particularly useful in ensuring consistency across both devices. Elements such as typography, form fields and buttons were carefully recalibrated for the mobile version of the site, to ensure the user is not at a disadvantage when accessing TravelJab from their phone, rather than their computer.
A selection of screens showcasing the mobile site version of TravelJab.
The TravelJab report
