We recently designed, built, and launched wedding and portrait photographer Emily Mollineaux’s new website. Besides looking fabulous (how could it not with Emily’s gorgeous photos all over it?), this project posed some interesting challenges—especially in my website construction phase. The way in which we addressed these challenges illuminates some of The Wonder Jam’s core design philosophies. Namely, that a website is a tool that we want our clients to be comfortable using independently.

In this behind-the-scenes deep dive, I’ll explore how we bridge the gaps among:

· Design (the beautiful mockup)

· UX (User Experience, aka how visitors will experience the site)

· UI (User Interface, aka how our client will use and update the site moving forward on their own)

We consider all these factors in every website we design and build, but Emily’s site is an especially apt example of flexing our custom developer muscles while keeping the client’s future needs centralized.

1) Work within a specific tool ecosystem to keep things consistent and coherent

It’s 2019—with enough funds, you can find someone who can build a website that will do a billion things and look exactly how you want. But once that contract is over, when you need to make a change or fix a typo, can you take care of that yourself? Usually not.

At The Wonder Jam, we spend a lot of time and energy to avoid that feeling of helplessness, even on our smaller scale. Not only do we want to empower our clients to be comfortable working on the admin side of their websites, but we want even the fanciest features of their new site to be intuitive to adjust with a limited amount of training. For this reason, with all our clients, we use WordPress and a premium page builder plugin called Beaver Builder as the foundation of our sites.

When it came to building a custom, non-generic slideshow to show off Emily’s stellar photography, we had a few options:

A) we could build something totally from scratch in JavaScript and html code.

B) We could find a third-party WordPress plugin that had the right combination of features, but its own interface, or…

C) We could manipulate the tools we were already using (Beaver Builder modules) so that it looked custom, but the interface would be familiar for Emily when she needed to add new photos.

Here’s what you see on the home page, followed by what Emily sees when she’s editing:

I achieved this by using the default Beaver Builder “Slideshow” module and using CSS to replace and reposition the PREVIOUS / PAUSE / NEXT buttons with custom arrows and “Storyteller Through Photographs.” Everything else about the slideshow, however, works the same as usual—including the simple user interface that matches the rest of the site.

I used a similar tactic on the “Reviews” page, but this time with a testimonials module instead of a regular slideshow. Getting this dialed in was very tricky, especially for smaller screens, but for users on the front end, and Emily on the back end, it’s cohesive:

We also invested in some additional Beaver Builder add-ons to be able to deliver the slick user experience on Emily’s “My Work” page. Being able to browse her portfolio photos by category, without having to reload the page, was essential for the streamlined experience we created.

2) Mitigate future design limitations

One oft-overlooked factor in usability is how flexible the design is to new aesthetic content. For example, pre-built WordPress or Squarespace templates all look amazing “on the shelf” but are quickly unrecognizable (and sometimes no longer look good) once your real photos are in there. Sometimes the composition of the photo doesn’t quite match, like on the background of a row with text, or sometimes all your images are landscapes while the theme was really built with portraits in mind.

When we hand the keys to a new website over to a client, we try to think a bit into the future. What will happen when they try to upload a new photo to the homepage? Are there only certain kinds of photos that will look good? Will a certain sort of photo make some other element not work correctly? As I build out the site, I try to hold on to these questions and add some fail-safes to mitigate for potential issues. Sometimes I even go back to our designers, Allie and Erika, to approve small aesthetic adjustments that will make things easier for the client down the road.

Emily’s site, for example, has two different arrangements for its header logo and navigation bars. On the “Home” and “Reviews” pages, the header is an overlay on top of the slideshows of her photos, whereas the rest of the pages have a more solid green background behind the header. For these overlay sections, since the text is white, the photo behind it must be reasonably dark for the text to be legible.  

This presented a potential problem down the road. In the mockup, these photos had a fade-to-dark-grey gradient Photoshop layer over them, but I didn’t want Emily to have to add that layer whenever she wanted to feature a new shot. So, instead, I was able to add that gradient layer directly to the site using CSS (and adjust it as needed for tablets and phones) so that Emily does not have to worry about it and can upload any photo she wishes, light or dark.

3) Don’t reinvent the wheel

In the planning process, we got crystal clear with Emily about what she needed her website to do for her, and what she DIDN’T need it to do. Usually, in that column, she already had an online tool that was doing that thing well—like Instagram for ongoing content and microblogging, or Pixieset for hosting client images.

With all the tools and talent at our disposal today, this clear sense of scope and maximum return inform every step of our process.

In these ways, our team tries to keep our client’s needs and abilities in mind throughout the entire process of making something beautiful and useful to them. I hope these examples have inspired you to take a similarly holistic approach!