The Travellist Project

I’m always looking to learn something new every day, extend my knowledge base and add more challenging projects to my portfolio. If I’m in the business of designing and developing, then my portfolio should reflect my latest and greatest. Ideally we should all get paid for the work we do, but there are times where we have to make concessions and do it for the love of it (and to learn & show off a good portfolio as mentioned). 

With all that said, I have picked a new project to create a travel website for The Travellist, which is a not-for-profit print publication. The guys at The Travellist have no web presence, outside the work published in, and have engaged my services to create a website where they can create a community of people who enjoy travelling.   This will be my 1st in a series of posts, documenting the project.

Establishing context

I’ve been able to establish a few key points in during the initial client interaction:

  • The initial go live was last year, meaning “they’re late” and would ideally want a site sooner rather than later. That being the case, we both agreed that having designs first before diving straight into development was ideal. The project timeline, therefore, had to accommodate the design process.
  • So what does the plan look like and how long will this process take? The best way to establish the work required is to note all steps required in Trello. It’s free, it’s fast and it’s a collaborative software where I can establish all the activities in the web design and development process.

Trello snapshot n.b. I discover new activities as I go along through client engagement and add/modify those activity cards in Trello.   

  • An important objective is that the site must allow “the photographers in each issue to be able to contribute to the site (if they wish). The golden dream is to allow people to be able to set up a profile with their photography/portfolio and travel destinations on the website – and create a little community“.
  • Managing and administration will remain with the client, as it should be. It is their site after all.
  • Based on the above, I have established that the site will at least have an administrator (the Chief Editor), Site Contributors (photographers and bloggers) and visitors. This information is vital as it establishes the context in the different users I have to design for.
  • Because of the different users, I entered an activity to test the site pre-launch with test contributors and visitors. User testing is key to learning and refining the site. I have no idea how long this process will take at this stage but have allowed for 3 iterations of user testing for now.  

There are other more obvious requirements like the site needs to be responsive, that I did not even bother putting up there.

Starting a design

Blank slates are always difficult at first (but exciting!). Having read some background material on The Travellist, I had a mental picture of what the site might look like. It is an online travel mag with rich photography, so I thought that a grid-like presentation would work to showcase travel posts.  But after asking the client to send some examples of sites they like and don’t like, I was able to establish their tastes and test design boundaries (as well as guide the site’s design direction). To my surprise, the client specifically stated that the grid format has been overdone. Just as well I asked for those examples. Asking for examples of live sites was also important in that we were able to pinpoint features that we should consider with the live site. A splash page animation like the one seen at Complete Baltics was a nice-t0-have feature, for example. Now creating something like this is one big challenge in itself and I thought it would be pertinent to say it up front rather than simply say, ‘it can be done’. In theory, anything can be done, but time is an important constraint. Which leads me to establishing the site’s MVP.


According to Wikipedia, the MVP is defined as: “A minimum viable product has just those core features that allow the product to be deployed, and no more. The product is typically deployed to a subset of possible customers, such as early adopters that are thought to be more forgiving, more likely to give feedback, and able to grasp a product vision from an early prototype or marketing information.” The 1st sentence applies to this project, but the 2nd does not as the site will be released to the general public when we go live. With that said, we have planned for 3 iterations of testing to make sure that we get it right.  At this stage, our MVP looks like this (taken from Trello):


  1. Transfer / Create a DNS
  2. Hosting


  1. Designing (low to high fidelity)
  2. Site architecture and page flow
  3. Style Guide
  4. Client review and approval


  1. Creating pages
  2. Importing content
  3. Develop features (search function, CTA, map feature etc.)
  4. Define user roles
  5. Copy

User Testing

  1. User test prep
  2. User test
  3. Revision

..iterate up to 3x.

Final development

  1. Final copy
  2. Security
  3. Backup
  4. SEO
  5. Performance optimisation
  6. Social media

There’s still a few things to add and consider, but that is the plan as it stands. There are also post-MVP type activities like adding the extra effects (Splash screen, page loaders etc.) that can go after the site has gone live. It’s always a fine balance between the all-singing-all-dancing solution to the solution that has the firm foundations.


I’ll get into the nitty-gritty of designing using Sketch (and Balsamiq) and the selection of a CMS platform.

About this post

PC Blue Avatar Time is money and we all would ideally want to get paid for the work we do. However investing in yourself is as good as potential future earnings too. And seriously if you enjoy doing something, it just doesn’t seem like work. These are the type challenges that makes you better and one should do more.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s