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.
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).
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.
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.