Do You Travel

Follow my journey all over the world

About

Photo Essay website redesign for travel influencer, Jack Morris.

View website

Details

Client: Jack Morris
Year: 2017

Responsibility

Web design,
Web development,
Performance imporvement,
User Experience design.

Overview

Jack Morris is a travel influencer from UK. Currently boasting 1.8M (per January 2017) follower on Instagram, he took beautiful pictures from all over the world and share it both on Instagram and his personal website.

Problem

Jack had several problem on previous website:

website were not responsive. It looks bad on phone;
overall typography, including its kerning and legibility was a big problem. Everything too thin and have no structure of hierarcy,
the website generally load very slow—even on decent internet connection. It took about 30 seconds to render the landing page,
it’s almost impossible to scroll (because of how large the image is), even on modern devices.

Solution

To solve these problems, I decided to develop a new wordpress theme from scratch.

Responsiveness is an easy issue, because the content itself (photos) have already ordered in hierarchy naturally.

I went with Avenir Next (Fallback to Lato) for the heading. Generous font weight (400[light] from 100[very light]) is chosen to make sure it’s legible. Bigger font size are used for more contrast.

Roboto went well with Avenir Next, so I choose it as the body text. Ample line height and margin are carefully selected for both mobile and desktop device to give hierarchy. You can see them on action from Q&A section.

This solves previous website design. The content and comment section have the exact same typeface, same font size, line height, and therefore no hierarchy! I can’t even decide which one is content and which one is comment when I first saw it.

For image, Jack always uploaded the image on full resolution—straight from the camera. That’s why the webpage load slowly. I decided to use a plugin that converts all 4000~ pixel images to 1800~ so it loads way faster while still maintaining respectable resolution.

Other than that, I lazy loaded the image so the image only downloads when visitor scrolls to the image. This help everything become much smoother. Previously, it almost impossible to scroll on page with loads of image.

The content also naturally separated by visit per country. There’s no need for me to think about the information architecture.

Jack also commissioned me to make a tribal illustration below the heading.

Tech Stack

Wordpress as CMS, because Jack already familiar with the medium.
Various plugins from wordpress!

Closure

Jack has quality content, therefore the project are relatively easy. Remember for future client: website design only help the contents shine, not the other way around.

The redesign only act as medium for more pleasurable experience.

"Working with Philip has been a pleasure - he is fast, innovative and builds a functional yet aesthetically pleasing looking website."

— Jack Morris

Result

One of the comment from the website 😍.

Scrolling

is now possible

by fixing the image

1.32s

...load time from ~8s

Easier

load from server

much better performance

Visit website

Projects.

Life gets in the way and I have yet find time to update projects section.

It's outdated and there are far more ambitious projects that I've been working on. Reach me out directly or see the glimpse on Twitter.

Bukapintu

product designproduct dev.web designweb dev.brand identity

Bukapintu is an exclusive community that matches companies with high quality candidate from top universities.

Learn more →

Do You Travel

web designweb dev.graphic design

Website redesign for Jack Morris, Instagram influencer with 1.8M followers.

Learn more →

Startup Lab

web designweb dev.brand identityphotography

College startup lab is a 3-day intensive startup bootcamp that teaches participant the right way to build a startup.