Multilingual Adventure Travel website
Project Scope & Strategy
Pangea Trails is a German youth and student travel company operating throughout Southern Africa, with their main market being German and Brazilian students. Although primarily focused on multiday adventure tours, they recently merged with Rock the Route CC which has both one day and multi day trips.
I was approached to redesign their old and outdated website and include their new product range from their merger. The website needed to be multilingual with emphasis on the multi-day tour pages.
My main UX efforts went into creating a modern, mobile first browsing experience and creating an easy to navigate user experience on the multi-day tour pages.
Note: Due to the size of the business and nature of tours an integrated booking system wasn’t plausible.
Create a multi-lingual design that will translate well over all three languages while keeping the varying users’ cultural preferences in mind.
Design a mobile first experience that allows users to easily navigate between sections and find out information on the multi-day tours.
Due to budgetary restraints I was not able to do research into the user personas of the different countries however I did identify the three main user groups. With the help of the stakeholders I was able to create assumption user group personas which helped set the foundation for the project.
The student/youth traveller who would experience the product.
Aged 18-25 and recently graduated, they would like to travel and experience Africa. They have travelled to numerous countries within their continent however they have always been family trips and have never travelled alone. They would like to experience their first solo trip but safety and security are of high importance and hence the decision for group travel.
The parent who would have consumer buying power.
Aged 45-55, they are seasoned travellers and are encouraging their kids to take the trip. Being in the middle to upper class they are not as price sensitive and have a higher concern for quality and safety of the trip. They have strong ethical and environmental beliefs and like to know the businesses they support share these same ethics.
Travel agents who would promote the company and its products at a global level.
Generally connected to a global travel agency, they are based in the local target market’s country, manly Germany and Brazil. Due to this global network they have high standards to uphold and only work with reputable and established companies that have a proven track record. Although they work with a variety of products, they prioritize group travel due to its profitability.
Design & Research
After the initial scope and strategy, it was decided to put high emphasis on a truly mobile first experience. The navigation was quintessential to this experience and so research was put into the information architecture and how best to display the menu.
During my competitor analysis I also identified one common usability issue that most sites had on their multi-tour pages, they had large amounts of information but no easy way to navigate between the information, especially on mobile devices.
I ran two card sorting tests during this project, the first was to discover and assist with the information architecture and the second was to decide on the visual design of the menu.
In the clients’ initial brief, they wanted all travel related offerings to be sub items of a main tour page however due to difference in offerings I advised against this. I proposed a card sorting exercise to eliminate any doubt and discover the best information architecture possible.
During these tests I discovered that none of the travel offerings were similar enough to group together under a main tour category and would be better off as standalone items in order to avoid confusion. Due to this and spacing inconsistencies from the different languages a sidebar hamburger menu was used.
*Note – Although the offerings were not similar enough to group under a main tour category, for the purpose of the quick link menu(see next section) they were grouped under “experiences”. The experiences page was on the same hierarchy level as the other offerings pages and only linked to these offerings.
To curb the UX issues with the use of a hamburger menu it was decided to design three quick link menu items next to the hamburger menu.
These would be home, experiences and contact icons. These icons would also be used on an app like mobile menu. The quick link items were to be icons and to avoid any language/cultural misinterpretation a closed card sorting test of 9 icons was done to select the best ones. After the card sorting exercise and selection of icons I performed a guided usability test to validate my research.
Multi-day tour pages
The multi-day tours have seven clearly defined sections for each page. During my design and exploration, I identified that there needed to be an easy and quick way to navigate between sections and so I came up with two concepts using a sticky top menu. The first was to use tabs for each section and the second was to use anchor points to scroll to sections. I created low fidelity mobile prototypes and ran a round of usability tests to see how users interacted with them.
The clear “winner” was the scroll to anchor points as the tabbed sections often confused users into thinking they had changed pages and so they would try use the browser back button. In order to prevent a secondary hamburger menu on mobile devices and to ensure quick and intuitive way to navigate a collapsible vertical menu was designed.
Kid Castle Recruitment
English teachers recruitment website
Project Scope & Strategy
Kid Castle Recruitment is a teaching recruitment team contracted to the Kid Castle Educational Institute, a language institution with English centres all over Taiwan and China.
I was contacted by the main stakeholder to develop a product whereby potential teachers could find out information on the recruitment process and apply to teach in China. The main stakeholder is based in South Africa and would primarily be recruiting South Africans but the product would need to be scalable so new recruiters internationally could join him. My main UX efforts were to create and refine a smooth and intuitive application process.
In order to accommodate all users and their varying technological abilities, the website needs to be simple and easy to find information about teaching English in China.
Emphasis needs to be put into a quick and intuitive application in order to obtain a high conversion rate and minimal paint points for the user. The application also needs to minimize undesirable user applications for the stakeholder.
Due to budgetary constraints and the size of the of the user market, I was only able to put my user research efforts into the South African market. I broadly defined three user personas.
John is 22 years old, educated and has grown up in the information age so he is comfortable with technology and using web platforms. He has just completed his degree in Business management and before embarking on a career in the service industry he would like to take a year or two to travel. With a student loan awaiting him he cannot afford to buy a ticket overseas so he has decided to complete his TEFL course and apply for jobs with airfare included.
Thando is 26 years old and has a degree in education, he has taught in a government school for the past three years but his pay and job satisfaction are very low. He loves social media and using technology he’s grown up with but has a steep learning curve when using new technologies. Thando has a friend that is currently teaching in China and is interested in joining her and exploring the potential of earning money and eventually immigrating somewhere in Europe.
Jenny is 45 years old with a degree in Arts, over the years she has hopped from job to job and has never found her true calling. She has a steep learning curve when it comes to technology and does not often browse the web as she find it difficult and frustrating. Jenny is not getting any younger and has started to worry more about her future stability. Due to this she has begun researching job options overseas where the potential to earn more money is higher.
Design & Research
In the initial planning and exploration of the project it was identified that a multi-step application form should be used in order to minimize mistakes and easily segment data types for users. Low fidelity prototypes were created to quickly iterate these ideas until a viable design was created. Once the initial build was created , numerous rounds of moderated and unmoderated usability testing was performed to identify any underlying issues.
Discovery & Implementation
Segmentation of form by data type created steps with varying lengths. In order to minimise mistakes, it was decided instead to evenly split data between steps.
Some input fields were unnecessary for certain users, so it was decided to use conditional logic to only display certain fields when necessary.
Users would often begin the application without reading the important fine print, this led to creation of a start page which explained all the details before the user even began. This made it easier to ensure the user knew they needed all their documents readily available for the application.
Users that were not eligible were repeatedly attempting to complete the application process. To minimise this, minimum requirements were added to the first page and error notifications were added using conditional logic when users selected options that did not meet the requirements.
A small percentage of users would exit the page before the form completion confirmation was received. This was either due to slow internet speeds or large file sizes being uploaded. In order to curb this, a notice was added to the bottom of the form to warn users.
Single product E-commerce store
GoElectric Solutions is small e-commerce startup importing electric bikes into South Africa. I was approached to design a single product e-commerce site which would be developed on Wordpress using a premium theme. The site will use WooCommerce as it’s platform so the user-journey of from the initial entry to purchase is fairly pre-determined.
Without any brand guidelines to go by besides a logo, I had to create the whole look and feel behind the concept. My main objective was to create a brand personality that would resonate the sentiments of a GO GREEN culture from a modern tech startup looking to make a difference.
Reflex Tents & Events
Single page informational site
Reflex Tents & Events had been operating for a number of years without any online presence, I was tasked with getting them online and designing a single page informational site whereby users could find out about their services and request quotes.
Instead of a boring stock standard single page website I wanted to create something unique that also took on the shape and feel of a tent. With Reflex’s brand personality being fun and vibrant I put a strong emphasis on its imagery so you could get a feel for the kind of environment they create.
Visual Media tech startup
Envisio is a visual media startup from Cape Town specialising in varying kinds of VR (virtual reality) tours. I was approached to assist them with the launch of their business and to create a landing page to introduce their brand to their target market.
Being a VR tech startup I wanted to create a unique visual and navigational experience that would correlate with the concept and movement of VR and it’s unique and progressive human-computer interaction.
With animated placeholder text
This pen is my take on creating animated placeholder text. Although fairly simple to fork I am trying to create a solution that is compatible for Wordpress and contact7 form. My goal is to create an open source solution that other developers can use.
The one UX issue with this design is web browsers autofill functionality. Currently the placeholder text is only being animated once its on focus so if a user has already input data and reloads the page then the previous data is going to be hidden behind the placeholder.
I know there are lots of ways to work around this but I haven’t yet been able to create a solution that is lightweight and cross browser compatible.
Sticky mobile menu
Secondary menu for quick navigation to tour sections
Each tour page is broken into seven sections and has a large amount of information. In order to easily navigate these tour pages I created this sticky menu to quickly navigate to each section and to give the user visual clues to which section they are on. Because this site is being designed with a mobile first approach, I didn’t want to create a hamburger menu as it would defeat the object of the quick navigation, therefore I decided to add a horizontal scrolling menu so all sections can be quickly accessed.
The one UX issue of this design is that on mobile devices the scrollable menu doesn’t move along with the active section which is highlighted. I am currently working on a solution for this.