Case Study – Jungo

Paul Maskall, founder of Jungo, wasn't running a typical tech-based company. It's all about the human connection with technology in our modern society and helping people connect with it in ways they can understand.

We've probably all seen a lot of tech company websites. They're often some shade of blue and probably contain at least one picture of some variety of computer code.

Jungo's doing work such as safeguarding and education and about how to get people involved and connected with technology in a human way. In addition, they're security experts and work with firms to improve their own security which they achieve by emphasising that human connection and helping people to relate to the situations they're facing.

This all meant I wasn't going to be creating the typical tech company website. No standard blue. No pictures of code.

Technology used:

  • HTML5
  • CSS3
  • Bespoke Javascript
  • WordPress

What I provided:

  • Initial UX work
  • Bespoke Design
  • Bespoke, Hand-Coding

The brief

As I’ve already mentioned above, Jungo’s pretty unique when it comes to the tech industry. Paul at Jungo knew he didn’t want the straight-laced, buttoned-up typical tech website. That works for some firms, but it wasn’t going to for Jungo.

They wanted something much more organic. They’d already had a logo designed and also know roughly what sort of colours they wanted to use. Other than that, it was a blank slate.

Some UX work

As always, it’s important to start by thinking about your users/customers. You can’t simply gamble about in the dark and expect good results. Even if the end result looks good, it might not deliver what the end user needs. We brainstormed about who’s going to be visiting the site and what they’d want to accomplish on it.

That gave us a pretty good idea of the structure the website as a whole should take. We wireframed some ideas for the pages together too, as Paul at Jungo already had some ideas.

The design

With the UX work undertaken and some wireframe sketches in hand from our meetings, I began designing. It followed much the path we had discussed with a few additions/changes. I came up with a design that Jungo was extremely happy with. Because I’d be developing the website as well, I knew what techniques I could use in the coding to achieve certain effects and so I could push myself technically with this project.

I incorporated organic lines into the design, and carried that theme across the whole design. I also kept accessibility and ease of use in mind at each stage. During our initial UX work, we agreed that there was a wise demographic of people that could potentially use the website. The design needed to consider every possible user.

Here’s a screenshot of the homepage (as of writing this, Jungo is putting the finishing touches to the content for the website before it goes live).

A bespoke WordPress website I designed and hand-coded for Jungo.

Development

One of the points in the brief for the project was that Jungo wanted to be able to edit as much of the content as possible themselves. We’d already decided on using WordPress for their website. They were familiar with the platform and knew what is was capable of.

I set about hand-coding the website and creating it as a WordPress theme. I utilised Advanced Custom Fields, a WordPress plus, to allow me to add as many bespoke content fields as needed for each of the pages. To make sure it was as customisable as possible I added fields to change things like the text on button links, and added conditional statements so if they wanted to remove a particular section they could remove the content and the website wouldn’t display them.

Hand-coding the website, as always, gave me more control than I otherwise would have done. I was able to ensure their new website was incredibly fast and well put together. Rather than just rely on a Javascript framework for some of the small interactivity/animations, I coded the Javascript by hand. This meant there wasn’t any unnecessary bulk from a framework (sometimes, you can end up with a large percentage of a Javascript library/framework simply going unused).

I made use of more recent CSS techniques such as CSS Grid to achieve some of the layouts needed. For example, on Jungo’s events page I created a grid of links over images. Rather than simple square images with links in a grid formation, I was able to vary the width and height of certain images to make a much more interesting and engaging design.

Some websites that use WordPress can sometimes over-rely on plugins. That’s ok depending on the circumstances, but for Jungo’s website I wasn’t about to use a Contact Form plugin, partly because they were looking for something entirely unique. So I also hand-coded their contact form (in the footer of the website) which again provided much more control than I would otherwise have been able to achieve if a plugin had been used.

Let's make something great together

Get in touch to discuss starting a project

Get in touch