Conveying Functionality and Motion in Site Design by GOBAG

Much like its product, GOBAG's website design centres around efficiency with a particular focus on finer details to enable seamless navigation with a thematic thread of movement throughout.

Diagrammatic animations pack and unpack, providing simple instructions as you scroll. They are joined by other subtle pockets of motion, creating an apt sense of momentum and discovery while bringing the key features of the travel pack to the foreground.

With a background in engineering and having founded the company to fulfill his own practical needs, James Fyfe had a clear vision about what needed to be communicated in the online presence for GOBAG.

He talks to us about keeping scalability in mind and how he approached translating the simple functionality of his product in the aesthetic of the website.

logo

What can you tell us about GOBAG and your role in the company?

In 2015, GOBAG was launched on Kickstarter. Things moved quickly and we reached our goal in a few days and were eventually 663% funded with almost 2,500 backers from all over the world.

The core belief is that when you travel compact, you experience more. It’s this belief that drives me to create more innovative products that enable others to do the same.

I run the business as a solopreneur and outsource a lot of the work so I can focus on the mission and continuity of the brand.

From the About section on your website, it seems that the idea for your product is something that came out of necessity. Can you tell us a little more about that?

Yeah, it was absolutely due to necessity. Two years ago, when I was travelling on budget flight most weekends, I was frustrated with the bags I was using. I couldn't easily travel with only carry-on. I actually used to pack my clothes in a bin bag, vacuum the air out and zip tie the end. I thought, “There’s got to be an easier way to do this”… and the GOBAG was born!

I bought a sewing machine from gumtree for £24, taught myself to sew watching YouTube, and put together the first few prototypes myself.

gobag-in-india-3

When beginning the process of designing the site, what were some of the things you thought would be essential for you to consider?

I wanted the homepage to clearly show the main features of the GOBAG. We have a couple of tough features to explain with just photos and copy so we looked at other ways of achieving this. We landed on using animations as explainers because they fit our brand style and proved to be a great way of communicating the message.

I was also conscious to make sure the website would be scalable in the future. We are going to be growing the product range over the next year, so this was a really important consideration.

gobag9

 

In what ways did the nature of the product itself play into the direction you took with the design?

I used to be a mechanical engineer, so I’ve always preferred simple functional design. This has manifested itself in the product and in the web design. I think engineering line drawings are really great, which inspired the animations.

screen-shot-2016-11-21-at-19-37-43

 

You have some wonderful animations peppered throughout the site. Can you tell us more about producing these and the conversations you had about the look and feel they have to them?

Thanks! I love animation and think that it’s a very powerful tool to explain how products work. I was lucky enough to find a great freelancer who was able to get the style I was looking for quickly. One of the short cuts I used with the freelancer when we were scoping out the product animations was to send him a video of the process I wanted the animation to show. They don’t have to be fancy, I shot mine with my phone.

_mgl7152

Try-Shopify

What other elements of the design are you particularly pleased with or posed unexpected or specific challenges?

For me the copy of the site posed a large challenge. I’m not a born copywriter. It was something I had overlooked at the beginning and it required a lot of work to get it right.

screen-shot-2016-11-21-at-19-38-51-copy

Which platform is the website built on and what made you decide to go with them?

I had heard good things about Shopify from a few ecommerce podcasts I was listening to last year. It’s proved to be a great choice for us. They implemented Apple Pay very quickly and a lot of our customers are using it. Android pay, which hasn’t been released yet, looks promising too.

filtered5

 

Are there any third-party online tools you use with your website that you find particularly useful?

Jetti.io is very useful. I have two distribution centres, one in the US and one in the UK. Jetti takes care of routing the orders to the right distribution centres and then it relays the tracking numbers back to Shopify.

_mgl7016

Knowing what you do now, what might you do differently if you were to build a brand new ecommerce platform for GOBAG tomorrow?

Being able to have an e-commerce platform like Shopify that could accept multiple currencies would be a huge advantage for GOBAG. We have a split customer base between the Europe and the US. So being able to accept dollars or pounds throughout the check-out process would help to increase the conversion rate at the moment. It’s possible but requires two Shopify stores at the moment, which is pretty inconvenient.

com

What other online stores do you find inspiring or especially admire?

beardbrand.com is great at displaying a lot of useful resources related to their product range.

linjer.co is a really cool store which sells luxury leather goods direct to consumer.

bloomandwild.com keeps me out of trouble. It’s a flower delivery site in the UK, which you can upload friends and family birthday’s to, so I don’t forget my mum’s birthday!

spoke-london.com have a great store, but you should sign up to their EDM. It’s pretty funny makes me buy more trousers than one man realistically needs!

filtered

Do you have any plans for the next stages of developing GOBAG?

Haha, it’s all top secret. But really, I would like to grow the business over the next few years by diversifying the product range. No major surprises there, but you’re going to be seeing a lot more from us in 2017.

logo

Images © GOBAG, 2016

Philip Dennis

Philip is a freelance illustrator and writer, interested in all aspects of art and design. He is also a passionate educator, having taught English in Japan for several years and now running art workshops in schools in south London, and in collaboration with his local council. When he’s not exploring the visual arts, he likes to immerse himself in music, both as dedicated fan and a performer.

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating *