LOADING

Logo

Jason Heyburgh

WEB DESIGNER

UX DESIGNER & FRONT-END DEV

Some image

UX DESIGN

Pangea Trails
Multilingual Adventure Travel website

Some image
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.

Problem Statement

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.

User Personas

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.



Some image

Information Architecture

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.



Some image

Visual Design

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.

Some image

UX DESIGN

Kid Castle Recruitment
English teachers recruitment website

Some image
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.

Problem Statement

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.

User Personas

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.

s
Some image

UI DESIGN

GoElectric Solutions
Single product E-commerce store

Some image

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

Some image

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.

Envisio
Visual Media tech startup

Some image

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.

Some image

FRONT-END

Contact form
With animated placeholder text

See the Pen Wordpress/wp7 contact form with animated placeholder text by Jason Heyburgh (@MrShibumi) on CodePen.

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

See the Pen Mobile first, horizontal scrolling menu with active sections by Jason Heyburgh (@MrShibumi) on CodePen.

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.

Responsive pricing table
Triggered using JS

See the Pen Responsive price/comparison table by Jason Heyburgh (@MrShibumi) on CodePen.

This is my solution to a comparative pricing table with a large number of fields. With a mobile first approach in mind I wanted to make sure that all pricing would be able to be viewed within the viewport.
I forked the initial code on codepen and modified it according to my project objective. The main changes I made were creating unique classes for the table in order to not cause any styling conflict, I also adjusted the columns according to my spec.

Recent work
Visit live websites below

Front-end Development

I love working with front-end solutions and bridging the gap between interaction design and code. Although not limited to, Front-end is my strongest dev skill. I create bespoke solutions based on the project scope of each job, working with both static and CMS based applications.
Being a freelancer, I build projects from start to finish and so I have learned varying facets of web development. From the Wordpress ecosystem and databases to optimizing websites with security and performance in mind.
I love working with and learning new technologies, currently I working on my Javascript to improve my interaction design capabilities and have showcased some of my newly acquired skills on this website. This website was also built while I was learning version control, you can view my Github repo upon request.

Italian Trulli
{HTML}
Italian Trulli
{CSS}
Italian Trulli
{Bootstrap}
Italian Trulli
{Wordpress}
Italian Trulli
{WooCommerce}
Italian Trulli
{MySQL}
Italian Trulli
{JS}
Italian Trulli
{Cloudfare}
Italian Trulli
{Github}

User Experience Design

Most of my UX experience falls within strategy, design and user research. I take an unbiased approach of analysing user needs, business needs and the technological capabilities of the job scope and combine this into a strategy to govern how I approach each project. I use innovative ways to solve problems and create desirable user experiences.
In an ideal scenario my UX process would include; project scope & strategy, research, user analysis, design, production, testing and reiteration if needed. Unfortunately, due to a variety of possible constraints this is not always possible, and this is when my approach is adapted to overcome these limitations.

Italian Trulli
{Xd}
Italian Trulli
{Invision}
Italian Trulli
{Balsamiq}
Italian Trulli
{Google Analytics}
Italian Trulli
{Hotjar}

User Interaction Design

As a UI designer we all have a passion to design beautifully crafted, high fidelity mockups that have silky smooth transitions and intuitive user interactions. The trick is bridging the gap between visual WOW and feasibility, there’s no point in crafting a masterpiece if it’s not plausible to develop or the concept only works at certain aspect ratios.
My combined experience as a front-end developer and UI designer helps me bridge this gap and curate mockups that are both beautiful and functional.

Italian Trulli
{Xd}
Italian Trulli
{Invision}
Italian Trulli
{Photoshop}
Italian Trulli
{Illustrator}
Italian Trulli
{InDesign}

HelloWelcome to my portfolio

I’m Jason Heyburgh {Alias: Mr Shibumi}, a Cape Town based freelance web designer. UX, UI and Front-end development are my areas of expertise with User Experience being my strongest passion. Having a BBA in marketing; my design, planning and strategic process is highly user centric.
I have a thirst to learn and this is evident by my continuous drive to study and learn new technologies. I have been in the travel & tourism industry for over five years and have travelled and lived in Asia for another two. Needless to say, travel and culture play a big part in my life and inspiration for my creativity.
I am looking to join a team where I can learn and progress, not only as a designer but also as a human. This is my passion and I would love to share it with you.

Let's chat!Would you like to hire me or collaborate?

* All fields required